项目页面优化，我们该怎么做呢？

避免页面卡顿

怎么衡量页面卡顿的情况呢？

失帧和帧率FPS

60Hz就是帧率fps，即一秒钟60帧，换句话说，一秒钟的动画是由60幅静态图片连在一起形成的。

卡了，失帧了，或者掉帧了，一秒钟没有60个画面，看起来不连贯了。这可能是因为在渲染某些帧所花的时间比较长，导致停留在这些帧的时间比较长，所以画面停顿了。
页面渲染流程

60fps就要求1帧的时间为1s/60=16.67ms。浏览器显示页面的时候，要处理JS逻辑，还要做渲染，每个执行片段不能超过16.67ms。实际上，浏览器内核自身支撑体系运行也需要消耗一些时间，所以留给我们的差不多只有10ms。

渲染流程：JavaScrip->Style->Layout->Paint->Composite

首先用JS做了些逻辑，还触发了样式变化，Style把应用的样式规则计算好之后，把影响到的页面元素进行重新布局（叫作Layout），再把它画到内存的一个画布里面，paint成了像素，最后把这个画布刷新到屏幕上去，叫作Composite，形成一帧。
掉帧分析

一般最长的开销是JS脚本，并且可能JS里面做了很多DOM操作或者改了很多CSS，导致Rendering的时间也很长。

所以可观察这些JS执行的具体开销，包括调用的函数栈及每个函数的执行时间。
拆分代码段

把代码拆分成一个个单元，每个单元就是一个task任务，每一帧之前去取一个task执行，并且控制每个task的执行时间都在10ms以内。
减少layout

由于layout是比较耗时的操作，所以要尽量减少页面重绘。例如：能用transform就不要使用position/width/height做动画，另外要减少layout的影响范围。
简化DOM结构

当DOM结构越复杂时，需要重绘的元素也就越多。所以DOM应该保持简单，特别是那些需要做动画的，或者要监听scroll/mousemove事件的。另外使用flex比使用float在重绘方面会有优势，flex需要重绘的元素会比float少，使用flex布局做动画会更加流畅。

加快页面打开速度

页面的打开速度对网站的优化有极大的意义，那么，如何评价一个页面打开得快不快，可以用两个指标描述，一个是ready的时间，另一个是load的时间。

减少渲染堵塞

避免head标签JS堵塞

所有放在head标签里的CSS和JS都会堵塞渲染。如果这些CSS和JS需要加载解析很久的话，那么页面就空白了。

有两种解决办法：

**第一种：**把script放到body后面，这也是很多网站采取的方法：

**第二种：**给script加defer的属性，defer是HTML5新增的属性。一旦script是defer延迟的，那么这个script将会异步加载，但不会马上执行，会在ready state change变为Interactive后按顺序依次执行。
减少head标签里的CSS资源

由于CSS必须要放在head标签里面，因为如果放在body里面，一旦加载好之后，又会对layout好的DOM进行重绘，样式可能会发生闪烁。

1）不要放太多base64放在CSS里面

放太多base64放在CSS里面，会导致CSS极速膨胀，把一张3k的图片转成base64，体积将变成4k。

2）把CSS写成内联的

这样虽然对缓存不利，但是对于首次加载是有很大的作用的。

如果把CSS放到CDN上，为了得到这个CSS，它首先需要进行域名解析，然后建立http/https连接，其次才是下载。为了加载这个资源，DNS查找花掉了0.5s，建立TCP连接花掉了0.95s，建立https连接花掉了0.6s，从发送请求到收到第一个字节的数据又花掉了1.27s，总的时间接近3s。

优化图片

使用响应式图片

响应式图片的优点是浏览器能够根据屏幕大小、设备像素比DPR、横竖屏自动加载合适的图片。

DPR=1，加载1倍图；DPR=2，加载2倍图；
延迟加载图片

图片往往是占据最多流量和带宽的资源。如果一口气全部放出来，那么页面的loaded时间将会较长，并且由于并行加载资源数是有限的，图片太多会导致放在body后面的JS解析比较慢，页面将长时间处于不可交互状态。

压缩和缓存

gzip压缩
Cache-Control
使用etag

所谓etag就是对文件做的一个校验和，第一次访问的时候，响应头里面返回这个文件的etag，浏览器第二次访问的时候把etag带上，Nginx根据这个etag和新渲染的文件计算出的etag进行比较，如果相等则返回304。

如果网站的信息特别重要，连很小的概率如百万分之一都不允许文件大小相等，那么就不要使用etag了。

使用etag的代价是增加了服务器的计算负担，特别是当文件比较大时。

升级到HTTP/2

HTTP/2的优点在于对于一个域只建立一次TCP连接，使用多路复用，传输多个资源，这样就不用使用诸如雪碧图、合并JS/CSS文件等技术减少请求数。

还能进行报文头压缩，使用二进制传输和Server Push提前把资源推送给浏览器，不用等HTML解析了才能触发加载。

其他优化方案

DNS预读取

一个网站很可能要加载7、8个域的资源，第一次打开时，要做7/8次的DNS查找，这个时间是非常可观的。方法是在head标签里面写上几个link标签，对以上几个网站提前解析DNS，由于它使并行的，不会堵塞页面渲染。
HTML优化

例如把注释remove掉，把行前缩进删掉
代码优化

例如HTML别嵌套太多层，否则加重页面layout的压力，CSS的选择器别写太复杂，不然匹配的计算量会比较大，对JS，别滥用闭包，闭包会加深作用域链，加长变量查找的时间。