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

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

  性能优化可以从下面四个方面入手 :

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

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

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

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

  那如何加速页面加载来提升用户体验呢?

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

  1、合并资源文件;

  2、使用图片精灵;

  3、使用CDN加速(例如加一个时间戳,但前提是你要确保你的项目适合使用这一个方法);

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

  5、在所有静态文件增加过期头(这样浏览器就会缓存静态文件);

  6、使用GZIP压缩(可以通过设置头部字段的方式,比如添加一个vary字段);

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

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

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

  10、不要使用css表达式;

  11、css放在头部,js放在尾部。

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

猜你喜欢

转载自www.cnblogs.com/NeryXJ/p/9546994.html