浏览器渲染机制 #6

xfh0192 · 2020-07-26T13:41:08Z

浏览器渲染机制

浏览器的渲染机制，简单来说：

处理 HTML 并构建 DOM 树
处理 CSS 并构建 CSSOM 树
将 DOM 与 CSSOM 树合并成一个渲染树
根据渲染树来布局，计算每个节点的位置
调用 GPU 绘制，合成图层，显示在屏幕上

注意：

由于 DOM 和 CSSOM 通常是并行构建的，所以 CSS加载不会阻塞DOM的解析
但是，Render Tree 是依赖于 DOM 树和 CSSOM 树的，因此 CSS加载会阻塞 DOM 的渲染

当页面上存在js脚本时，解析顺序会怎么变化呢？

假如有这样的一个页面，浏览器的渲染过程又是怎么样的呢？

<!DOCTYPE>
<html>
  <head>
    <meta charset="utf-8">
    <title>Document</title>
    <style rel="stylesheet" href="https://xxxxx.css">
  </head>

  <body>
    <div>hello</div>
    <script src="https://xxxx.js"></script>
  </body>
</html>

UI 渲染线程与 js 线程是互斥的

因为 js 的执行可能会修改已解析的 DOM 或 CSSOM，因此 UI 渲染线程与 js 线程是互斥的。

css 的加载是否会阻塞 js 的执行？

不会。因为最终的 CSSOM 树，将会按照css选择器的优先级计算出最后的渲染规则，css和js对于样式的设置没有时间先后的区别

Load 和 DOMContentLoaded 的区别

DOMContentLoaded

mdn定义：当纯 HTML 被完全加载以及解析时，DOMContentLoaded 事件会被触发，而不必等待样式表，图片或者子框架完成加载。

JavaScript的同步模式会导致DOM解析暂停。

说明 js 的加载和执行，将会阻塞 HTML 的解析，从而阻塞页面渲染

所以，JavaScript 的同步模式会导致 DOM 解析暂停。

Load

当 onload 事件触发时，页面上的所有 DOM，图片，css文件，脚本都加载完成了，也就是渲染完毕了

总结：

UI 渲染线程和 js 执行线程是互斥的
html 加载+解析；css加载+解析；js加载+执行
css 加载不会阻塞 html 和 js 的解析，由加载线程加载css文件
js 加载和执行，会阻塞 html 解析（当执行完js脚本后，html才会继续解析）
当html解析完成，浏览器会分发 DOMContentLoaded 事件
浏览器根据构建完成的 DOM 树和 CSSOM （样式）树，通过重绘/回流，计算出渲染树并交给 UI 线程绘制
UI 线程根据渲染树，进行分层绘制，并将各图层交给 GPU 渲染，GPU 对各层进行合成，最终渲染出来
渲染后，等页面上所有的图片等资源加载完成，浏览器分发 onload 事件

refer:

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

浏览器渲染机制 #6

浏览器渲染机制 #6

xfh0192 commented Jul 26, 2020 •

edited

Loading

浏览器渲染机制 #6

浏览器渲染机制 #6

Comments

xfh0192 commented Jul 26, 2020 • edited Loading

浏览器渲染机制

浏览器的渲染机制，简单来说：

当页面上存在js脚本时，解析顺序会怎么变化呢？

UI 渲染线程与 js 线程是互斥的

css 的加载是否会阻塞 js 的执行？

Load 和 DOMContentLoaded 的区别

xfh0192 commented Jul 26, 2020 •

edited

Loading