CSSOM和DOM构造是在并行线程上进行的吗？

CSSOM和DOM构造不是在并行线程上进行的。CSSOM（CSS Object Model）是用于表示和操作CSS样式的对象模型，而DOM（Document Object Model）是用于表示和操作HTML文档的对象模型。在浏览器渲染页面时，解析HTML文档和CSS样式表是两个独立的过程。

解析HTML文档时，浏览器会构建DOM树，将HTML标记解析为DOM节点，并按照标记的顺序构建树形结构。这个过程是在主线程上进行的，是单线程的。

解析CSS样式表时，浏览器会构建CSSOM树，将CSS样式解析为CSS规则，并按照选择器的优先级构建树形结构。这个过程也是在主线程上进行的，是单线程的。

在构建DOM树和CSSOM树之后，浏览器会将它们合并成为渲染树（Render Tree），渲染树包含了所有需要显示在页面上的元素和样式信息。然后，浏览器会根据渲染树进行布局（Layout）和绘制（Paint），最终将页面显示在屏幕上。

虽然CSSOM和DOM构造过程是在主线程上进行的，但浏览器在解析HTML文档和CSS样式表时会进行一些优化，例如异步加载和并行处理资源，以提高页面加载性能。但这些优化并不改变CSSOM和DOM构造是在单线程上进行的事实。

腾讯云相关产品和产品介绍链接地址：

腾讯云产品介绍：https://cloud.tencent.com/product
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
人工智能平台（AI Lab）：https://cloud.tencent.com/product/ai
物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
移动应用开发平台（MPS）：https://cloud.tencent.com/product/mps
对象存储（COS）：https://cloud.tencent.com/product/cos
区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe

相关·内容

HTML 渲染那些事儿

构造CSS 对象模型(CSSOM) 当浏览器构建上述的 DOM 时，在 HTML 内部它还引用了一个外部 CSS 样式表 style.css。...而是在网络进程加载 style 脚本的同时可以继续去解析后续 Dom，这是所谓的 Dom 和 Cssom 的并行关系（或者严格来说的非阻塞关系）。...需要注意的是，所谓 parse styleSheet 的操作是在主线程中进行操作的。这也就意味着它会和 parse Html 抢占主线程资源（同一时间只能进行一个操作）。...实在是懒的画了，这是我从网络上搬运过来的一张图，浏览器本质上是一个多进程模型，上述的渲染过程是会发生在浏览器渲染进程中渲染线程中进行执行（这句话稍微有点绕）。...你把内联脚本放在哪里都是会阻塞页面的渲染，不过是放在底部在脚本中可以拿到内存中已经构造好的 Dom 节点进行 Dom 操作而已。外链 JS 讨论完内联 JS 的事情，我们再来看看外链 JS 的问题。

1.4K3 0

最详尽的浏览器页面渲染机制分析

因为浏览器渲染和 JS 执行共用一个线程，而且这里必须是单线程操作，多线程会产生渲染 DOM 冲突。...也就是说，在这种情况下，浏览器会先下载和构建CSSOM，然后再执行JavaScript，最后在继续构建DOM。 ? 布局与绘制当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）。...当我们用 JS 去操作 DOM 时，本质上是 JS 引擎和渲染引擎之间进行了“跨界交流”。这个“跨界交流”的实现并不简单，它依赖了桥接接口作为“桥梁”（如下图）。 ?...3.你真的了解回流和重绘吗渲染的流程基本上是这样（如下图黄色的四个步骤）：1.计算CSS样式 2.构建Render Tree 3.Layout – 定位坐标和大小 4.正式开画 ?...通常情况下DOM和CSSOM是并行构建的，但是当浏览器遇到一个不带defer或async属性的script标签时，DOM构建将暂停，如果此时又恰巧浏览器尚未完成CSSOM的下载和构建，由于JavaScript

1.5K1 0

浏览器渲染原理及流程

如果JS是多线程的方式来操作这些UI DOM，则可能出现UI操作的冲突；如果JS是多线程的话，在多线程的交互下，处于UI中的DOM节点就可能成为一个临界资源，假设存在两个线程同时操作一个DOM，一个负责修改一个负责删除...根据DOM树与CSSOM树生成另外一棵用于渲染的树-渲染树(Render tree)，布局Render树 - 然后对渲染树的每个节点进行布局处理，确定其在屏幕上的显示位置绘制Render树 - 最后遍历渲染树并用...生成Render树生成DOM树的同时会生成样式结构体CSSOM（CSS Object Model）Tree，再根据CSSOM和DOM树构造渲染树Render Tree，渲染树包含带有颜色，尺寸等显示属性的矩形...那些添加了 float或者 position:absolute的元素，因为它们脱离了正常的文档流，构造Render树的时候会针对它们实际的位置进行构造。 4....关于CSS加载的阻塞情况： css加载不会阻塞DOM树的解析 css加载会阻塞DOM树的渲染 css加载会阻塞后面js语句的执行没有js的理想情况下，html与css会并行解析，分别生成DOM与CSSOM

4.5K3 2

浏览器渲染原理

）； 5、绘制render树（print），绘制页面像素信息； 6、浏览器将各层的信息发送给GUI，GUI将各层合成，显示在屏幕上。...构建CSSOM树构建CSSOM树（CSS Object Model）的过程与构建DOM树是极其相似的。 ? 在这个过程中，浏览器会确定下一个节点的样式，并且这个过程是非常消耗资源的。...因为浏览器有GUI渲染线程和JS引擎线程，这两个线程是互斥的，JavaScript的加载、解析和执行会阻塞渲染。...不完整的CSSOM是无法使用的，JavaScript想要访问CSSOM并更改它，就必须得到完整的CSSOM。所以导致浏览器在未完成CSSOM的构建的时候想要运行JavaScript。...这种情况下，浏览器会先下载和构建CSSOM，然后再执行JavaScript。标签必须放在底部吗？

1K2 0

浏览器层面优化前端性能(2):Reader引擎线程与模块分析优化点

(Render tree)，布局Render树 - 然后对渲染树的每个节点进行布局处理，确定其在屏幕上的显示位置绘制Render树 - 最后遍历渲染树并用UI后端层将每一个节点绘制出来DOM树与Render...那些添加了float或者position:absolute的元素，因为它们脱离了正常的文档流，构造Render树的时候会针对它们实际的位置进行构造。...JavaScript 被认为是解释器阻塞资源，HTML解析会被JS阻塞，它不仅可以读取和修改 DOM 属性，还可以读取和修改 CSSOM 属性。...没有js的理想情况下，html与css会并行解析，分别生成DOM与CSSOM，然后合并成Render Tree，进入Rendering Pipeline；但如果有js，css加载会阻塞后面js语句的执行...这种处理方式和思想跟图像处理软件（比如Sketch/GIMP/Photoshop）是一致的，它们都是可以在图像中的某个单个图层上做操作，最后合并所有图层得到最终的图像。

1.2K2 0

浏览器原理学习笔记05—浏览器中的页面渲染

CSSOM： CSSOM 是由 CSS 文本解析得到的渲染引擎能够识别的结构，类似 HTML 和 DOM 的关系，CSSOM 可以为 JavaScript 提供操作样式表的能力，还能为布局树的合成提供基础样式信息...等 DOM 和 CSSOM 构建完成后渲染引擎会构造布局树。布局树的结构是过滤不显示元素的 DOM 树结构，渲染引擎会进行样式计算和计算布局完成布局树的构建，最后进行绘制工作。...注意：合成操作是在渲染进程的合成线程上完成的，不影响主线程的执行，即使主线程卡住，CSS 动画依然能执行 3.3 分块通常页面比屏幕大得多，合成线程会将每个图层分割为大小固定的图块，然后优先绘制靠近视口的图块...[vmx3gndlu1.png] 和加载阶段不同的是，交互阶段没有了加载关键资源和构建 DOM、CSSOM 流程，大部分是由 JavaScript 通过修改 DOM 或者 CSSOM 触发交互动画的，另外一部分帧是由...(Web Workers 中没有 DOM、CSSOM 环境) 避免强制同步布局通过 DOM 接口执行元素添加或删除等操作后，为避免当前任务占用主线程太长时间，一般重新计算样式和布局操作是在另外的任务中异步完成的

1.5K19 9

Web性能优化_知识点精讲

而使用「Worker 线程」，浏览器可以在「原始页面环境之外」再分配一个完全独立的「二级子环境」。这个子环境不能与依赖单线程交互的 API（如 DOM）互操作，但「可以与父环境并行」执行代码。...服务工作线程在两个主要任务上最有用：充当「网络请求的缓存层」 ❝在某种意义上服务工作线程就是用于把网页变成像「原生应用程序」一样的「工具」 ❞ 线程缓存 ❝服务工作线程的一个主要能力是可以「通过编程方式实现真正的网络请求缓存机制...使用正确的状态管理方法利用React.Memo 第二阶段是在应用加载后进行优化 ---- 利用React-Profiler提升应用性能 Profiler UI 界面 Profiler的UI界面在逻辑上可分为...JavaScript 所访问并修改一旦在页面解析时遇到标签，DOM 的构造过程就会暂停，等待服务器请求脚本在脚本加载完成后，还要等取回所有的 CSS 及完成 CSSOM 之后才继续执行...」 async 加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步） defer 加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js

1.3K2 0

vue在浏览器中对DOM渲染探究

因为浏览器有GUI渲染线程与JS引擎线程，为了防止渲染出现不可预期的结果，这两个线程是互斥的关系。...也就是说，在这种情况下，浏览器会先下载和构建CSSOM，然后再执行JavaScript，最后在继续构建DOM。 [阻塞渲染.png] 首先渲染的前提是生成渲染树，所以HTML和CSS肯定会阻塞渲染。...操作DOM次数一多，也就等同于一直在进行线程之间的通信，并且操作DOM 而且可能还会带来重绘回流的情况，所以也就导致了性能上的问题。经典面试题：插入几万个 DOM，如何实现页面不卡顿？...布局流程的输出是一个盒模型，它会精确地捕获每个元素在视口内的确切位置和尺寸，所有相对测量值都将转换为屏幕上的绝对像素。...通常情况下DOM和CSSOM是并行构建的，但是当浏览器遇到一个不带defer或async属性的script标签时，DOM构建将暂停，如果此时又恰巧浏览器尚未完成CSSOM的下载和构建，由于JavaScript

1.2K1 0

画了20张图，详解浏览器渲染引擎工作原理

下面就来看看，浏览器是如何把CSS样式应用到DOM节点上的。同样，浏览器也是无法直接理解CSS代码的，需要将其浏览器可以理解的CSSOM树。实际上。...不过，CSSOM 树和 DOM 树是独立的两个数据结构，它们并没有一一对应关系。DOM 树描述的是 HTML 标签的层级关系，CSSOM 树描述的是选择器之间的层级关系。...在 Firefox 里会单独构造一个新的结构，用来连接 DOM 树和 CSSOM 树的映射关系。那为什么要构建渲染树呢？...当图层绘制列表准备好之后，主线程会把该绘制列表提交给合成线程。注意：合成操作是在合成线程上完成的，所以，在执行合成操作时并不会影响到主线程的执行。...；「脚本是否并行执行：」 async属性，表示「后续文档的加载和执行与js脚本的加载和执行是并行进行的」，即异步执行；defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的

1.9K2 0

domReady的理解

在解析到或者标签时，开始解析CSS，生成CSSOM，值的注意的是此时解析HTML标签与解析CSS是并行执行的。...当DOM Tree与CSSOM生成后，将两者结合进行布局，计算它们的大小位置等布局信息，形成一个能够表示这所有信息的内部表示模型，可称为渲染树render tree。...CSS加载解析时不会阻塞DOM树的解析过程，这两个解析过程是可以并行的，但是CSS加载过程中是不能进行JavaScript的解析的，也就是说CSS加载过程中是会阻塞JavaScript的解析，此外因为生成...解析HTML结构同样不会阻塞CSS解析的过程，也同样不会和JavaScript的解析过程并行执行，并且DOM Tree解析未完成而CSSOM完成时同样不会继续生成Render Tree。...在解析到或者标签时，开始解析CSS，生成CSSOM，值的注意的是此时解析HTML标签与解析CSS是并行执行的。

9813 1

HTML渲染过程

我们一直在写HTML，关注的一直是界面和功能，很少考虑整个HTML的渲染过程。也是，在开发过程中确实不需要关注这方面，但是知道和理解HTML的渲染过程，对于HTML的一些性能有很好的认识。...HTML解析过程：构建DOM树、构建CSSOM树、根据DOM树和CSSOM树构建render树、有了render树就开始布局Layout、最后绘制paint。...2、构建CSSOM 解析css去构建CSSOM树 3、构建render树 DOM已经构建好了，css也有了，浏览器就会根据这两个来构造render树，浏览器就知道了有哪些节点、各个节点的CSS定义以及他们的从属关系...我们都知道HTML是自上往下解析的，在解析过程中： 1、如果遇到link和style，那就就会去下载这些外部的css资源，但是css跟DOM的构建是并行的，就是说不会阻塞DOM树的构建。...这就是HTML的渲染过程，因为DOM和css并行构建，我们会把css用外部引入，可以更快的构建DOM，因为JavaScript会阻塞DOM和css构建，且操作DOM一定要在DOM构建完成，我们选择把script

6592 0

从 8 道面试题看浏览器渲染过程与性能优化

线程是 CPU 调度的最小单位（是建立在进程基础上的一次程序运行单位）。 ? process_thread 现代操作系统都是可以同时运行多个任务的,比如:用浏览器上网的同时还可以听音乐。...由上面浏览器渲染流程我们可以看出 : DOM 解析和 CSS 解析是两个并行的进程,所以 CSS 加载不会阻塞 DOM 的解析。...然而,由于 Render Tree 是依赖于 DOM Tree 和 CSSOM Tree 的, 所以他必须等待到 CSSOM Tree 构建完成,也就是 CSS 资源加载完成(或者 CSS 资源加载失败... 有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。 3....渲染层合并,对于页面中 DOM 元素的绘制(Paint)是在多个层上进行的。

1.1K4 0

浏览器渲染机制

DOM construction（DOM 构造）：因为 HTML 标记定义了不同标签之间的关系，上一步产生的对象会链接在一个树状数据结构中，以标识父子、兄弟关系。...附加了计算样式的 DOM 树，一般被称为 CSSOM（CSS Object Model）： 003.png 图片来源 Constructing the Object Model CSSOM 和 DOM...是并行构建的，构建 CSSOM 不会阻塞 DOM 的构建。...1.5 合成 Compositing 合成阶段在 CC（Chromium Compositor）线程中进行。...浏览器渲染性能的优化上一节中是一轮典型的浏览器渲染流程，在流程完成之后，DOM、CSSOM、LayoutObject、PaintLayer 等各种树状数据结构都会保留下来，以便在用户操作、网络请求、JS

1K3 1

CSS和网络性能

从广义上讲，这就是CSS对性能至关重要的原因：浏览器在构建渲染树之前无法渲染页面; 渲染树是DOM和CSSOM的组合结果; DOM是HTML加上需要对其进行操作的任何阻塞JavaScript; CSSOM...考虑到这一点，我们需要尽快构建DOM和CSSOM。在大多数情况下，构建DOM相对较快：您的第一个HTML响应是DOM。...为了缓解这种情况，浏览器在构造CSSOM之前不会执行。这样做的结果是，CSS下载时间的任何延迟都会对你的异步片段产生连锁反应。用一个例子可以很好地说明这一点。...为了解决这个问题，我提出了以下问题并从那里开始工作：如果：在CSSOM构造上阻止CSS后定义的同步JS; 同步JS阻止DOM构造那么 - 假设没有相互依赖 - 哪个更快/更喜欢？...（Preload Scanner确保即使在脚本上阻止了DOM构造，CSS仍然会并行下载。）

1.3K3 0

面试官问我Chrome浏览器的渲染原理（6000字长文）

其中浏览器复习一下，它是多线程的的，js是单线程的，JS在浏览器中，它可以是多线程的。下面围绕浏览器渲染原理话题开始描述，为什么要了解浏览器渲染页面机制呢？。...image 说说浏览器页面渲染：第一步：在CSS资源还没有请求回来之前，先生成DOM树；第二步：当所有的CSS请求回来之后，浏览器按照CSS的导入顺序，依次进行渲染，最后生成CSSOM树；第三步：...把DOM树和CSSOM树结合在一起，生成有样式，有结构的RENDER TREE渲染树；最后一步：浏览器按照渲染树，在页面中进行渲染和解析来源于知乎的渲染引擎及关键渲染路径 ?...然后进行栅格化（raster）操作（绘制列表只是用来记录绘制顺序和绘制指令的列表，而实际上绘制操作是由渲染引擎中的合成线程来完成的），最后合成与显示。找一张整体的流程图如下： ? image ?...每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

1.8K3 0

再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

JavaScript 不仅可以读取和修改 DOM 属性，还可以读取和修改 CSSOM 属性。...js线程与资源进行加载的线程并不互斥，不会互斥意味着：资源的加载可以和UI渲染、重排，事件响应，或者JavaScript代码的执行的并发进行。...这就意味着：在执行中内容时，浏览器会切换到JavaScript引擎所在的线程，此时渲染引擎所在的线程会阻塞，故其后元素的解析和渲染会暂停。...complete：代表加载成功，文档加载完成，并且所有resource都加载完毕通过下面代码验证，在chrome上貌似只有 interactive和complete。...JS、CSS以及img对DOMContentLoaded事件的影响浏览器线程阻塞和无阻塞加载脚本的理解 css加载会造成阻塞吗？

1.6K2 0

【云+社区年度征文】面试官问我Chrome浏览器的渲染原理（6000字长文）

其中浏览器复习一下，它是多线程的的，js是单线程的，JS在浏览器中，它可以是多线程的。下面围绕浏览器渲染原理话题开始描述，为什么要了解浏览器渲染页面机制呢？。...呈现引擎呈现引擎的作用是“呈现”，用于在浏览器的屏幕上显示请求的内容。一般情况下，呈现引擎可显示HTML和xml文档与图片，通过插件或浏览器扩展程序，可以显示其他类型的内容。...说说浏览器页面渲染：第一步：在CSS资源还没有请求回来之前，先生成DOM树；第二步：当所有的CSS请求回来之后，浏览器按照CSS的导入顺序，依次进行渲染，最后生成CSSOM树；第三步：把DOM树和...然后进行栅格化（raster）操作（绘制列表只是用来记录绘制顺序和绘制指令的列表，而实际上绘制操作是由渲染引擎中的合成线程来完成的），最后合成与显示。...每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

1.4K21 1

Dom树 CSS树渲染树(render树) 规则、原理

2.上面的操作为了演示，采用的方法是从根结点一直到文本结点的遍历，在DOM 方法上，有更简洁的方法，这些以后会有更多示例加以说明。...什么是渲染树(render树)？浏览器在构造DOM树的同时也在构造着另一棵树-Render Tree,与DOM树相对应暂且叫它Render树。...3.Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree. 构造dom 树 ? ...布局流程的输出是一个“盒模型”，它会精确地捕获每个元素在视口内的确切位置和尺寸，所有相对测量值都将转换为屏幕上的绝对像素。 ...也就是说，在这种情况下，浏览器会先下载和构建CSSOM，然后再执行JavaScript，最后在继续构建DOM。你真的了解回流和重绘吗? ?

4.1K4 0

从浏览器地址栏输入url到显示页面的步骤

( HTML、JS、CSS 等) 进行语法解析，建立相应的内部数据结构 ( 如HTML 的DOM ); 载入解析到的资源文件，渲染页面，完成。...浏览器检查响应状态吗:是否为1XX， 3XX， 4XX， 5XX，这些情况处理与2XX不同 14. 如果资源可缓存，进行缓存 15....对响应进行解码 (例如gzip压缩) 16.根据资源类型决定如何处理 (假设资源为工TML文档) 17.解析HTML文档，构件DOM树，下载资源，构造CSSOM树，执行js脚本，这些操作没有严格的先后顺序...CSSOM:节点创建CSSOM树 21. 根据DOM树和CSSOM树构建渲染树 : 1.从DOM树的根节点遍历所有可见节点，不可⻅节点包括:1) 不可⻅的标签。...浏览器在Document对象上触发DOMContentLoaded事件 7.此时文档完全解析完成，浏览器可能还在等待如图片等内容加载，等这些内容完成载入并且所有异步脚本完成载入和执行，document.readState

571 0

「一道面试题」输入URL到渲染全面梳理中-页面渲染篇

线程是 CPU 调度的最小单位线程是建立在进程的基础上的一次程序运行单位，通俗点解释线程就是程序中的一个执行流，一个进程可以有多个线程一个进程中只有一个执行流称作单线程，...，也就是说允许单个程序创建多个并行执行的线程来完成各自的任务 JS为什么是单线程 JS的单线程，与它的用途有关，作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM，这决定了它只能是单线程...，否则会带来很复杂的同步问题比如，假定 JavaScript 同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？...Tree ) 由 DOM树、CSSOM树合并而成，但并不是必须等 DOM树及 CSSOM树加载完成后才开始合并构建渲染树，三者的构建并无先后条件，也并非完全独立，而是会有交叉，并行构建，因此会形成一边加载...或 display:none CSSOM树规则会附加给渲染树的每个元素上渲染树构建完成，浏览器会对这些元素进行定位和布局，这一步也叫重排/回流 ( Reflow) 或布局(Layout ) 接下来绘制这些元素的样式

7572 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云