前端性能
zhentaoo opened this issue · 0 comments
zhentaoo commented
关于前端性能优化的文章数不胜数，有从各个角度切入，也有单抓某点持续深入探讨的。
由于个人喜欢纵观全局式的学习，因此这里从多个角度整理、分析前端性能优化可行的一些方案。
以下内容有不少是从其他地方摘录、整理而来的，在文末我会把一些比较全面重要的资料
提供出来，供大家参考学习。
性能评估指标
-
首屏时间
浏览器显示第一屏页面所消耗的时间，以800x600像素尺寸为标准，从开始加载到浏览器页面显示高度达到600像素且此区域有内容显示的时间。
工信部在《宽带速率的测试方法用户上网体验》规范标准中采用“首屏时间”指标。 -
用户体验评估标准
一个页面的“总加载时间”要比“首屏时间”长，但对于最终用户体验而言，当内容充满首屏的区域时，用户就可以看到网站的主要内容并可以进行各自的选择了。首屏时间的快与慢，直接影响到了用户对网站的认知度。
在国内的网络条件下，通常一个网站，如果“首屏时间”在2秒以内是比较优秀的，5秒以内用户可以接受，10秒以上就不可容忍了 -
白屏时间
这个其实不多说，读者也明白，就是页面处于空白的时间。页面空白，用户就会焦躁，并且变得不耐心。影响白屏时间的多数是：DNS解析耗时+服务端耗时+网络传输耗时。 -
用户可操作时间
顾名思义，这项指标值得是，我们的网页用户可以使用的时间。一般来讲 domready时间，便是我们的用户可操作时间了。 -
总下载时间
通常指，页面总体的下载时间，所有的页面资源都下载完成。
优化策略
- 减少http请求
在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。
一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，经过DNS查找，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行。
而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时，将会频繁的与服务器建立连接，与释放连接，这必定会造成资源的浪费，且每个HTTP请求都会对服务器和浏览器产生性能负担。
网速相同的条件下，下载一个100KB的图片比下载两个50KB的图片要快。所以，请减少HTTP请求。
合并图片，图片降质 - 代码压缩
- webpack CommonChunkPlygin Uglify CSS，JS代码压缩，混淆
- 合理利用Localstorage
- nginx开启Gzip可减小文件60%－70%体积
- 推荐资料