概述
三言两语简单描述一些web卡顿表现和处理。后续再慢慢修改，对一些点展开讲。
卡顿主要表现
- 丢帧
- 响应时间慢
丢帧
当后台处理帧的速度跟不上刷新频率时，就出现丢帧现象，当浏览器主线程被复杂逻辑占用时(比如事件相应后有复杂逻辑，比如RAF里有复杂逻辑等)，导致渲染进程不能及时渲染下一帧。
响应时间慢
用户操作后没能及时响应，需要等待。这种情况一般是主线程被长耗时逻辑占用，比如前面的操作处理耗时长，或者需要重渲染的内容很多等。
浏览器处理流程
- Input event handlers，用户交互事件处理。
- requestAnimationFrame，浏览器提供的钩子，渲染前可执行的操作。
- Parse HTML，解析编译html内容，翻译成Dom。
- Recalc Style，解析css样式，计算每个dom节点样式，并把结果挂到ComputedStyle。
- Layout，计算每个元素的布局并生成layout tree，不可见的元素会忽略，比如head和display=none。
- Update Layer Tree，把相同z空间坐标归并到相同Paint Layer，保证页面元素合成顺序，每个节点最终都会从属于某个层。
- Paint，完成绘制和栅格化，没有GPU就用CPU做软件栅格化。
- Composite，将图像信息提交合成层，合成现成生成图块，会借助GPU进行处理。
- GPU光栅化，对图块纹理进行栅格化处理。
- 所有图层被栅格化后，由合成现成打包发送GPU。
- GPU处理后存放到双缓存buffer中。
优化手段
了解大致流程后，一些策略可以降低性能损耗：
- 排查长耗时逻辑，比如交互事件触发后导致的长耗时逻辑，避免长时间阻塞渲染流程。
- 小心对某些父节点的类或样式的直接修改，影响了大量子孙节点的样式，导致大量样式重计算。
- 在raf添加逻辑要谨慎，避免阻塞渲染。
- 动画脱离文档流，减少对其他元素影响，减少回流。
- 访问offsetXXX属性会导致重绘和回流。
这些点应该不够全，但了解渲染流程后，一些问题更容易被发现。
