- 综合排序
- 最热优先
- 最新优先
- 来自专栏Super 前端
前端优化--使用JavaScript添加交互
接本系列「关键渲染路径」「阻塞渲染的 CSS」，浏览器大致经过了：构建 DOM 树、构建 CSSOM 树、构建渲染树、布局、绘制五个步骤。 JavaScript 可以查询和修改 DOM 与 CSSOM JavaScript 执行会阻止 CSSOM 除非将 JavaScript 显式声明为异步，否则它会阻止构建 DOM JavaScript 在网页中引入脚本的另一个微妙事实是，它们不仅可以读取和修改 DOM 属性，还可以读取和修改 CSSOM 属性。 如果浏览器尚未完成 CSSOM 的下载和构建，而我们却想在此时运行脚本，会怎样？答案很简单，对性能不利：浏览器将延迟脚本执行和 DOM 构建，直至其完成 CSSOM 的下载和构建。 JavaScript 可以查询和修改 DOM 与 CSSOM。 JavaScript 执行将暂停，直至 CSSOM 就绪。
2.4K20发布于 2021-08-30 - 来自专栏挨踢小子部落阁
最详尽的浏览器页面渲染机制分析
构建CSSOM DOM会捕获页面的内容，但浏览器还需要知道页面如何展示，所以需要构建CSSOM。 原本DOM和CSSOM的构建是互不影响，井水不犯河水，但是一旦引入了JavaScript，CSSOM也开始阻塞DOM的构建，只有CSSOM构建完毕后，DOM再恢复DOM构建。 这是什么情况？ 因为不完整的CSSOM是无法使用的，如果JavaScript想访问CSSOM并更改它，那么在执行JavaScript时，必须要能拿到完整的CSSOM。 CSSOM会阻塞渲染，只有当CSSOM构建完毕后才会进入下一个阶段构建渲染树。 可以修改CSSOM，所以需要等CSSOM构建完毕后再执行JS，最后才重新DOM构建。
2.2K10发布于 2019-12-04 - 来自专栏烹饪一朵云
vue在浏览器中对DOM渲染探究
，所以需要构建CSSOM。 原本DOM和CSSOM的构建是互不影响，井水不犯河水，但是一旦引入了JavaScript，CSSOM也开始阻塞DOM的构建，只有CSSOM构建完毕后，DOM再恢复DOM构建。 因为不完整的CSSOM是无法使用的，如果JavaScript想访问CSSOM并更改它，那么在执行JavaScript时，必须要能拿到完整的CSSOM。 CSSOM会阻塞渲染，只有当CSSOM构建完毕后才会进入下一个阶段构建渲染树。 可以修改CSSOM，所以需要等CSSOM构建完毕后再执行JS，最后才重新DOM构建。
1.9K10编辑于 2022-04-06 - 来自专栏Super 前端
前端优化--关键渲染路径
HTML 标记转换成文档对象模型 (DOM)；CSS 标记转换成 CSS 对象模型 (CSSOM)。 DOM 和 CSSOM 是独立的数据结构。 那是 CSSOM 的责任。 CSS 字节转换成字符，接着转换成令牌和节点，最后链接到一个称为“CSS 对象模型”(CSSOM) 的树结构内： ? CSSOM 为何具有树结构？ 以上面的 CSSOM 树为例进行更具体的阐述。 CSSOM 和 DOM 是独立的数据结构！结果证明，浏览器隐藏了一个重要步骤。 接下来，让我们谈一谈将 DOM 与 CSSOM 关联在一起的渲染树。
1.6K41发布于 2019-08-14 - 来自专栏Super 前端
前端优化--使用JavaScript添加交互
接本系列「关键渲染路径」「阻塞渲染的 CSS」，浏览器大致经过了：构建 DOM 树、构建 CSSOM 树、构建渲染树、布局、绘制五个步骤。 ? JavaScript 可以查询和修改 DOM 与 CSSOM JavaScript 执行会阻止 CSSOM 除非将 JavaScript 显式声明为异步，否则它会阻止构建 DOM JavaScript 在网页中引入脚本的另一个微妙事实是，它们不仅可以读取和修改 DOM 属性，还可以读取和修改 CSSOM 属性。 如果浏览器尚未完成 CSSOM 的下载和构建，而我们却想在此时运行脚本，会怎样？答案很简单，对性能不利：浏览器将延迟脚本执行和 DOM 构建，直至其完成 CSSOM 的下载和构建。 JavaScript 可以查询和修改 DOM 与 CSSOM。 JavaScript 执行将暂停，直至 CSSOM 就绪。
2.3K21发布于 2020-05-28 - 来自专栏大前端（横向跨端 & 纵向全栈）
浏览器渲染网页过程
解析CSS并构建CSSOM 与HTML文件和DOM相似，加载CSS文件时，必须将它们解析并转换为树，即CSSOM。 它描述了页面上的所有CSS选择器，它们的层次结构和属性。 CSSOM 与 DOM一起构建渲染树，浏览器依次使用渲染树来布局和绘制网页。 CSSOM 与 文档对象模型(DOM) 非常相似，两者都是关键渲染路径的一部分，也是正确渲染一个网站必须采取的一系列步骤。 CSSOM 与 DOM的不同之处在于它不能以增量方式构建，因为CSS规则由于特定性而可以在各个不同的点相互覆盖。 5.合并DOM和CSSOM 构建渲染树 渲染树是DOM和CSSOM的组合，表示将要渲染到页面上的所有内容。
1.5K30发布于 2020-12-08 - 来自专栏鲸鱼动画
Dom树 CSS树 渲染树(render树) 规则、原理
---- 构建CSSOM DOM会捕获页面的内容，但浏览器还需要知道页面如何展示，所以需要构建CSSOM。 构建CSSOM的过程与构建DOM的过程非常相似，当浏览器接收到一段CSS，浏览器首先要做的是识别出Token，然后构建节点并生成CSSOM。 原本DOM和CSSOM的构建是互不影响，井水不犯河水，但是一旦引入了JavaScript，CSSOM也开始阻塞DOM的构建，只有CSSOM构建完毕后，DOM再恢复DOM构建。 这是什么情况？ 前面我们介绍，不完整的CSSOM是无法使用的，但JavaScript中想访问CSSOM并更改它，那么在执行JavaScript时，必须要能拿到完整的CSSOM。 所以就导致了一个现象，如果浏览器尚未完成CSSOM的下载和构建，而我们却想在此时运行脚本，那么浏览器将延迟脚本执行和DOM构建，直至其完成CSSOM的下载和构建。
5.3K40发布于 2020-10-13 - 来自专栏性能与架构
浏览器的渲染阻塞
浏览器渲染的步骤 （1）浏览器解析HTML标记去构造DOM树（DOM = Document Object Model 文档对象模型） （2）解析CSS去构造CSSOM树( CSSOM = CSS Object Model CSS对象模型) （3）将DOM和CSSOM树结合成渲染树之前，JS文件被解析和执行 阻塞了渲染树的部分 （1）阻塞渲染的CSS 在构造CSSOM时，所有的CSS都会被下载，无论它们是否在当前页面中被使用
86840发布于 2018-04-02 - 来自专栏ShanSan的云原生之路
浏览器渲染原理
构建CSSOM树 构建CSSOM树（CSS Object Model）的过程与构建DOM树是极其相似的。 ? 在这个过程中，浏览器会确定下一个节点的样式，并且这个过程是非常消耗资源的。 因为节点的样式可以直接设置，也可以通过继承获得，浏览器必须递归CSSOM树才能确定具体的元素的样式。 构建渲染树 当生成DOM树和CSSOM树之后，下一步就是将这两棵树组合为渲染树。 JS文件不止会阻塞DOM的构建，也会导致CSSOM的构建。不完整的CSSOM是无法使用的，JavaScript想要访问CSSOM并更改它，就必须得到完整的CSSOM。 所以导致浏览器在未完成CSSOM的构建的时候想要运行JavaScript。这种情况下，浏览器会先下载和构建CSSOM，然后再执行JavaScript。 <script>标签必须放在底部吗？
1.4K20发布于 2020-07-06 - 来自专栏clz
浏览器渲染流程(上)
（） 渲染流程 解析HTML，生成DOM树 解析CSS，生成CSSOM树 布局(Layout) 结合DOM树和CSSOM树，生成渲染树 布局计算 分层(Layer) 绘制(Paint 生成CSSOM树 生成CSSOM树和生成DOM树的目的一样，都是转换为浏览器能够理解的结构。 通过document.styleSheets可以查看最后的结构。 CSSOM结构主要是给JavaScript提供操作样式表的能力，以及提供基础的样式信息。 上面生成DOM树就OK了，但是这里生成CSSOM树之后，还需要进行两步操作： 转换样式表的属性值，使其标准化 这里的转换属性，使其标准化是什么意思？ 布局(Layout) 3.1 生成渲染树 生成渲染树的实现其实就是上两步生成的DOM树、CSSOM树结合起来。
55930编辑于 2023-03-16 - 来自专栏web share
浏览器的运行机制
CSSOM 树：解析 CSS（包括外部 CSS 文件和样式元素）创建的是 CSSOM 树。CSSOM 的解析过程与 DOM 的解析过程是并行的。 渲染树：CSSOM 与 DOM 结合，之后我们得到的就是渲染树（Render tree ）。 基于这些“树”，我们再梳理一番： 渲染过程说白了，首先是基于 HTML 构建一个 DOM 树，这棵 DOM 树与 CSS 解释器解析出的 CSSOM 相结合，就有了布局渲染树。
60610发布于 2021-01-14 - 来自专栏京程一灯
CSS元素选择器是怎样运作的？
CSS 在被浏览器加载后，会被解析成 CSSOM 树，并尝试与 Dom 叠加成渲染树，随后进行计算位置、渲染等步骤。 这样看来，CSS 属性套用的关键就在于如何从 CSS 转化成 CSSOM 树，以及怎么把 CSSOM 套用到 DOM 上去。 反过来，如果将前面的 CSS 由右到左进行解析，CSSOM 树则可能会如下： ? 从右到左的解析顺序能够将所有共享的规则路径收拢在一起，当浏览器进行属性比对时，就不用再便利整个 CSSOM 树，大大的减少了无效的比对计算。 套用样式 将 CSSOM 树解析出来之后就能够和 DOM 结合了吗？如果真的有这么简单就太好了。
2.2K10发布于 2020-11-03 - 来自专栏ThoughtWorks
前端不止：Web性能优化 - 关键渲染路径以及优化策略
CSS 对象模型 (CSSOM) 当DOM捕获了页面的内容，我们还需要知道页面如何展示这些内容，所以需要构建CSS 对象模型（CSSOM）。 CSSOM有着一个和DOM构建相似的流程：字节 → 字符 → 令牌 → 节点 → CSS对象模型。 ? ），将CSS转换成CSSOM，然后进行后续的操作。 短暂回顾一下“关键渲染路径”的步骤 处理 HTML 标记并构建 DOM 树 处理 CSS 标记并构建 CSSOM 树 将 DOM 与 CSSOM 合并成一个渲染树 根据渲染树来布局 将各个节点绘制到屏幕上 当DOM或者CSSOM发生变化的时候，浏览器就需要再次执行一次上面的步骤。
1.4K30发布于 2018-07-23 - 来自专栏秃头开发头秃了
画了20张图，详解浏览器渲染引擎工作原理
树构建」：CSS解析器解析CSS，并将其转化为CSS对象，将这些CSS对象组装起来，构建CSSOM树； 「渲染树构建」：DOM 树和 CSSOM 树都构建完成以后，浏览器会根据这两棵树构建出一棵渲染树； 同样，浏览器也是无法直接理解CSS代码的，需要将其浏览器可以理解的CSSOM树。实际上。浏览器在构建 DOM 树的同时，如果样式也加载完成了，那么 CSSOM 树也会同步构建。 不过，CSSOM 树和 DOM 树是独立的两个数据结构，它们并没有一一对应关系。DOM 树描述的是 HTML 标签的层级关系，CSSOM 树描述的是选择器之间的层级关系。 渲染树就是 DOM 树和 CSSOM 树的结合，会得到一个可以知道每个节点会应用什么样式的数据结构。这个结合的过程就是遍历整个 DOM 树，然后在 CSSOM 树里查询到匹配的样式。 而 JavaScript 引擎在解析 JavaScript 之前，是不知道 JavaScript 是否操纵了 CSSOM 的，所以渲染引擎在遇到 JavaScript 脚本时，不管该脚本是否操纵了 CSSOM
3.8K21编辑于 2022-10-26 - 来自专栏全栈者
渲染树的形成原理你真的很懂吗？
继续往下看 CSS解析器 CSS 解析器最终的目的也是构建树不过它构建的树是 CSSOM 树 树的构建流程和 DOM 树的构建流程基本相同 ? 还是那张图，具体我就不一一讲解一遍了。 CSSOM 为何具有树结构？ 以上面的 CSSOM 树为例进行更具体的阐述。 javascript对DOM树与CSSOM树创建的影响 上面两个例子中都还没有javascript的出现，接下来说下JavaScript 对 DOM 树和 CSSOM 树构建的影响。 是否解析完成，因为在 JavaScript 可能会操作 CSSOM 节点，CSSOM 节点确认解析完成，执行 JavaScript 再次回到 DOM 树创建。
1.1K41发布于 2019-11-07 - 来自专栏前端开发
解析 span 元素背景图像的渲染流程
该 属性 的 值 在 HTML 解析 时 会 被 解析 为 CSS 规则，并 添加 到 对应 元素 的 CSSOM 节点 中 。 浏览器的渲染 流水线浏览器 渲染 一 个 Web 页面 涉及 从 源码 到 像素 的 多步 过程，通常 包括：解析 HTML 构建 DOM、解析 CSS 构建 CSSOM、生成 Render Tree、 CSSOM 构建与样式计算与 HTML 解析 并行，浏览器 也 会 解析 内联 style 与 外部 CSS 文件，构建 CSS 对象 模型(CSSOM)。 时，CSSOM 会 为 对应 元素 生成 一 条 规则，后续 在 样式 计算 阶段 与 其他 规则 一起 决定 最终 应用 于 元素 的 样式 。 布局（Layout）在 样式 计算 完成 后，浏览器 会 根据 DOM 与 CSSOM 构建 Render Tree，计算 每 个 可 视 元素 的 几何 信息（大小、位置）。
35000编辑于 2025-07-03 - 来自专栏前端菜鸟变老鸟
Webkit底层原理(5)--CSS解释器和样式布局
当网页有用户交互或者动画等动作的时候，通过CSSOM技术，JavaScript代码同样可以很方便的修改CSS样式，Webkit此时需要重新解释样式并重复以上这一过程。 一、CSSOM（CSS Object Model） 通常我们的CSS代码都是静态的，那么CSS有没有提供一些方法可以让开发者写一些脚本去操作它呢？这就是CSSOM，成为CSS对象模型。 对于内部和外部样式表，CSSOM定义了样式表的接口，称为CSSStyleSheet，这是一个可以在JavaScript代码中访问的接口。 这个接口同DOM中的Script或者Link节点不一样，它是CSSOM定义的心接口。 开发者可以通过document.stylesheets查看当前网页中包含的所有CSS样式表，这是因为CSSOM对DOM中的Document接口进行了扩展。
1.3K10发布于 2019-10-22 - 来自专栏Super 前端
前端优化--阻塞渲染的CSS
接上一篇「关键渲染路径」，浏览器大致经过了：构建 DOM 树、构建 CSSOM 树、构建渲染树、布局、绘制五个步骤。 ? 这里主要简述，构建 CSSOM 相关！ 默认情况下，CSS 被视为阻塞渲染的资源，这意味着浏览器将不会渲染任何已处理的内容，直至 CSSOM 构建完毕。请务必精简您的 CSS，尽快提供它，并利用媒体类型和查询来解除对渲染的阻塞。 在 渲染树构建（可查看上篇文章） 中，我们看到关键渲染路径要求我们同时具有 DOM 和 CSSOM 才能构建渲染树。这会给性能造成严重影响：HTML 和 CSS 都是阻塞渲染的资源。 浏览器将阻塞渲染，直至 DOM 和 CSSOM 全都准备就绪。 CSS 是阻塞渲染的资源。需要将它尽早、尽快地下载到客户端，以便缩短首次渲染的时间。
1.2K21发布于 2020-05-28 - 来自专栏iOS开发干货分享
前端面试基础题：从浏览器地址栏输入url到显示页面的步骤
2XX不同 14.如何资源可缓存，进行缓存 15.对响应进行解码（例如gzip压缩 ） 16.根据资源类型决定如何处理（假设资源为HTML文档） 17.解析HTML文档，构件DOM树，下载资源，构造CSSOM 规范将字符流解析为标记 Lexing：词法分析将标记转换为对象并定义属性和规则 DOM construction：根据HTML标记关系将对象组成DOM树 19.解析过程中遇到图片、样式表、js文件，启动下载 20.构建CSSOM 树： Tokenizing：字符流转换为标记流 Node：根据标记创建节点 CSSOM：节点创建CSSOM树 21.根据DOM树和CSSOM树构建渲染树： 从DOM树的根节点遍历所有可见节点，不可见节点包括 ：（script、meta 这样本身不可见的标签，被css隐藏的节点，如 display：none） 对每一个可见节点，找到恰当的CSSOM规则并应用 发不可视节点，找到恰当的CSSOM规则并应用 22
1.3K30发布于 2020-07-24 - 来自专栏程序员成长指北
渲染树的形成原理你真的很懂吗？
继续往下看 CSS解析器 CSS 解析器最终的目的也是构建树不过它构建的树是 CSSOM 树 树的构建流程和 DOM 树的构建流程基本相同 ? 还是那张图，具体我就不一一讲解一遍了。 CSSOM 为何具有树结构？ 以上面的 CSSOM 树为例进行更具体的阐述。 javascript对DOM树与CSSOM树创建的影响 上面两个例子中都还没有javascript的出现，接下来说下JavaScript 对 DOM 树和 CSSOM 树构建的影响。 是否解析完成，因为在 JavaScript 可能会操作 CSSOM 节点，CSSOM 节点确认解析完成，执行 JavaScript 再次回到 DOM 树创建。
1.2K51发布于 2019-10-30
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号