DOM树、css树、渲染树，解析与加载、回流与重绘

最新推荐文章于 2024-05-12 10:02:44 发布
最新推荐文章于 2024-05-12 10:02:44 发布
阅读量204 收藏
点赞数
分类专栏： DOM 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44683351/article/details/132000948
版权
本文详细介绍了网页渲染过程，包括DOM树和CSS树的构建，解析与加载的异步执行，渲染树的形成以及回流与重绘的概念和触发因素。此外，还探讨了浏览器的队列策略以优化性能，并提供了一系列减少回流和重绘次数的技巧，如CSSText、文档碎片和避免使用table布局。
摘要由CSDN通过智能技术生成

从渲染机制分为：解析、加载

解析

domTree -> DOM树构建（深度优先解析）-> 元素节点的解析 -> 把HTML解构变成一个树形结构。

样式和DOM树的解析没有关系，apeendChild依然会解析到DOM树上。

cssTree CSS树（样式结构体）（深度优先解析）

1. 构建css树时，不会在机制上结合html，它只会去查看html结构当中样式和元素的对应关系，然后通过兄弟、父子构建cssTree

2. 浏览器引擎不会直接把css和html结合在一起，它只会去查看样式关系形成css树

3. 构建cssTree时会自动忽略浏览器不能识别的样式，例如书写的css兼容性

加载

解析的过程伴随着加载的开始，解析和加载异步完成

加载在当前节点解析完成之后 -> 解析完毕并不说明页面加载完毕

渲染树 renderTree

domTree构建完毕，cssTree构建完毕，domTree + cssTree 结合形成了renderTree，renderTree以后再开始渲染页面

在形成渲染树的时候，有display:none的对应节点已经被剔除出去了，所以页面上看不到display:none的元素空间，还有head之类不

最低0.47元/天 解锁文章
js鲨鱼辣椒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
CSS-Tree的原理与实现
cclaibryan的专栏
05-20 4189
最近在捣腾OpenCL实现两个数据库表的连接操作。参考的论文里面讲到，在实现INLJ（带索引的嵌套循环连接）以及SMJ（排序合并连接）上作者使用了CSS-Trees进行优化。之前对这方面不怎么了解，所以花了一个晚上的时间找到了他们参照的讲述CSS树的论文，自己稍微研究了一下，有些心得与收获。希望能借此记录下来，供自己以后翻看。
Dom树 CSS树 渲染树
Hello_yhr的博客
10-07 259
1.构建dom 树 2.构建css 树 3.构建渲染树 4.节点布局 5.页面渲染 HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM 将 HTML 文档表达为树结构。 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对 HTML 文档的标准模型 DOM 节点 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点： 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内
Dom树 CSS树 渲染树(render树) 规则、原理
热门推荐
weixin_45820444的博客
10-11 1万+
  前端不可不学的浏览器渲染机制，阿里年年问，去一个栽一个。听说百度也在考这个，你还不准备学吗？ 首先你要了解浏览器渲染的顺序：   1.构建dom 树   2.构建css 树   3.构建渲染树   4.节点布局   5.页面渲染 什么是dom 树？   浏览器将HTML解析成树形的数据结构，简称DOM。   DOM 是文档对象模型 (Document Object Model) 的缩写。它是 HTML 文档的对象表示，同时也是外部内容（例如 JavaScript）与 HTML 元素之间的接口。 解析树
探索高效CSS处理的利器：CSSTree
最新发布
gitblog_00039的博客
05-12 249
探索高效CSS处理的利器：CSSTree csstreeA tool set for CSS including fast detailed parser, walker, generator and lexer based on W3C specs and browser implementations项目地址:https://gitcode.com/gh_mirrors/cs/csstree...
CSS——如何在vscode中快乐的使用css tree 插件
qq_43201350的博客
02-16 2904
css tree 插件作用：将选定的HTML/JSX 转化为 scss, less or css 代码片段 1、打开vscode——点击左侧扩展——搜索 css tree——安装 2、选中所有div代码块，ctrl + shift + p, 弹出一个框，选中 Generate CSS tree,即可生成 scss, less or css 代码片段了 演示如下： ......
css实现树形结构
xuanyuyao的博客
09-02 706
【代码】css实现树形结构。
css重绘与重排的方法
09-27
CSS重绘与重排是浏览器在处理页面渲染时的两个关键过程，它们直接影响着网页的性能表现。了解并掌握这两个概念对于优化网页加载速度和用户体验至关重要。 首先，我们来看一下**重绘**。重绘是指当一个元素的外观...
浏览器加载、渲染和解析过程黑箱简析
09-05
- **合并DOM与CSSOM**：DOM和CSSOM结合形成渲染树（Render Tree），这一步骤中，每个DOM节点会结合其相关的CSS规则来确定其视觉表现。 3. **渲染过程**： - **布局**：基于渲染树，浏览器会计算每个元素的几何...
详解css加载会造成阻塞吗
09-24
这种机制体现了浏览器在性能优化方面的策略，即尽可能地先解析和构建DOM树，然后再根据CSS渲染页面，以提供更好的用户体验。在实际开发中，优化CSS加载，如使用预加载关键CSS，或者内联关键CSS，可以帮助减少页面的...
javascript html 实验 作业 课程设计 3D圣诞树 源码
08-17
这可能包括资源加载管理、减少重绘和回流，以及适应不同屏幕尺寸的设计。 通过这个3D圣诞树项目，学生不仅可以学习到基本的HTML和JavaScript语法，还能掌握WebGL和3D图形编程的概念，同时提升他们的创新思维和实际...
CSSBox:纯Java HTML / CSS渲染引擎-开源
04-24
这个过程涉及DOM树的构建、CSS规则的解析、盒模型的计算以及重绘和回流等复杂步骤。 ### 2. DOM树与CSSOM树的构建 CSSBox首先构建DOM（文档对象模型）树，它将HTML文档解析为一系列相互关联的对象节点。接着，CSS...
CSS-Tree:纯 CSS 树图
07-04
CSS-树 纯 CSS 树图 - 绝对没有 Javascript - 只是纯粹而简单的 CSS :D - 享受吧！ 将此用于层次图。 将鼠标悬停在一个节点上，它会突出显示所有子节点。
zTree js css
04-17
zTree 的js和css文件
二级树形菜单示例：CSS TreeMenu
11-27
二级树形菜单示例：CSS TreeMenu
DOM 浏览器渲染流程+重绘+回流+浏览器加载一份html文档是怎么加载的
weixin_47075145的博客
07-21 743
③domtree和样式结构体结合后构建呈现树(rendertree),rendertree有点类似于domtree，但有区别，rendertree能识别样式，rendertree中每个node都有自己的style，而且rendertree不包含隐藏的节点(比如displaynone的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到rendertree中。Load事件触发代表页面中的DOM，CSS，JS，图片已经全部加载完毕。............
描述浏览器的渲染过程，DOM树和渲染树的区别
路人贾！
07-16 229
描述浏览器的渲染过程，DOM树和渲染树的区别
20230308----重返学习-重绘与回流-获取DOM元素-节点
seetoyou的博客
03-08 98
push() 数组末尾加元素，返回结束后数组的长度pop() 删除最后一项，返回最后一项unshift() 数组开头加元素shift() 删除开头，返回第一项reverse()sort()splice()slice()indexOf()join()concat()includes()forEach() 没有返回值map() 有返回值。
CSS - 初识css（DOM树、引入方式、书写规则）
weixin_48728769的博客
10-22 1282
css层叠样式表，对页面的美化作用。主要知识点总结，理解DOM树、css规则、引入方式。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值