避免页面卡顿
怎么衡量页面卡顿的情况呢？
-
失帧和帧率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，别滥用闭包，闭包会加深作用域链，加长变量查找的时间。
增强用户体验
加Loading效果
加过渡动画效果
单击和输入
- 用户单击按钮提交的时候，可以给按钮做一个效果
- 使用HTML5的input
- 自动补全，根据当前输入框的特点自动补全
记住用户使用习惯
-
记住位置
-
记住用户的输入信息
哪些需要被记住，哪些不需要被记住可能根据不同的使用场景，如果记住了一些不必要的信息可能会适得其反。
避免页面抖动
总结
总之呢，页面优化都是一点一点细节的优化，增加用户的体验，也就是提高我们的收益最大化。