浏览器渲染步骤

  1. HTML解析出DOM Tree

  2. Css解析出Style rules

  3. 两者关联生成Render Tree

  4. Layout（布局）：根据Render Tree 计算每个节点的信息

  5. Painting：根据计算好的信息进行渲染整个页面

  6. 注意：

    浏览器解析文档的过程中，如果遇到 script 标签，会立即解析脚本，停止解析文档（因为 JS 可能会改变 DOM 和 CSS,如果继续解析会造成浪费）。 如果是外部 script, 会等待脚本下载完成之后在继续解析文档。现在 script 标签增加了 defer 和 async 属性，脚本解析会将脚本中改变 DOM 和 css 的地方解析出来，追加到 DOM Tree 和 Style Rules 上。


    浏览器解析过程图.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容