前端性能优化

Posted 2020-08-11

一、前端性能优化现有技术

(1) 减少HTTP请求次数。

    因为站点80%的响应时间会花在前端的各种页面元素上，那么尽可能的减少页面元素就是提高站点响应速度的关键。

(2) 使用CDN。

    用户离WEB服务器的远近对响应时间会有很大影响，把需要访问的内容部署到多个且地理位置较为分散的服务器上可以有效提高页面加载速度。

(3) 增加Expires Header。

丰富的网页内容意味着更多的样式、JS文件以及图片等资源，利用Expires header就能在浏览器缓存这些元素，避免后续访问中完全不需要的HTTP请求。

(4) 压缩页面元素。

合理的压缩页面元素后就能加快页面的响应速度。

(5) 把样式表放在头上。

    把样式表放在头部可以避免在加载页面的时候出现只有标签内容没有内容样式这样的非常影响页面美观的浏览体验。

(6) 把脚本文件放在底部。

    把脚本文件放在底部不但可以达到最大的并行加载，也能保证页面的顺序显示。

(7) 避免CSS表达式。

    CSS表达式可以做到很多事情，但是同样危险的它如果执行次数太多的话就会非常影响页面的性能。

(8) 把javascript和CSS放到外部文件中。

    外部文件是能被浏览器缓存的，那么把代码放到外部文件中是可以加快页面访问速度的，虽然确实放在页面内部能减少一些HTTP请求，但是如果代价是增加页面大小，那就得不偿失了。

(9) 减少DNS查询次数。

    为了减少DNS的查询次数，我们可以减少一些主机名，尽管有可能也会减少并行下载量，但是如果能够合理的把内容分布到2个，最多4个不同的主机名中就能达到一种最好的平衡。

(10) 最小化JAVASCRIPT代码。

    最小化JS代码就是把JS代码中的空格等不必要的字符去掉，降低下载的时间。

(11) 避免重定向。

    浏览器有时会自动重定向请求到Location指定的URL上，这样会非常影响用户体验。

(12) 删除重复的脚本文件。

    利用BOWER这个包管理工具来下载并且检测脚本文件的依赖性，就可以较为完美的防止脚本文件重复。

(13) 配置ETAGS.

    Etag（Entity tags）实体标签，这个tag和你在网上经常看到的标签云那种tag有点区别，这个Etag不是给用户用的，而是给浏览器缓存用的。

(14) 缓存AJAX。

AJAX异步加载机制确实对于减少页面响应时间和提高用户体验度来说是个奇妙的技术手段，但是如果不能得到良好的利用，不仅不会提高页面响应速度，甚至会降低页面页面响应速度，而对AJAX的response进行缓存是真正可以提高AJAX效率和页面响应速度的方法。

(15)楼层跳转和图片按需加载的功能，使得用户从某一块内容到另一块内容的跳转过程中，中间部分的图片信息是不会加载出来的，这样不仅跳转效果流畅，对于PC机的配置要求也放低很多，HTTP请求也减少很多。

(16)图片精灵技术的运用更算得上是炉火纯青了，整个页面虽然看起来小的图标很多，除了使用ICOFONT，其实其他的图标都集中在了一张图片上，利用CSS里background-position的技术来实现雪碧图，这样会减少很多的页面资源。