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

避免页面卡顿

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

1. 失帧和帧率FPS

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

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

2. 页面渲染流程

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

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

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

3. 掉帧分析

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

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

4. 拆分代码段

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

5. 减少layout

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

6. 简化DOM结构

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

加快页面打开速度

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

减少渲染堵塞

1. 避免head标签JS堵塞

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

   有两种解决办法：

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

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

2. 减少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。

优化图片

1. 使用响应式图片

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

   DPR=1，加载1倍图；DPR=2，加载2倍图；

2. 延迟加载图片

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

压缩和缓存

1. gzip压缩

2. Cache-Control

3. 使用etag

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

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

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

升级到HTTP/2

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

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

其他优化方案

1. DNS预读取

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

2. HTML优化

   例如把注释remove掉，把行前缩进删掉

3. 代码优化

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

增强用户体验

加Loading效果

加过渡动画效果

单击和输入

1. 用户单击按钮提交的时候，可以给按钮做一个效果
2. 使用HTML5的input
3. 自动补全，根据当前输入框的特点自动补全

记住用户使用习惯

1. 记住位置

2. 记住用户的输入信息

   哪些需要被记住，哪些不需要被记住可能根据不同的使用场景，如果记住了一些不必要的信息可能会适得其反。

避免页面抖动

总结

总之呢，页面优化都是一点一点细节的优化，增加用户的体验，也就是提高我们的收益最大化。