Skip to main content

浏览器渲染过程

浏览器渲染过程图示​

                              +---------+
                              | 操作 DOM |
                              +----+----+
                                   |
                                   v          Layout Engine
HTML File ---> HTML Parser ---> DOM Tree            ^
                                   |                |
                                   v                v
                                Attachment ---> Render Tree ---> Painting ---> Display
                                   ^
                                   |
CSS Files ---> CSS Parser ---> CSS Rules


Parser: 解析器
Attachment: 附加。此处特指将 DOM 树和样式表关联起来，创建一颗 Render 树这一过程
Render Tree: 渲染树
Layout Engine: 布局引擎
Paint: 绘制
  1. 一般访问一个网站，最先请求到的是一个 index.html 文件
  2. HTML 文件由浏览器内核里的 HTML Parser 解析，将 HTML 转成 DOM Tree
  3. CSS 文件由浏览器内核里的 CSS Parser 解析
  4. DOM Tree 和 CSS Rules 结合在一起，生成了 Render Tree
  5. Layout Engine 还会对 Render Tree 进行一些具体的调整。比如根据浏览器高度、宽度、缩放尺寸等不同，具体元素的位置和大小也不一样
  6. 上面都 ok 之后，浏览器就可以绘制每一个元素了
  7. 绘制完成后就展示在浏览器上

两个问题​

  1. 在渲染执行过程中，即 HTML 解析中，遇到了 script 标签怎么办？

    停止解析 HTML，去加载和执行 script 标签里的 JavaScript 代码。 script 标签中的 async 和 defer 属性

  2. 操作 DOM 的 JavaScript 代码是由什么来解析和执行的？

    JavaScript 引擎