【高性能HTML5】读书后感

 

   前言：

 

       6月份活动又来啦，必须必地参加。这本确实是一本专业方面，仔细地读下来感觉有一些收获。

 

   正文：

 

       这本书带来了：

 

• 理解浏览器的代码执行机制
• 如何使用h5的新特性
• 介绍一些模式和技巧
• 介绍一些服务器端的技术

 

      什么是高性能？

 

• 页面加载时间：重要的性能指标
• 浏览器性能：js引擎和css动画处理的优化和加速
• 网络性能：节省带宽
• 开发效率：解决命名冲突、代码复用等

 

     开发原则：

 

• 编写符合当代浏览器性能的代码

       减少html中元素的数量、减少重绘：

 

1. 要改动的元素在DOM数种的深度，越深则改动就越独立，对其他节点影响越少
2. 要对DOM有多次操作，尽量合并到一次

 

• 用css布局

       浏览器渲染页面其实就是渲染一系列的“盒子”，而盒子里面有很多“盒子”。

 

       盒子套盒子：把一个或一大组元素都包在一个盒子里。

 

 

• 渐进式增强的方法

      首先有一个基本的设计是可以兼容所有浏览器的。再为较新的或者更新的浏览器做加强的显示或者功能。

 

       介绍了两个不错的网站和工具：

 

       http://css3please.com/   和 http://css-tricks.com/autoprefixer/

 

       关于Modernize其实对于前端专业的同学应该一点也不陌生，它就是一个不错的检测js功能十分可以的工具。

    

 

• 各司其职

1. html是内容之源
2. css是展现大师
3. 动态数据之王，交互

  

 

  性能准则：

 

• 减少http请求：合并资源文件、使用雪碧图
• 使用CDN
• 避免空的src或者href
•  增加过期头
• 启用GZIP：Accept-Encoding: gzip, deflate
• css放头部
• 减少重绘：规定图片的高和宽、定义字符集、不要重组DOM
• 。。。

 

    其实总体上还是那个32条

 

 

  总结：

   

     其实以前很多前端关注的是js的性能，还有服务相关的，但是h5上面其实也是有很多可以优化的地方，值得注意