浏览器解析网页的过程

时间：2024-02-17 13:14:05

DOM树

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点（共12个Node类），主要节点例举如下：

  • 整个文档是一个文档节点，
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点

html文档解析生成解析树即dom树，是由dom元素及属性节点组成，树的根是document对象

CCSOM树

DOM和CSSOM是相互独立的结构。CSSOM是一个建立在web页面上的 CSS 样式的映射，它和DOM类似，但是只针对CSS而不是HTML。CSSOM将样式表中的规则映射到页面对应的元素上。

HTML解析顺序：

不同浏览器细节会有不同，总体而言：

  • 根据html代码自上而下进行构建
  • download、parseHTML/parseCSS/executeJS、layout、paint都在不同线程中。
    parseHTML/parseCSS并行，共同完成后才会layout生成渲染树，进而paint渲染。执行JS会重新回到layout阶段。

  • 遇到script文件加载／执行会阻塞后面dom树的构建（javascript可能会改变dom树）

    改进：针对上文说的脚本阻塞文档解析，主流浏览器如Chrome和FireFox等都有一些优化，比如在执行脚本时，开启另一个线程解析剩余的文档以找出并加载其他的待下载外部资源（不改变主线程的DOM树，仅优化加载外部资源）。

  • 遇到css文件则会阻塞渲染树的构建，即dom树依然继续构建（因为并行，且不影响dom的结构）

  • JavaScript下载后可以通过DOM API修改DOM，通过CSSOM API可以修改样式作用域Render Tree。每次修改会造成Render Tree的重新布局和重绘。

浏览器解析网页的过程

浏览器通过http协议收到服务器发来的http response之后，需要对收到的http response中实体部分的HTML文本进行处理，也即解析，具体过程如下：

  • 解析页面标签生成DOM树
    • 生成DOM树的过程：
      字节 -> 字符 -> 标签 -> 节点 -> DOM树
      Bytes → characters → tokens → nodes → object model
    • 生成DOM树的规则

    这里写图片描述
  • 解析页面生成CCSOM
    • 生成CCSOM树的过程：
      字节 -> 字符 -> 标签 -> 节点 -> CCSOM树
    • 生成CSSOM树的规则
      • 所有的CSS都是阻塞渲染的（CSSOM是展示任何东西的必需品，在CSS没处理好之前所有东西都不会展示）
      • CSSOM 在加载一个新页面时必须重新构建（意味着即使你的CSS文件被缓存了，也并不意味着这个已经构建好了的CSSOM可以应用到每一个页面）

      这里写图片描述
  • 渲染：Web浏览器将DOM和CSSOM结合，并构建出渲染树（render tree）
    渲染树是DOM树的可视化标识，构建这棵树是为了以正确的顺序绘制文档内容。
    渲染最大的一个困难就是为每一个dom节点计算符合他的最终样式。
  • 展示Web页面

整体构建过程参考图

Webkit渲染引擎流程如下图：
这里写图片描述
Gecko渲染引擎流程如下图：
这里写图片描述
如上图，Webkit浏览器和Gecko浏览器渲染流程大致相同,不同的是：

1.Webkit浏览器中的渲染树(render tree)，在Gecko浏览器中对应的则是框架树（frame tree）,渲染对象(render object)对应的是框架（frame）;
2.Webkit中的布局（Layout）过程，在Gecko中称为回流（Reflow）,本质是一样的，后文会解释回流的另一层含义–重新布局；
3.Gecko中HTML和DOM树中间多了一层内容池（Content sink）,可以理解成生成DOM元素的工厂。

参考文献

https://www.jianshu.com/p/e141d1543143 浏览器~加载，解析，渲染
https://www.zhihu.com/question/20117417/answer/21149244 在前端开发中，页面渲染指什么？
https://www.zhihu.com/question/30218438 浏览器加载页面时的过程是什么
https://zhuanlan.zhihu.com/p/23569241 DOM CCSOM
https://juejin.im/entry/58a6957d128fe10064768930 什么是CCSOM
http://www.cnblogs.com/yuezk/archive/2013/01/11/2855698.html HTML页面渲染过程（有例子）
http://blog.codingplayboy.com/2017/03/29/webpage_render/#parser_HTML 浅析前端页面渲染机制
https://www.zhihu.com/question/59024365 html,css,js的下载 & 执行顺序是什么?

相关文章