DOM的加载过程

最新推荐文章于 2024-06-17 23:49:16 发布

yzsix_

最新推荐文章于 2024-06-17 23:49:16 发布

阅读量1k

点赞数 2

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/Compromise_/article/details/126360971

版权

认识DOM

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。由W3C提出的标准，是一个使用脚本动态的访问和更新文档的内容、结构以及样式；

DOM提供了响应的API（接口），可以对文档进行增删改查，以实现js对网页元素JS对网页元素的静态（进行）控制，实现动态网页的功能。

DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

HTML文档可以说由节点构成的集合，DOM节点有:

1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。

2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性，如<a>标签的链接属性href="# "。

Dom树的加载

在对页面的获取中

第一步是要在浏览器输入url，交给DNS域名解析，找到IP向服务器发起请求（当然的话其中还存在Dns缓存，http协议、tcp连接这一些的东西...）

第二步就属于一个Dom树的解析、加载过程

当服务器返回数据，也就是说返回一个我们需要的文件，比如说html、css、js、img一些静态资源等文件，这些返回的都是一些二进制文件，首先我们拿到这个二进制文件这个二进制数据流之后我们会要通过一定的编码规则把他转成html

二进制转html

比如一个index.html，在这个html文件中有我们所写的一些内容包括一些div、p标签这些东西，以这个index为例在我们拿到这个文件后首先就是构建dom树

构建dom树：html解析器

        首先这个index.html会交给这个html解析器，在浏览器里面都会有一个html解析器，解析器会对他进行：

Token->Node->DOM这一个生成DOM树的步骤

这个步骤先会进行一个Token的解析，关于词法解析，首先他在词法解析之前会先生成一个document对象

                Token：词法解析(根是“document”对象)

                Node：生成节点，例如HTMLDivElement接口一一对应div元素

                DOM：构建DOM树，接口和标签是一一对应的

DOM树

在解析的过程中：

遇到link的外部css，遇到css的代码会进行css的加载，这个加载过程是并行的，并不会影响我们dom树的构建
不知道大家有没有注意到，在大部分编程的过程中，javascript都放在底部引入，这么做的原因就是，在构建dom的时候如果遇到script标签，则会先去执行js的内容，直至脚本完成，才会继续构建Dom，这种情况会影响到我们一个页面的渲染，导致页面白屏。

如果说我tm非要Js在头部引入，可以在script标签中加入async、defer，或者是通过window.onloa;即js文件下载玩成之后我不去执行js，而是继续构建DOM树。

Async：

解析器在遇到设置了async属性的script是，开始下载脚本并继续解析文档。脚本会在它下载完后尽快执行，但是解析器不会停下来等他下载

如果script标签设置了该属性，则浏览器会异步下载该文件并且不会影响到后面dom的渲染

Defer：

Defer脚本会在文档渲染完毕后，DOMcontentLoaded事件调用前执行，脚本会被延迟到整个页面都解析完毕后执行

如果有多个设置了defer的script标签存在，则会按照顺序执行所有的script

区别：

Async执行的js不用按照顺序执行，谁先下载完成谁先执行，而defer有一定的先后顺序，就比如ab两个js文件即便是b先加载完成也先去执行a.js再执行b.Js。

构建css树：css解析器

Token解析：css的词法及语法文法->Node->CSSOM

每个css文件解析成为样式表对象CSStyleSheet，每个对象都包含CssRule；CSSRule包含选择器和声明对象，以及其他CSS语法及语法文法

Html有解析器，同样的css也有解析器，这个两个过程是并行的，在解析过程中，比如我现在有一个index.css，这个文件下载下来之后，首先将这个样式表转化成一个对象，然后这个对象中有很多规则，就是CSSRule，这个里面就包含了比如说标签选择器、类选择器一些我在选择器中定义得到一些语法规则等等

CSS树

渲染树

Render树：渲染树=DOM树+CSS树

渲染树说白了就是DOM树和CSS树的结合，在结合过程中，把每一个css树上的规则部署到对象上面去，然后开始在页面上计算布局，就是在浏览器上开始绘制

布局layout与绘制paint：

计算对象之间的大小、距离确定每个节点在页面上的具体坐标；映射浏览器屏幕绘制；使用UI后端绘制每个节点

就比如说一个div 大小是多少，你的边距是多少，你的maing等等确定你的各各标签在浏览器上的一个具体位置，这就是布局，布局玩之后呢就要将所有的标签映射到屏幕上进行绘制

在布局和绘制中有两个概念：回流、重绘

Reflow（回流）：当元素属性发生改变并影响布局时（宽度、高度、内外边距等），产生回流，相当于刷新页面，牵一发而动全身

Repaint（重绘）：当元素属性发生改变但不影响布局是（背景颜色、透明度、字体样式等，产生重绘，相当于不刷新页面，动态更新内容

重绘不一定引起回流回流一定引起重绘