浏览器是如何渲染页面的呢 DOM

今天药忘吃喽~ 2023-06-28 09:52 7阅读 0赞

# 文字解析： #

**输入的网址在通过DNS解析后得到服务器地址  
浏览器向服务器发起http请求，经过TCP/IP三次握手确认链接后，服务器将需要的代码发回给浏览器。浏览器接收到代码后进行解析，  
经过三大步骤：DOM构造、布局以及绘制页面，最终展现为人人都能看懂的网页。**

## 实际上所谓的渲染页面，就是返回一堆 html，你觉得 html 和 DOM 有区别么？ ##

浏览器解析 html 代码并抽象成一个树结构的文档对象，以方便 js 操作，这个文档对象这就是 dom。

# 第一步，DOM构造 #

• 浏览器首先将收到的html代码，通过html解析器解析构建为一颗DOM树。  
• 接着将接收到的css代码，通过css解析器，将CSS代码构建出样式表规则  
• 将这些规则分别放到对应的DOM树节点上，得到一颗带有样式属性的DOM树。

# 第二步，布局 #

• 浏览器按从上到下，从左到右的顺序，读取DOM树的文档节点，顺序存放到一条虚拟的传送带上。传送带上的盒子就是节点，而这条流动的传送带就是文档流。  
**补充**：如果我们读取到的节点是属于另一个节点下的子节点，那么在放入传送带的时候，就应该按顺序放到该节点盒子的内部。如果子节点下还有子节点，在传送带上的时候就继续套到子一级的盒子内部。根据它在DOM树上的结构，可以嵌套的层级没有限制的哦。  
• 文档流排完之后，开始获取计算节点的坐标和大小等CSS属性，作为盒子的包装说明。然后把盒子在仓库里一一摆放，这就将节点布局到了页面。

# 第三步，绘制 #

• 页面布局完成之后，我们在页面上其实是看不到任何内容的浏览器。  
• 只是计算出了每一个节点对象应该被放到页面的哪个位置上，但并没有可视化。  
• 因此最后一步就是将所有内容绘制出来，完成整个页面的渲染。

# 举个栗子 #

浏览器获得一些代码，它们最终会渲染成这样。  
• 第一步是将代码解析为一颗DOM树  
• 第二步是按从上到下，从左到右的顺序，将树上的节点压入文档流然后布局

• 从body节点开始然后是body节点下的input节点，label节点，一个接一个的被压入文档流。布局的时候因为是行内元素无法占满一行，会在同一行里挨个排列。如果调整页面宽度会让它变窄，行内元素会因为一行放不下而换行。最后将它们渲染就完成了这个页面

# 补充 #

• body下的子元素有三个nav，aside和div它们作为3个打包黑盒看起来是这样的然后将它们的子元素分别放到各自的黑盒当中，如果遇到图片只需要把它当做设置了宽高的普通行内元素处理就好了，当然你也可以设置它的属性为块级元素，改变图文混排时布局的效果。

• 由此我们可以知道文档流与网页之间的关系，其实就是将一维节点映射到二维空间的关系。