关于前端性能优化的文章数不胜数,有从各个角度切入,也有单抓某点持续深入探讨的。
由于个人喜欢纵观全局式的学习,因此这里从多个角度整理、分析前端性能优化可行的一些方案。
以下内容有不少是从其他地方摘录、整理而来的,在文末我会把一些比较全面重要的资料
提供出来,供大家参考学习。

性能评估指标

  1. 首屏时间

    1. 浏览器显示第一屏页面所消耗的时间,以800x600像素尺寸为标准,从开始加载到浏览器页面显示高度达到600像素且此区域有内容显示的时间。
    2. 工信部在《宽带速率的测试方法用户上网体验》规范标准中采用“首屏时间”指标。
  2. 用户体验评估标准

    1. 一个页面的“总加载时间”要比“首屏时间”长,但对于最终用户体验而言,当内容充满首屏的区域时,用户就可以看到网站的主要内容并可以进行各自的选择了。首屏时间的快与慢,直接影响到了用户对网站的认知度。
    2. 在国内的网络条件下,通常一个网站,如果“首屏时间”在2秒以内是比较优秀的,5秒以内用户可以接受,10秒以上就不可容忍了
  3. 白屏时间

    1. 这个其实不多说,读者也明白,就是页面处于空白的时间。页面空白,用户就会焦躁,并且变得不耐心。影响白屏时间的多数是:DNS解析耗时+服务端耗时+网络传输耗时。
  4. 用户可操作时间

    1. 顾名思义,这项指标值得是,我们的网页用户可以使用的时间。一般来讲 domready时间,便是我们的用户可操作时间了。
  5. 总下载时间

    1. 通常指,页面总体的下载时间,所有的页面资源都下载完成。
  6. 推荐资料

    1. 聊一聊前端速度统计(性能统计)那些事儿
    2. WEB前端性能优化常见方法

优化策略

1.减少http请求

在浏览器(前端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出。
一个正常HTTP请求的流程简述:如在浏览器中输入”www.xxxxxx.com”并按下回车,经过DNS查找,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行。
而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时,将会频繁的与服务器建立连接,与释放连接,这必定会造成资源的浪费,且每个HTTP请求都会对服务器和浏览器产生性能负担。
网速相同的条件下,下载一个100KB的图片比下载两个50KB的图片要快。所以,请减少HTTP请求。

合并图片,图片降质

2.代码压缩

  • webpack CommonChunkPlygin Uglify CSS,JS代码压缩,混淆
  • 合理利用Localstorage
  • nginx开启Gzip可减小文件60%-70%体积

3.requestAnimationFrame

推荐资料

https://segmentfault.com/a/1190000003646305#articleHeader28
https://github.com/kangkk/web_performance_optimization