从输入url 到页面呈现完成到底都经历了什么?
分为DNS解析 > TCP连接 > HTTP请求与响应 > 客户端浏览器解析渲染 > 连接结束。其中浏览器解析渲染包含HTML词法、语法的解析、CSS解析、DOM树生成、渲染树建立、屏幕绘制。
关于Chrome DOM 重绘
旧版 Chrome 准备在屏幕上绘制像素时,它必须首先确定页面上的哪些元素需要重绘,哪些可以从上一帧的缓存中复制。在具有频繁 DOM 更改的动态页面上,会导致严重的性能问题。
新版Chrome 怎么改进的呢?Chrome 为每个元素生成绘制命令,通过跟踪分析这些绘制命令,以此来识别视觉上不重叠的子集。如果未修改其中一个子集,则可以直接从缓存中复制整个块,而无需进行任何其他工作。这就显著了提升了 DOM 改变后的重绘性能。