从输入url 到页面呈现都经历了什么? 以及Chrome DOM 重绘

从输入url 到页面呈现完成到底都经历了什么?

分为DNS解析  >  TCP连接  >  HTTP请求与响应  > 客户端浏览器解析渲染  > 连接结束。其中浏览器解析渲染包含HTML词法、语法的解析、CSS解析、DOM树生成、渲染树建立、屏幕绘制。

关于Chrome DOM 重绘

旧版 Chrome 准备在屏幕上绘制像素时，它必须首先确定页面上的哪些元素需要重绘，哪些可以从上一帧的缓存中复制。在具有频繁 DOM 更改的动态页面上，会导致严重的性能问题。

新版Chrome 怎么改进的呢？Chrome 为每个元素生成绘制命令，通过跟踪分析这些绘制命令，以此来识别视觉上不重叠的子集。如果未修改其中一个子集，则可以直接从缓存中复制整个块，而无需进行任何其他工作。这就显著了提升了 DOM 改变后的重绘性能。