浏览器是怎么工作的？

输入 URL 回车，浏览器做一些检测和处理，解析出域名、协议

通过网卡和 DNS 设置向 DNS 服务器进行 DNS 查询，找到 Web 服务器 IP；

通过 TCP 三次握手建立连接，之后进行 TLS 协商或者直接传输数据；

Web 服务器接收数据进行处理返回数据，浏览器接收后进行解压（gzip等）。

浏览器在加载完 HTML 文档后进行解析，遇到 <script> <link rel=sheetstyle> 时会阻塞文档解析以进行资源的加载，解析，执行。浏览器一般会通过预解析和预扫描来预先加载后序的脚本、层叠样式表和图片，最终稳定被解析成 DOM，样式被解析成 CSSOM ，然后进行渲染（一般包括布局，合成，绘制，但 WebRender 已经变化）。简单流程：

1. HTML 解析成 DOM
2. CSS 解析 CSSOM（CSS Object Model）
3. 结合 DOM 和 CSSOM，生成一棵渲染树（包含每个节点的视觉信息）
4. 生成布局（Layout），即将所有渲染树的所有节点进行平面合成
5. 将布局绘制（Paint）在屏幕上

JS的加载和解析阻塞页面解析（因为js可以操作dom，除非 <script> 有 asyn/defer/module 属性），直到js加载、解析、执行完毕才继续解析DOM。// 浏览器遇到 <script> 标签时，会触发页面渲染

页面文档完全加载并解析完毕之后,会触发 DOMContentLoaded 事件，HTML文档不会等待样式文件, 图片文件, 子框架页面的加载(load事件可以用来检测HTML页面是否完全加载完毕(fully-loaded))。

// 如果样式后面有脚本，则会等待样式

https://zh.javascript.info/onload-ondomcontentloaded

performance.timing 返回的 PerformanceTiming 对象能很好的描述工作情况

link script style 元素可以设置成阻塞渲染 Embed GitHub