浏览器渲染页面过程

Hillbox

已于 2022-08-30 04:05:04 修改

阅读量116

点赞数

文章标签：前端 javascript html

于 2022-08-26 03:08:44 首次发布

本文链接：https://blog.csdn.net/qq_33514421/article/details/126535550

版权

浏览器专题系列 - 渲染原理与阻塞渲染

过程

1、将HTML文档解析成文档对象模型DOM。

2、将CSS文件解析成层叠样式表对象模型CSSOM。

3、在DOM和CSSOM之上，创建渲染树。

4、渲染树布局

5、渲染树绘制

回流 Reflow

改变布局。

重绘 Repaint

不改变布局。

CSS阻塞渲染

1、link在头部

<head>
  <link rel="stylesheet" href="https://www.youtube.com/s/player/4a1799bd/www-player-webp.css">
</head>

黑屏，直到CSS加载出来。

2、link在中间

<body>
  <h1>AAA</h1>
  <link rel="stylesheet" href="https://www.youtube.com/s/player/4a1799bd/www-player-webp.css">
  <h2>BBB</h2>
</body>

不会黑屏，会把前面的DOM先加载出来。

总结，CSS不阻塞DOM解析，会阻塞DOM渲染。

1、CSS在头部不会阻塞HTML解析，会阻塞渲染。因为HTML的解析和CSS的解析互不影响，但渲染树需要HTML和CSS一起，故而阻塞渲染。

2、CSS在body会阻塞HTML解析和渲染（很少这样做），因为HTML会把<link>当成DOM元素解析，故而阻塞后面的解析和渲染。

3、CSS会阻塞JS的执行，故而JS要放在CSS前面。

JavaScript阻塞渲染

1、内联（在<script>标签中写js代码）

<head>
  <script>
    let d = Date.now()
    while (Date.now() < d + 1000 * 5) { }
  </script>
</head>

黑屏，直到内联JS执行完。

<body>
  <h1>AAA</h1>
  <script>
      let d = Date.now()
      while (Date.now() < d + 1000 * 5) { }
  </script>
  <h2>BBB</h2>
</body>

黑屏，直到内联JS执行完。

2、外联（在<script>添加src引入外部文件，文件内容和上面一样）

<head>
  <script src="test.js"></script>
</head>

黑屏，直到外联JS执行完。

<body>
  <h1>AAA</h1>
  <script src="test.js"></script>
  <h2>BBB</h2>
</body>

不会黑屏，先加载出外联JS前面的DOM元素。

总结，JS会阻塞DOM的解析和渲染。