首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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.5K30

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

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

1.6K10
  • 浏览器渲染原理及流程

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

    4.5K32

    浏览器渲染原理

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

    1K20

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

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

    1.2K20

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

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

    1.5K199

    Web性能优化_知识点精讲

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

    1.3K20

    vue浏览器中对DOM渲染探究

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

    1.2K10

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

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

    2.3K21

    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并行执行

    1K31

    从 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.2K40

    HTML渲染过程

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

    67020

    CSS网络性能

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

    1.3K30

    面试官问我Chrome浏览器渲染原理(6000字长文)

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

    2K30

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

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

    2K20

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

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

    1.4K211

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

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

    9010

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

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

    77920

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

    JavaScript 不仅可以读取修改 DOM 属性,还可以读取修改 CSSOM 属性。...js线程与资源进行加载线程并不互斥,不会互斥意味着:资源加载可以UI渲染、重排,事件响应,或者JavaScript代码执行并发进行。...这里还有一个知识点:下载最大并行数指的是从一个主机上下载最大并行数,如果从多个主机下载资源,这个数量会翻倍,但是由于对DNS解析也是一个性能优化点,故而一般策略:不应设置超过4个主机,最好只设置...这就意味着:执行中内容时,浏览器会切换到JavaScript引擎所在线程,此时渲染引擎所在线程会阻塞,故其后元素解析渲染会暂停。...complete:代表加载成功,文档加载完成,并且所有resource都加载完毕 通过下面代码验证,chrome貌似只有  interactivecomplete。

    5K150

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券