前端性能优化总结

性能卓越的网站，往往可以给访问者留下良好的印象，因此更容易积累庞大的用户和受众群体，这是关乎网站成败的关键因素之一。本文将从前端开发者的角度出发，审视和探讨一些基本的网站性能优化思想，以及在实战中的应用。

一、常用网站性能优化指标

对于网站性能指标最直接的印象可能是网站响应的速度，因为这是访问者最直观真实的体验。网站访问的过程从用户输入网站域名开始，通过DNS解析找到目标服务器，目标 服务器收到请求后执行服务器及数据库等一系列操作，并将相应数据经过互联网发送到用户浏览器中，最终由浏览器处理相应数据并完成网页的渲染呈现。

使用 window.performance 提供了一组精确的数据，经过简单的计算就能得出一些网页性能数据。

1.1、网页的资源请求与加载阶段

打开Chrome浏览器的DevTools,可以看到用户访问网站发送资源请求的全过程。

在建立连接阶段

• Queuing和 Stalled标识请求队列以及请求等待的时间。
• DNS Lookup则是执行DNS查询所用的时间。
• Inital Connection和SSL则包括TCP握手重试和协商SSL以及SSL握手的时间。

注意:由于浏览器自身缓存DNS,且在缓存中查询可以减少DNS的查询时间,所以实际应用中划分子域对性能提升的影响很难进行量化,这也是提倡在前端领域使用公共CDN服务器托管类库的原因之一。另外,HTTP2.0协议提供了单个TCP连接多路复用的能力,极大地提高了Web应用的性能,而本节所讲述的仍然是基于传统的HTTP1.0/1.1协议下的性能优化

在请求响应阶段

• Requestsent是发出网络请求所用的时间,通常不会超过Ims。
• Waiting(TTFB) 是等待初始响应所用的时间,也称为等待返回首个字节的时间,该时间将捕提到服务器往返的延
  迟时间,以及等待服务器传送响应所用的时间。
• ContentDownload则是从服务器接收数据的时间。

由此可见,为了实现网站的快速响应,首先需要考虑的就是减少资源访问及加载阶段所消耗 的时间。

在请求响应阶段,TTFB(Time To First Byte)所消耗的时间，更多体现在服务器程序的处理能力上,通常认为TTFB,时间不应该超过200ms,可以使用CDN加速以减少客户端到服务器的网络距离,也可以设置服务器缓存并通过为文件头设置Expires或Cache-Control来控制缓 存,达到减少TTFB时间的目的,在处理访问静态资源的性能优化上,上述方法尤其重要。而ContentDownload,在现今的网络条件下,通常不会成为性能瓶颈,因为如果发现ContentDownload时间过长，解决办法是减少发送的字节数

1.2、网页渲染阶段

网页的渲染速度和前端JavaScript的运行速度同样直 接影响着访问者的用户体验以及网站的整体性能。这一 点在重度交互的网站应用中,体现得愈发充分。

图中的Rendering以及Painting时间,就是浏览器在 页面渲染过程中的时间消耗。在对浏览器渲染过程进行优化之前,需要了解一下浏览器是如何渲染网页的浏览器渲染页面过程与页面优化。
首先需要注意的是,浏览器在加载到JavaScript节点后,会交由JavaScript引掌执行,如果 JavaScript对DOM树进行读写操作,则会影响DOM树的构建,从而阻寒浏览器的渲染过程。解 决此问题通常的做法是将JavaScript放在页面底部,或者通过异步的方式加载Javacript。另外,过 于复杂的CSS嵌套规则,会影响CSSOM的生成,导致渲染的时间被延长。在浏览器首次渲染以 后,页面上的元素还可能不断地被重新布局和绘制。对DOM节点进行添加和删除操作、通过 修改一些CSS属性、修改元素的display样式属性、移动或对节点添加动画、滚动或温 整浏览器窗口大小等这些操作都会导致浏览器的重新布局以及重新绘制,而修改元素的visibility- 背景色和前景色等地会导致重新绘制。如果处理不当,这些动作可能会产生性能问题,产生不好的用户体验。

然而有一些特别的属性比如(opacity 或者 transform)可以在不同的层中单独绘制。对这种属性的访问,并不会导致重新绘制,而是直接执行了合并图层Composite Layouts。由于图层合并 CompositeLayouts这个过程一般发生在GPU硬件渲染中,通常会非常高效,并可以减少渲染过程中的性能损耗

二、依旧有效的Yahoo性能优化法则

最全面的网站优化前端解决方案

三、性能优化工具

在网站进行优化之前，首先需要进行性能分析。目前主流的性能分析工具，大多会提供浏览器插件以及在线分析等几种方式。下面介绍几个代表性的工具。

YSlow

YSlow是Yahoo发布的一款基于FireFox的插件，这个插件可以分析网站的页面，并告诉你为了提高网站性能，如何基于某些规则而进行优化。

PageSpeed

page speed是开源 Firefox、Firebug 插件，网站管理员和网络开发人员可以使用来评估他们网页的性能，并获得有关如何改进性能的建议。

WebPagetest

WebpageTest 可以让你在真实的设备上测试网站的性能，比如在 iPad、iPhone、Galaxy S7 甚至是 Moto G4 等低配置设备上进行测试，还可以设置各种网络连接速度，从光纤到蜂窝网络。
Web性能分析工具WebpageTest详解

四、HTTP协议头缓存实战

提供更好的用户体验一直是Web开发者追求的目标。一个引用大量静态资源的Web页面, 资源的加载速度是影响页面加载耗时的最大因素。很多固定静态资源,如图片、脚本、样式文件 等若都可以通过缓存保存在客户端,不必每次都从服务器请求,将节省大量请求时间。那么,客 户端和服务端通过怎样的方式,才能确定客户端知道是否需要使用缓存文件。本节将会介绍HTTF 缓存的具体细节。

4.1、客户端缓存流程

彻底理解浏览器缓存机制

4.2、缓存协议内容

缓存协议内容 HTTP头中关于缓存相关的属性,主要有以下几种
(1)、Expires:指定缓存过期的时间,是一个绝对时间,但受客户端和服务端时钟和时及差异 的影响。
(2)、Cache-Control: H Expires 策略更详细,优先级比 Expires 高,其值可以是以下五种情况。

• no-cache:告诉客户端不使用缓存
• no-store:告诉客户端不要缓存响应。
• public:缓存响应,并可以在多用户间共享。
• private:缓存响应,但不能在用户间共享。
• max-age:缓存在指定时间(单位为秒)后过期。

(3)、Last-Modified/If-Modified-Since:指定响应资源的最后修改时间。如果响应头中包含 Last-Modified,再次请求时通过IF-Modified-Since将最后修改时间告诉服务端,服务端判断文件是 否有过修改,再决定返回新内容还是通过HTTP状态码304告诉客户端使用缓存。
(4)、 ETag/lf-None-Match: 区别资源内容的唯一标识,需要配合 Cache-Control 使用小题 最后修改时间发生变化,但文件内容并无改变时,也应该使用缓存。如果响应头中包含ETag,再 次请求时通过If-None-Match将内容标识告诉服务端,服务端比较内容是否有改变后,再决定返回 新内容还是通过HTTP状态码304告诉客户端使用缓存。