浏览器解析 HTML 文件

Tue, 05 Nov 2024 00:00:00 +0800

1. 什么是浏览器解析和渲染HTML

一句话概括：将html代码转换成页面上显示的内容。

表1：形象展示将HTML转换成页面上显示的内容

2. 浏览器解析和渲染HTML过程？

那么浏览器拿到HTML代码后是如何把其转换成页面上显示的内容的？

2.1 宏观描述执行过程

2.1.1 解析和渲染

首先我们来看两个概念，解析和渲染，确切来说是DOM解析和DOM渲染。

DOM解析： 生成DOM tree的过程。就是把你所写的各种html标签，生成一个DOM tree，可以认为就是生成了一个最原始的页面，一点样式都没有，毫无CSS修饰。

DOM渲染： 将DOM tree与css样式结合，生成Render tree，并将其呈现在浏览器页面上。浏览器会把本身默认的样式+用户自己写得样式整合到一起，形成一个CSS tree，而DOM渲染就是指DOM tree 和CSS tree 结合到一起，生成一个Render tree，呈现出一个带有样式的页面。

这里需要注意，DOM解析和DOM渲染由两个不同的线程来完成的，简单说就是二者可以并行进行。

DOM解析通常是由浏览器的主线程来完成的。DOM渲染是由浏览器的渲染线程来完成的。

分离解析和渲染的这种设计使得浏览器能够在解析 HTML 文档的同时将页面渲染到屏幕上，这样用户就能够更快地看到完整的页面了。

2.1.2 宏观描述执行过程

补充了解析和渲染的概念，我们来看看浏览器具体是如何把其转换成页面上显示的内容的。其过程大致分为下图的四步。

图1：浏览器解析和渲染HTML的过程

第一步：将载入的HTML文件解析成DOM树（DOM tree），并且将各个标记标识解析成DOM树的各个节点；在解析HTML的同时会将CSS样式解析成CSS规则（CSS rules）。

第二步：将解析成的DOM树和CSS规则进行关联生成渲染树（Render tree）。

第三步：进入布局阶段，为DOM树的每个节点分配在屏幕上出现的确切坐标（这一阶段还是渲染树）

第四步：进入绘制阶段，在这里渲染引擎的工作就结束了，接下来就给用户界面后端（UI Backend）对渲染树的每个节点进行绘制，呈现出页面效果。

2.2 细化执行过程

2.2.1 顺序执行

dom解析过程是从上向下，顺序执行的。顺序执行的意思是一行一行的执行，上一行执行完再执行下一行。

<h1>1<h1>
<h1>2<h1>
<h1>3<h1>
<script></script>
<style></style>
<!-- 先1，再2，再3，按顺序解析。 -->

2.2.2 渐进式

浏览器是渐进式渲染，即边解析边渲染。通俗的说就是，这一行代码解析完，就可以在浏览器的页面渲染展示出来。因为浏览器的解析和渲染由两个不同线程来完成，所以可以实现边解析边渲染。

<h1>1</h1>
<script>debugger</script>
<h1>2</h1>
<script>debugger</script>
<h1>3</h1>
<!-- 先解析渲染出1，再debugger;再解析渲染出2，再debugger;最后解析渲染出3 -->

2.3 问题：css、js会阻塞解析和渲染吗？

这部分内容可参考这篇掘金内容，内含测试代码：关于 JS 与 CSS 是否阻塞 DOM 的渲染和解析 - 掘金

浏览器解析 HTML 文件 on Last Stand