页面渲染

浏览器输入一个url发生了什么

从输入url敲击回车键到页面渲染出来，大致可以分为3大阶段：

1. 浏览器请求发送前

强缓存检查 => DNS解析 => TCP连接 => TLS连接

1. 服务器处理数据

协议缓存 => 业务逻辑计算 => 响应结果

1. 浏览器渲染页面

HTML解析成DOM树 => CSS解析成CSSOM树 => 合成Render树 => 布局 => 绘制

页面渲染流程

为什么要减少重排？

重排因为要重新计算Render Tree，而且每一个DOM Tree都有一个reflow方法，一旦某个节点发生重排，就有可能导致子元素和父元素甚至是同级其他元素的reflow，浪费大量的时间重新验证Render Tree。

参考：

• https://developer.mozilla.org/zh-CN/docs/Web/Performance/How_browsers_work

• https://developer.mozilla.org/zh-CN/docs/Web/Performance/Critical_rendering_path