加速页面加载实现性能优化

　　提到性能优化&＃xff0c;首先想到的就是css和js在页面中放置的位置&＃xff0c;css 放在head头部可以提升用户体验&＃xff0c;这样在页面加载的时候&＃xff0c;元素和样式同时渲染出来&＃xff0c;用户就不会觉得慢。

　　性能优化可以从下面四个方面入手 &＃xff1a;

　　1、页面是如何加载出来的&＃xff1b;

　　2、尽可能的用css来完成交互&＃xff0c;因为浏览器天生就会处理他们&＃xff0c;而且代码量也会比js少&＃xff0c;也避免了js跨浏览器的问题&＃xff1b;

　　3、用渐进式增强提升用户体验&＃xff1b;

　　4、用各司其职的理念让代码变得已维护和开发。

　　那如何加速页面加载来提升用户体验呢&＃xff1f;

　　减少http请求也是我们优化的方式之一。

　　1、合并资源文件&＃xff1b;

　　2、使用图片精灵&＃xff1b;

　　3、使用CDN加速&＃xff08;例如加一个时间戳&＃xff0c;但前提是你要确保你的项目适合使用这一个方法&＃xff09;&＃xff1b;

　　4、避免空的src和href属性值&＃xff08;可以把href设成一条什么都不会做的js语句&＃xff09;&＃xff1b;

　　5、在所有静态文件增加过期头&＃xff08;这样浏览器就会缓存静态文件&＃xff09;&＃xff1b;

　　6、使用GZIP压缩&＃xff08;可以通过设置头部字段的方式&＃xff0c;比如添加一个vary字段&＃xff09;&＃xff1b;

　　7、对js和css进行代码压缩。把不必要的字符全部移除。这时候我们就需要用到代码压缩工具。

　　8、减少重绘的次数&＃xff08;规定图片的宽高&＃xff1b;不要用表格布局&＃xff1b;定义字符集&＃xff1b;不要重组DOM&＃xff0c;避免浏览器的重绘&＃xff0c;如果一定要&＃xff0c;那就用产生重绘最少的方式&＃xff09;

　　9、移除不必要的css语句&＃xff1b;

　　10、不要使用css表达式&＃xff1b;

　　11、css放在头部&＃xff0c;js放在尾部。

参考书籍&＃xff1a;《高性能HTML5》 作者&＃xff1a;Jay Bryant && Mike Jones    译者&＃xff1a;奇舞团