JS中DOM的解析和渲染
大家好，我是康仔，今天给大家带来的是JS中DOM的解析和渲染，内容如下：
该文章主要是用来记录个人学习笔记，希望对大家有所帮助。
-
DOM解析
-
介绍
将HTML或XML文档中的标记（标签、属性、值等）转化成一个逻辑树型结构的过程。在解析过程中，浏览器会将HTML或XML文档中的标记转换成一组可供JavaScript操作的对象，并将它们组织成一颗树形结构，即DOM树。
DOM树由多个节点组成，每个节点都代表着文档中的一个元素、属性、文本或注释等内容。DOM节点可以有父节点和子节点，从而形成了一种层次结构，方便开发者通过JavaScript对文档进行操作 。
-
解析流程
- 浏览器读取HTML或XML文档，并将其转换成一组词法标记。
- 浏览器根据词法标记构建出一个文档节点树，即DOM树。
- 在构建DOM树的同时，浏览器还会执行JavaScript代码，生成新的DOM节点，并将其插入到文档节点树中。
- 当DOM树构建完成之后，浏览器开始渲染页面，并将CSS样式应用到DOM节点上，从而完成页面的显示。
-
注意
DOM解析过程是非常耗时的，特别是在解析大量HTML或XML文档时，容易使页面变得缓慢。因此，在开发过程中，应该尽量减少DOM节点的数量，并尽可能减少DOM操作和查询的次数，以提高页面的性能和用户体验。
-
-
DOM渲染
-
介绍
将DOM树上的节点和属性进行布局，以形成一个可视化的文档对象模型，同时还会应用CSS样式，最终呈现出完成的网页的过程。当浏览器构建好DOM树之后，它会遍历整个DOM树并计算每个元素的位置、大小等属性，然后根据CSS样式对每个元素进行渲染，最终得到一个渲染完毕的页面。
-
渲染流程
- 浏览器在解析HTML文档时，将HTML标签转换为DOM节点，并计算每个节点的位置与大小，生成一棵DOM树。
- 根据CSS样式的规则，浏览器将样式应用到对应的DOM节点上，包括选取样式和计算样式等过程，生成一个渲染树。
- 渲染树上的每个节点都包含有关其总体布局（位置和尺寸）和细节（颜色、边框等）的信息。
- 根据渲染树的信息，浏览器开始对每个节点进行绘制，并生成一组位图，依次排列在设备的屏幕上，形成一个完整的页面。
-
渲染优化
DOM渲染是一个非常消耗资源的过程，在复杂的页面中可能会导致页面渲染较慢，影响用户的体验。主要有以下优化措施：
- 尽可能减少DOM节点的数量和层级，尽量使用文档碎片（DocumentFragment）等方式进行批量操作
- 减少CSS选择器的嵌套层数和复杂度，避免使用通配符（*）等代价较高的选择器。
- 将CSS样式放在头部，并尽量避免使用@import和内联样式等技术。
- 使用浏览器缓存并设置正确的Cache-Control头信息，以减少HTTP请求和响应的时间。
-
-
CSS堵塞问题-
介绍
CSS堵塞DOM解析和渲染是指在HTML文档中，CSS资源的加载和解析会阻塞DOM解析和渲染的过程，从而导致页面呈现缓慢或出现空白的情况 -
内容
当浏览器在解析HTML文档时遇到外部CSS文件或内嵌样式表（style标签）时，会暂停DOM解析和渲染的过程，同时发起CSS文件的请求。
CSS文件的加载和解析会比较耗时，如果CSS文件体积较大，就会导致用户需要等待一段时间才能看到渲染出来的页面 -
优化措施
- 使用内联样式。将
CSS样式直接写入HTML标签的style属性中，可以减少对外部样式表的依赖，从而缩短页面的加载时间。 - 使用媒体查询。通过指定不同设备屏幕宽度下的样式表，可以让浏览器只加载必要的
CSS，从而提高页面加载速度。 - 延迟加载
CSS文件。可以将样式表文件放到文档末尾或使用async、defer等属性来控制样式表的加载和解析顺序，从而避免CSS阻塞DOM解析和渲染。 - 使用浏览器缓存。可以通过设置HTTP响应头（例如Cache-Control、ETag等）来让浏览器缓存
CSS文件，从而减少每次请求的时间和带宽消耗。
- 使用内联样式。将
总之，为了提高页面的渲染速度和用户体验，需要合理控制CSS资源的加载和解析顺序，将其与DOM解析和渲染过程相互配合，从而达到优化页面性能的目的
-
-
JS堵塞问题-
介绍
JavaScript堵塞DOM解析和渲染是指，在HTML文档中，JavaScript代码的加载、解析和执行会阻塞DOM解析和渲染的过程，从而导致页面呈现缓慢或出现空白的情况。
-
内容
当浏览器在解析HTML文档时遇到JavaScript代码时，会暂停DOM解析和渲染的过程，同时发起JavaScript代码的请求，并开始下载、编译和解释执行JavaScript代码。如果JavaScript代码体积较大或包含复杂的逻辑，就会导致用户需要等待一段时间才能看到渲染出来的页面。
-
优化措施
- 将JavaScript代码置于页面底部。这样可以确保HTML和CSS都已经加载完毕并且DOM解析完成，从而避免JavaScript代码对DOM解析和渲染的影响。
- 使用defer属性。可以使用defer属性将JavaScript代码推迟到文档解析后执行，从而避免JavaScript代码对DOM解析和渲染的延迟影响。
- 使用async属性。可以使用async属性来异步加载JavaScript代码，从而使HTML解析不受JavaScript代码的影响。但是需要注意，使用async会使得代码的执行顺序变得不可预测，因此在依赖顺序较复杂的情况下，可能需要使用defer属性或其他方式来控制代码的执行顺序。
- 使用CDN。可以将JavaScript代码托管在CDN上，从而可以加快JavaScript代码的下载速度，减少阻塞影响。
总之，为了保证页面的渲染速度和用户体验，需要合理控制JavaScript代码的加载和执行顺序，将其与DOM解析和渲染过程相互配合，从而达到优化页面性能的目的。
看到最后，点个赞再走呗！
-
