浏览器： 3 篇

这个问题是一个老生常谈，但非常考验知识的广度和深度的问题，我在这总结一下笔记。

流程​

先上一张 chrome 浏览器渲染流程图，可以在 performance 面板查看

分为以下几个步骤：

1. parse HTML：解析 HTML 文本构建 DOM Tree
2. Recalc Styles：样式计算，计算出每个 DOM 节点的样式
3. Layout：计算可见元素几何信息 （位置、尺寸） 生成布局树（Layout Tree），也就是我们常说的重排 reflow
4. update layer tree：对节点进行分层，建立图层树（Layer Tree）
5. paint：为每个图层生成绘制列表，并提交到合成线程，合成线程将图层分图块，并栅格化将图块转换成位图
6. Composite Layers：在每个层上完成绘制过程之后，浏览器会将所有层按照合理的顺序合并成一个图层，然后显示在屏幕上

缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。

对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。