首页
学习
活动
专区
工具
TVP
发布

css加载会造成阻塞

可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载阻塞DOM树的解析和渲染吗?接下来,我就来对css加载对DOM树的解析和渲染的影响做一个测试。...因为你加载css的时候,可能会修改下面DOM节点的样式,如果css加载阻塞DOM树渲染的话,那么当css加载完之后,DOM树可能又得重新重绘或者回流了,这就造成了一些没有必要的损耗。...由上面的推论,我们可以得出,css加载不会阻塞DOM树解析,但是会阻塞DOM树渲染。那么,css加载会不会阻塞js执行呢? 同样,通过代码来验证. <!...这也就说明了,css加载阻塞后面的js语句的执行。...详细结果看下图(css加载用了5600+ms): 结论 由上所述,我们可以得出以下结论: css加载不会阻塞DOM树的解析 css加载阻塞DOM树的渲染 css加载阻塞后面js语句的执行、 因此,

3.9K60

css加载会造成阻塞

可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载阻塞DOM树的解析和渲染吗?接下来,我就来对css加载对DOM树的解析和渲染的影响做一个测试。...可以得知,此时DOM树至少已经解析完成到了h1那里,而此时css还没加载完成,也就说明,css并不会阻塞DOM树的解析。 css加载阻塞DOM树渲染?...由上面的推论,我们可以得出,css加载不会阻塞DOM树解析,但是会阻塞DOM树渲染。那么,css加载会不会阻塞js执行呢? 同样,通过代码来验证. <!...由上图我们可以看出,位于css加载语句前的那个js代码先执行了,但是位于css加载语句后面的代码迟迟没有执行,直到css加载完成后,它才执行。这也就说明了,css加载阻塞后面的js语句的执行。...结论 由上所述,我们可以得出以下结论: css加载不会阻塞DOM树的解析 css加载阻塞DOM树的渲染 css加载阻塞后面js语句的执行、 因此,为了避免让用户看到长时间的白屏时间,我们应该尽可能的提高

1.4K20
您找到你想要的搜索结果了吗?
是的
没有找到

css加载会造成阻塞吗?

终于考试完了,今天突然想起来前阵子找实习的时候,今日头条面试官问我,js执行会阻塞DOM树的解析和渲染,那么css加载阻塞DOM树的解析和渲染吗?...可以得知,此时DOM树至少已经解析完成到了h1那里,而此时css还没加载完成,也就说明,css并不会阻塞DOM树的解析。 css加载阻塞DOM树渲染?...由上面的推论,我们可以得出,css加载不会阻塞DOM树解析,但是会阻塞DOM树渲染。那么,css加载会不会阻塞js执行呢? 同样,通过代码来验证. <!...由上图我们可以看出,位于css加载语句前的那个js代码先执行了,但是位于css加载语句后面的代码迟迟没有执行,直到css加载完成后,它才执行。这也就说明了,css加载阻塞后面的js语句的执行。...结论 由上所述,我们可以得出以下结论: css加载不会阻塞DOM树的解析 css加载阻塞DOM树的渲染 css加载阻塞后面js语句的执行、 因此,为了避免让用户看到长时间的白屏时间,我们应该尽可能的提高

1.2K10

Javascript无阻塞加载方法

看了《高性能JavaScript》的读书笔记 几个原则: 1、将脚本放在底部 还是在head中,用以保证在js加载前,能加载出正常显示的页面。 放在前。...2、成组脚本 由于每个标签下载时阻塞页面解析过程,所以限制页面的总数也可以改善性能。适用于内联脚本和外部脚本。 3、非阻塞脚本 等页面完成加载后,再加载js代码。... 内联和外部文件 带defer属性的可出现在文档的任何位置,对应的js文件将在被解析时启动下载,但代码不会执行,直到DOM加载完毕(在onload事件句柄被调用之前...file.js"; document.getElementByTagName_r("head")[0].appendChild(script); 此技术的重点在于:无论在何处启动下载,文件额下载和运行都不会阻塞其他页面处理过程

1.2K80

css是否会阻塞与DOMContentLoaded

原本只是想分享Network的一些内容,结果到DOMContentLoaded的时候给卡住了,网上很多强调css不会阻塞DOM解析,可以说对又可以说不对。...在MDN上面给出了DOMContentLoaded的解释: 当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架的完全加载。...并不是js有操作样式才会使得css阻塞。...大概得出的结论: 浏览器解析DOM的时候,如果没有任何script的脚本,这边指的是没有任何内容,可以有script标签,css是不会阻塞DOM的解析,也符合常见的说法。...当然,也是很想知道DOMContentLoaded和css阻塞的具体原因,希望有研究V8源码的大佬可以给解答解答。 (完)

65610

前端优化--阻塞渲染的CSS

如果我们在 CSS阻塞渲染的情况下尝试渲染一个普通网页会怎样? 默认情况下,CSS 被视为阻塞渲染的资源。 我们可以通过媒体类型和媒体查询将一些 CSS 资源标记为不阻塞渲染。...浏览器会下载所有 CSS 资源,无论阻塞还是不阻塞。 ?...第二个样式表则不然,它只在打印内容时适用 — 或许您想重新安排布局、更改字体等等,因此在网页首次加载时,该样式表不需要阻塞渲染。...第二个声明同样阻塞渲染:“all”是默认类型,如果您不指定任何类型,则隐式设置为“all”。因此,第一个声明和第二个声明实际上是等效的。 第三个声明具有动态媒体查询,将在网页加载时计算。...根据网页加载时设备的方向,portrait.css 可能阻塞渲染,也可能不阻塞渲染。 最后一个声明只在打印网页时应用,因此网页首次在浏览器中加载时,它不会阻塞渲染。

83721

js执行会阻塞DOM树的解析和渲染,那么css加载阻塞DOM树的解析和渲染吗

可以得知,此时DOM树至少已经解析完成到了h1那里,而此时css还没加载完成,也就说明,css并不会阻塞DOM树的解析。 2.css加载阻塞DOM树的渲染吗?...因为你加载css的时候,可能会修改下面DOM节点的样式,如果css加载阻塞DOM树渲染的话,那么当css加载完之后,DOM树可能又得重新重绘或者回流了,这就造成了一些没有必要的损耗。...由上面的推论,我们可以得出,css加载不会阻塞DOM树解析,但是会阻塞DOM树渲染。那么,css加载会不会阻塞js执行呢? 同样,通过代码来验证. <!...这也就说明了,css加载阻塞后面的js语句的执行。详细结果看下图(css加载用了5600+ms): ?....png](/img/bVbf3O2) 结论 由上所述,我们可以得出以下结论: 1.css加载不会阻塞DOM树的解析 2css加载阻塞DOM树的渲染 3css加载阻塞后面js语句的执行、 因此,为了避免让用户看到长时间的白屏时间

2.3K20

CSS到底会不会阻塞页面渲染

可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载阻塞DOM树的解析和渲染吗?接下来,我们就一起来分析一下。 原理解析 那么为什么会出现上面的现象呢?...从流程我们可以看出来 DOM解析和CSS解析是两个并行的进程,所以这也解释了为什么CSS加载不会阻塞DOM的解析。...因此,CSS加载是会阻塞Dom的渲染的。 由于js可能会操作之前的Dom节点和css样式,因此浏览器会维持html中css和js的顺序。因此,样式表会在后面的js执行前先加载执行完毕。...所以css阻塞后面js的执行。 DOMContentLoaded 对于浏览器来说,页面加载主要有两个事件,一个是DOMContentLoaded,另一个是onLoad。...总结 由上所述,我们可以得出以下结论: css加载不会阻塞DOM树的解析 css加载阻塞DOM树的渲染 css加载阻塞后面js语句的执行 因此,为了避免让用户看到长时间的白屏时间,我们应该尽可能的提高

4.3K40

【Webpack】867- Webpack 优化阻塞CSS

现在有很多优化页面的办法,比如:静态资源的合并和压缩,code splitting,DNS预读取等等 本文介绍的是另一种优化方法:首屏阻塞css优化 原理: 首先我们了解一下页面的基本渲染流程 webkit...不但如此,如果css后面有其他javascript,并且css加载时间过长,也会阻塞后面的js执行,因为js可能会操作dom节点或者css样式,所以需要等待render树完成。...内联到html中,并且使用preload和noscript兼容加载非关键css的工具。...rel="preload" as="style"``:用于进行页面预加载,rel="preload"通知浏览器开始获取非关键CSS以供之后用。...其关键在于,preload`不阻塞渲染,无论资源是否加载完成,浏览器都会接着绘制页面。并且,搭配as使用,可以指定将要预加载内容的类型,可以让浏览器: 更精确地优化资源加载优先级。

1.1K20
领券