H5:前端开发性能优化

1.  规定图片的宽高减少重绘

2. 不要用表格布局，表格通常会导致页面重绘，浏览器是一行一行显示表格的，如果有一行的列宽和行高和之前的不一样那之前绘制好的行也必须重新绘制。

3. 定义字符集，不同的字符集有不同的渲染方式。

4. 不要重组DOM，重新排列DOM通常都会引发浏览器重绘。

5. 合并资源减少http请求，不增加额外的带宽

6. 使用CDN加速

7. 避免空的src或href属性值

8. 增加版本控制过期时间

9. 将css放到头部，css文件加载完成后渲染页面

10. js放到尾部，脚本会阻止并行加载，当浏览器加载一个脚本时，他不会去加载其他文件，可以在script标签上添加defer属性，让浏览器加载脚本时也去加载其他文件，缺点有兼容性问题。脚本放在结束处可以保证脚本执行时元素肯定是可用的。

11. 避免使用css表达式，css表达式页面滚动甚至鼠标移动的时候它就会执行。

12. 移除不使用的css语句，因为现在很多浏览器都是通过遍历所有的css规则来匹配所有的元素

13. 对js和css代码进行压缩，这样做可以减少加载量，节省带宽

获取更多的文章，欢迎关注微信公众号