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

性能评估指标

  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