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

为什么CSSOM构造不等待Javascript执行?

CSSOM(CSS Object Model)是一种用于描述和操作CSS样式的对象模型。它允许开发者通过JavaScript来动态地修改和操作CSS样式,从而实现网页的动态效果和交互。

CSSOM构造不等待Javascript执行的原因是因为CSS和JavaScript在浏览器中是并行加载和解析的。当浏览器解析HTML文档时,遇到CSS样式表的引用就会开始下载和解析CSS文件,同时也会开始执行JavaScript代码。然而,由于CSS和JavaScript是两种不同的语言,浏览器在解析HTML时会创建两个独立的解析树,即DOM树和CSSOM树。

在构建CSSOM树时,浏览器会解析CSS样式表并生成对应的CSSOM对象。这个过程是逐行进行的,即使在解析CSS样式表的过程中遇到了JavaScript代码,浏览器也不会等待JavaScript执行完毕再继续构建CSSOM树。相反,浏览器会继续解析CSS样式表,直到构建完整的CSSOM树。

这种并行加载和解析的机制可以提高网页的加载速度和用户体验。因为CSS样式表通常比JavaScript代码小且加载速度较快,所以浏览器可以尽早地开始渲染页面,而不必等待JavaScript执行完毕。这样可以使页面更快地呈现给用户,减少白屏时间。

然而,由于CSSOM构造不等待JavaScript执行,可能会导致一些问题。例如,如果JavaScript代码依赖于CSS样式表中的某些样式属性,而这些属性在构建CSSOM树时尚未解析出来,就会导致JavaScript代码无法正确执行。为了解决这个问题,开发者可以使用一些技术手段,如将JavaScript代码放在页面底部或使用DOMContentLoaded事件来确保JavaScript在CSSOM构造完成后执行。

总结起来,CSSOM构造不等待JavaScript执行是因为浏览器在解析HTML时并行加载和解析CSS和JavaScript,以提高页面加载速度和用户体验。这种机制可以使浏览器尽早地开始渲染页面,但也可能导致一些依赖于CSS样式的JavaScript代码执行问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

为什么我的自动化流程执行

很多人经常会有这个问题,为什么我的自动化流程执行。...我的流程第二步:请检查自动化流程是否有执行请来到后台【流程日志】,如果运行成功的流程就会显示【执行成功】并有一个【运行id】。...自动化流程执行失败第三步:确认流程是上线状态,但是流程没有执行为什么?如果流程确认是上线状态,需要确定你的流程是否符合你设定的触发条件,如果没有达到对应的条件,是不会触发的。...常见的一些没有触发的条件如下:【定时查询类应用】:比如腾讯文档、邮箱、mysql等应用目前都是定时查询,而不是实时触发,所以需要稍作等待【触发条件不满足】:在设定了执行条件、查询条件等情况,由于数据设定的情况没有满足...,被判断了没有执行【流程执行过程中修改】:在有【延迟执行】的流程上线后,进行修改,会导致后续的流程执行

1.5K30
  • JavaScript执行(一):Promise里的代码为什么比setTimeout先执行

    然而,执行 JavaScript 并非一锤子买卖,宿主环境当遇到一些事件时,会继续把一段代码传递给 JavaScript 引擎去执行,此外,我们可能还会提供 API 给 JavaScript 引擎,比如...所以,我们首先应该形成一个感性的认知:一个 JavaScript 引擎会常驻于内存中,它等待着我们(宿主)把 JavaScript 代码或者函数传递给它执行。...在 ES3 和更早的版本中,JavaScript 本身还没有异步执行代码的能力,这也就意味着,宿主环境传递给 JavaScript 引擎一段代码,引擎就把代码直接顺次执行了,这个任务也就是宿主发起的任务...宏观和微观任务 JavaScript 引擎等待宿主环境分配宏观任务,在操作系统中,通常等待的行为都是一个事件循环,所以在 Node 术语中,也会把这个部分称为事件循环。...Promise Promise 是 JavaScript 语言提供的一种标准化的异步管理方式,它的总体思想是,需要进行 io、等待或者其它异步操作的函数,返回真实结果,而返回一个“承诺”,函数的调用方可以在合适的时机

    59010

    浏览器渲染网页过程

    解析过程的第一步是将HTML分解并表示为开始标记、结束标记及其内容标记,然后它可以构造DOM。 ? 2....两者都允许解析器在后台加载JavaScript 文件的同时继续运行,但是它们的执行方式不同。 defer表示文件的执行将被延迟,直到文档的解析完成为止。... async 意味着文件将在加载后立即执行,这可能是在解析过程中或在解析过程之后执行的,因此不能保证异步脚本的执行顺序...这就是CSS 阻塞渲染的原因,因为在解析所有CSS并构建CSSOM之前,浏览器无法知道每个元素在屏幕上的位置。 ? 4. 执行JavaScript 不同的浏览器有不同的 JS 引擎来执行此任务。...对于需要访问DOM的任何脚本,例如以某种方式进行操作或侦听用户交互事件,优良作法是在执行脚本之前先等待此事件。

    1.1K30

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

    因为不完整的CSSOM是无法使用的,如果JavaScript想访问CSSOM并更改它,那么在执行JavaScript时,必须要能拿到完整的CSSOM。...1)情况1 没有 defer 或 async,浏览器会立即加载并执行指定的脚本,也就是说不等待后续载入的文档元素,读到就加载并执行。...defer 与相比普通 script,有两点区别:载入 JavaScript 文件时阻塞 HTML 的解析,执行阶段被放到 HTML 标签解析完成之后;在加载多个JS脚本的时候,async是无顺序的加载...2.为什么操作 DOM 慢 把 DOM 和 JavaScript 各自想象成一个岛屿,它们之间用收费桥梁连接。...JS优化: 标签加上 defer属性 和 async属性 用于在阻塞页面文档解析的前提下,控制脚本的下载和执行

    1.6K10

    【面试系列一】如何回答如何理解重排和重绘

    大致步骤是这样:在解析 HTML 时会创建 DOM,HTML 可以请求 JavaScript,而 JavaScript 反过来,又可以更改 DOM。HTML 包含或请求样式,依次来构建 CSSOM。...DOM 构造是增量的,CSSOM 却不是。CSS 是渲染阻塞的:浏览器会阻塞页面渲染直到它接收和执行了所有的 CSS。...为了构造渲染树,浏览器检查每个节点,从 DOM 树的根节点开始,并且决定哪些 CSS 规则被添加。 渲染树只包含了可见内容(body 里的部分)。...JavaScript执行是在生成渲染树之前的。这也是为什么 JavaScript 的加载、解析与执行会阻塞 DOM 的构建,阻塞页面的渲染。...这其实是非常合理的 因为 JavaScript 可以修改网页的内容,它可以更改 DOM,如果阻塞,那么这边在构建 DOM,那边 JavaScript 在改 DOM,如何保障最终得到的 DOM 是否正确

    1.3K71

    浏览器工作原理 - 页面

    ),主要有两个作用: 提供给 JavaScript 操作样式表的能力 为布局树的合成提供基础的样式信息 等 DOM 和 CSSOM 都构建好之后,渲染引擎就会构造布局树: 布局树的结构基本上就是复制 DOM...不过,如果在执行 JavaScript 脚本前,页面中包含了外部 CSS 文件的引用,或者通过 style 标签内置了 CSS 内容,那么渲染引擎还需要将这些内容转换为 CSSOM,因为 JavaScript...有修改 CSSOM 的能力,所以在执行 JavaScript 前,还需要依赖 CSSOM,即 CSS 在部分情况下也会阻塞 DOM 生成。...白屏时间,主要任务有: 解析 HTML 下载 CSS 下载 JavaScript 合成 CSSOM 执行 JavaScript 生成布局树 绘制页面 缩短白屏时间的策略 通过内联 JavaScript...,是不会影响到主线程执行的(这也是为什么主线程卡主时,CSS 动画依然能执行的原因) 分块 分层从宏观上提升了渲染效率,分块则是从微观层面提升了渲染效率。

    84220

    domReady的理解

    在解析到或者标签时,开始解析CSS,生成CSSOM,值的注意的是此时解析HTML标签与解析CSS是并行执行的。...解析HTML结构同样不会阻塞CSS解析的过程,也同样不会和JavaScript的解析过程并行执行,并且DOM Tree解析未完成而CSSOM完成时同样不会继续生成Render Tree。...在解析到或者标签时,开始解析CSS,生成CSSOM,值的注意的是此时解析HTML标签与解析CSS是并行执行的。...解析到没有设置异步加载的的时候,阻塞文档解析,等待Js脚本加载并且执行完成后,才会继续解析文档。...解析到异步的时候阻塞解析文档,继续向下解析,defer属性会使Js文件等待DOM Tree构建完成之后再执行,而async属性会使Js文件在下载完成后立即执行

    1K31

    JavaScript】对象 ④ ( 构造函数与对象的联系 | new 操作符执行过程分析 )

    一、构造函数与对象的联系 在 JavaScript 中 , 构造函数 与 对象 之间 是 描述 与 实例 之间的关系 ; 构造函数 是 用来创建特定类型对象的函数 ; 对象 是 根据 构造函数 实例化出来的具体实例...; 构造函数 抽象了 对象的公共部分 , 将 属性 和 方法 封装到了 构造函数中 , 可以理解为 面向对象 中的 类 ; 对象 指的是 某一个特定的实例化值 ; 二、new 操作符执行过程分析 1、...使用 new 构造函数() 创建对象过程 在上一篇博客 【JavaScript】对象 ③ ( 使用 new Object 创建对象 | 使用 构造函数 创建对象 | 构造函数语法 | 使用 字面量 和...这个 对象实例 会继承构造函数的 prototype 对象 , 并 执行 构造函数 中的代码 , 来初始化新对象的属性和方法 , 下面详细分析 new 操作符 的执行过程 ; new 操作符 创建对象..., 设置属性和方法 , 执行 构造函数 中的代码 , 为 空对象 设置 属性 和 方法 ; this 关键字 在 构造函数 内部被设置为新创建的对象 , 之后 执行构造函数的代码 , 给新对象添加属性和方法

    10010

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

    渲染流水线与 CSSOM 2.1 CSS 不会直接阻塞 DOM 构建 CSS 加载不会阻塞 DOM 树的解析,但会阻塞 DOM 树的渲染(解析白屏),即阻塞页面的显示,因为需要等待构建 CSSOM 完成后再进行构建布局树...等 DOM 和 CSSOM 构建完成后渲染引擎会构造布局树。布局树的结构是过滤不显示元素的 DOM 树结构,渲染引擎会进行样式计算和计算布局完成布局树的构建,最后进行绘制工作。...在脚本执行前,如果发现页面中包含 CSS (外部文件引用或内置 style 标签) 还会等待渲染引擎生成 CSSOM (因为 JavaScript 具有修改 CSSOM 的能力)。...阶段 2 的白屏时间会直接影响用户体验,渲染流水线包括了解析 HTML、下载 CSS、下载 JavaScript、生成 CSSOM执行 JavaScript、生成布局树、绘制页面一系列操作,通常瓶颈主要体现在下载...文件,构造渲染树需要 CSS 文件),称为关键资源,三个优化关键资源的方式: 减少关键资源个数 将 JavaScript 和 CSS 改成内联形式; 若 JavaScript 代码没有 DOM 或

    1.5K199

    CSS和网络性能

    为了缓解这种情况,浏览器在构造CSSOM之前不会执行。 这样做的结果是,CSS下载时间的任何延迟都会对你的异步片段产生连锁反应。 用一个例子可以很好地说明这一点。...在CSS之前放置任何非CSSOM查询JavaScript; 在CSS之后放置任何CSSOM查询JavaScript 更进一步,除了异步加载片段之外,我们应该如何更普适地加载CSS和JavaScript?...为了解决这个问题,我提出了以下问题并从那里开始工作: 如果: 在CSSOM构造上阻止CSS后定义的同步JS; 同步JS阻止DOM构造 那么 - 假设没有相互依赖 - 哪个更快/更喜欢?...我为下面的截图中的微小细节道歉,但希望你能看到代表JavaScript执行的小粉红色标记。...entry(1)是计划在其他文件到达和/或执行执行某些JavaScript的HTML; entry(2)执行它到达的那一刻; entry(3)是CSS,所以执行任何JavaScript; 在CSS

    1.3K30

    JavaScript中Promise里的代码为什么比setTimeout先执行

    然而,执行 JavaScript 并非一锤子买卖,宿主环境当遇到一些事件时,会继续把一段代码传递给 JavaScript 引擎去执行,此外,我们可能还会提供 API 给 JavaScript 引擎,比如...所以,我们首先应该形成一个感性的认知:一个 JavaScript 引擎会常驻于内存中,它等待着我们(宿主)把 JavaScript 代码或者函数传递给它执行。...在 ES3 和更早的版本中,JavaScript 本身还没有异步执行代码的能力,这也就意味着,宿主环境传递给 JavaScript 引擎一段代码,引擎就把代码直接顺次执行了,这个任务也就是宿主发起的任务...宏观和微观任务 JavaScript 引擎等待宿主环境分配宏观任务,在操作系统中,通常等待的行为都是一个事件循环,所以在 Node 术语中,也会把这个部分称为事件循环。...Promise Promise 是 JavaScript 语言提供的一种标准化的异步管理方式,它的总体思想是,需要进行 io、等待或者其它异步操作的函数,返回真实结果,而返回一个“承诺”,函数的调用方可以在合适的时机

    84820

    浏览器渲染原理及流程

    生成Render树 生成DOM树的同时会生成样式结构体CSSOM(CSS Object Model)Tree,再根据CSSOM和DOM树构造渲染树Render Tree,渲染树包含带有颜色,尺寸等显示属性的矩形...那些添加了 float或者 position:absolute的元素,因为它们脱离了正常的文档流,构造Render树的时候会针对它们实际的位置进行构造。 4....JavaScript 可以查询和修改 DOM 与 CSSOMCSSOM 构建时,JavaScript 执行将暂停,直至 CSSOM 就绪。 所以,script 标签的位置很重要。...如果没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的HTML元素之前,也就是说不等待后续载入的HTML元素,读到就加载并执行。...所以,defer 与相比普通 script,有两点区别:载入 JavaScript 文件时阻塞 HTML 的解析,执行阶段被放到 HTML 标签解析完成之后。

    4.5K32

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

    在 Firefox 里会单独构造一个新的结构, 用来连接 DOM 树和 CSSOM 树的映射关系。 那为什么要构建渲染树呢?...这里在查找的过程中,出于效率的考虑,会从 CSSOM 树的叶子节点开始查找,对应在 CSS 选择器上也就是从选择器的最右侧向左查找。所以,建议使用标签选择器和通配符选择器来定义元素样式。...; 「脚本是否并行执行:」 async属性,表示「后续文档的加载和执行与js脚本的加载和执行是并行进行的」,即异步执行;defer属性,加载后续文档的过程和js脚本的加载(此时仅加载执行)是并行进行的...所以如果代码里引用了外部的 CSS 文件,那么在执行 JavaScript 之前,还需要 等待外部的 CSS 文件下载完成,并解析生成 CSSOM 对象之后,才能执行 JavaScript 脚本。...而 JavaScript 引擎在解析 JavaScript 之前,是不知道 JavaScript 是否操纵了 CSSOM 的,所以渲染引擎在遇到 JavaScript 脚本时,不管该脚本是否操纵了 CSSOM

    2.2K21

    嚯!原来这样就可以提升页面首屏的渲染性能

    只有在那之后它才能继续解析,因为 JavaScript 程序可以改变网页的内容(尤其是 HTML)。这就是为什么 JS 会阻塞解析的原因。...与其等待资源的到期,不如**将文件的“指纹”嵌入到其 URL 中,以使本地缓存无效。 ** 当然,应该为每个资源定义缓存策略。...标有 async 的脚本不会阻塞 DOM 构建或 CSSOM,因为它们可以在 CSSOM 构建之前执行。 但请记住,内联脚本无论如何都会阻止 CSSOM,除非你将它们放在 CSS 之上。...因此,最好以首先加载所需样式和脚本的方式重新排列与渲染相关的所有内容,而其他所有内容都停止(既不解析也渲染)。...这就是为什么在 HTML(逐行)以及脚本标签中保持样式标签彼此靠近的原因。

    75540

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

    浏览器在构造DOM树的同时也在构造着另一棵树-Render Tree,与DOM树相对应暂且叫它Render树。...3.Javascript,脚本,主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree. 构造dom 树 ?  ...JavaScript的加载、解析与执行会阻塞DOM的构建,也就是说,在构建DOM时,HTML解析器若遇到了JavaScript,那么它会暂停构建DOM,将控制权移交给JavaScript引擎,等JavaScript...前面我们介绍,不完整的CSSOM是无法使用的,但JavaScript中想访问CSSOM并更改它,那么在执行JavaScript时,必须要能拿到完整的CSSOM。...也就是说,在这种情况下,浏览器会先下载和构建CSSOM,然后再执行JavaScript,最后在继续构建DOM。 你真的了解回流和重绘吗? ?

    4.3K40

    浏览器的渲染阻塞

    浏览器渲染的步骤 (1)浏览器解析HTML标记去构造DOM树(DOM = Document Object Model 文档对象模型) (2)解析CSS去构造CSSOM树( CSSOM = CSS Object...Model CSS对象模型) (3)将DOM和CSSOM树结合成渲染树之前,JS文件被解析和执行 阻塞了渲染树的部分 (1)阻塞渲染的CSS 在构造CSSOM时,所有的CSS都会被下载,无论它们是否在当前页面中被使用...Pagespeed Insight 去得到像未使用的CSS,阻塞渲染的CSS和JS文件等等的统计数据 使用Gulp任务,如gulp-uncss,或是使用Grunt 任务,如grunt-uncss (2)渲染阻塞的JavaScript...如果在解析HTML标记时,浏览器遇到了JavaScript,解析会停止。...只有在该脚本执行完毕后,HTML渲染才会继续进行 所以建议在页面底部引入js,去除非必要的js引用

    75340

    渲染树的形成原理你真的很懂吗?

    说一下为什么写这个系列? 原因一:该文章系列不管你是前端开发者,还是后端开发者在面试中经常会被问到一个问题 “从浏览器输入url到页面显示经历了哪些?”...直接用这个简单例子 body { font-size: 16px } div { font-weight: bold } div p { display: none } 看下最后构造CSSOM 树...有一点需要注意:javascript是可能操作当前已经生成的DOM节点,如果是后 面还未生成的DOM节点是生效的,比如这段代码: ...情况2:当页面中同时有Html JavaScript CSS ,而且都非外部引入 DOM 树构建时当遇到 JavaScript 脚本,就要暂停 DOM 解析,先去执行 JavaScript,同时 JavaScript...还要判断 CSSOM 是否解析完成,因为在 JavaScript 可能会操作 CSSOM 节点,CSSOM 节点确认解析完成,执行 JavaScript 再次回到 DOM 树创建。

    92441
    领券