前言:
6月份活动又来啦,必须必地参加。这本确实是一本专业方面,仔细地读下来感觉有一些收获。
正文:
这本书带来了:
- 理解浏览器的代码执行机制
- 如何使用h5的新特性
- 介绍一些模式和技巧
- 介绍一些服务器端的技术
什么是高性能?
- 页面加载时间:重要的性能指标
- 浏览器性能:js引擎和css动画处理的优化和加速
- 网络性能:节省带宽
- 开发效率:解决命名冲突、代码复用等
开发原则:
- 编写符合当代浏览器性能的代码
减少html中元素的数量、减少重绘:
- 要改动的元素在DOM数种的深度,越深则改动就越独立,对其他节点影响越少
- 要对DOM有多次操作,尽量合并到一次
- 用css布局
浏览器渲染页面其实就是渲染一系列的“盒子”,而盒子里面有很多“盒子”。
盒子套盒子:把一个或一大组元素都包在一个盒子里。
- 渐进式增强的方法
首先有一个基本的设计是可以兼容所有浏览器的。再为较新的或者更新的浏览器做加强的显示或者功能。
介绍了两个不错的网站和工具:
http://css3please.com/ 和 http://css-tricks.com/autoprefixer/
关于Modernize其实对于前端专业的同学应该一点也不陌生,它就是一个不错的检测js功能十分可以的工具。
- 各司其职
- html是内容之源
- css是展现大师
- 动态数据之王,交互
性能准则:
- 减少http请求:合并资源文件、使用雪碧图
- 使用CDN
- 避免空的src或者href
- 增加过期头
- 启用GZIP:Accept-Encoding: gzip, deflate
- css放头部
- 减少重绘:规定图片的高和宽、定义字符集、不要重组DOM
- 。。。
其实总体上还是那个32条
总结:
其实以前很多前端关注的是js的性能,还有服务相关的,但是h5上面其实也是有很多可以优化的地方,值得注意
标签:盒子,DOM,http,js,高性能,HTML5,后感,浏览器,css From: https://blog.51cto.com/u_16170312/6548626