CSS和js在浏览器的一个解析顺序和相互影响（阻塞）

最新推荐文章于 2024-04-13 17:56:13 发布
转载 最新推荐文章于 2024-04-13 17:56:13 发布 · 513 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://juejin.cn/post/6973949865130885157
文章标签：

#javascript #前端 #css

本文详细探讨了CSS和JS在网页加载过程中的作用机制。CSS虽然不会阻止DOM解析，但会延迟DOM渲染；而JS则会阻塞DOM解析。此外，文章还分析了不同情况下CSS与JS之间的相互影响及特殊现象。

结论：CSS不会阻塞DOM解析，但是会阻塞DOM渲染，严谨一点则是CSS会阻塞render tree的生成，进而会阻塞DOM的渲染

   JS会阻塞DOM解析

   CSS会阻塞JS的执行

         浏览器遇到<script>标签且没有defer或async属性时会触发页面渲染

   Body内部的外链CSS较为特殊，会形成FOUC现象，请慎用

来源详情：关于 JS 与 CSS 是否阻塞 DOM 的渲染和解析 - 掘金

a_alin
关注
浏览器的解析渲染原理以及JS、CSS阻塞问题分析
song854601134的博客
03-23 2392
浏览器的解析渲染原理以及JS、CSS阻塞问题分析 输入Url地址按下回车发生了什么？ 1：根据网址进行DNS解析，将相应的域名解析为IP地址 2：客户端根据IP地址去寻找对应的服务器并进行TCP三次握手，建立TCP连接 3：客户端发起HTTP请求，请求对应资源 4：服务器响应并返回相应数据（如：HTML文件） 5：浏览器将获取的HTML文档由HTML解析器解析成DOM树 6：同时由CSS解析器将CSS样式解析成CSS Rule Tree（CSS规则树） 7：将生成的DOM树和CSS规则树合并生成Render
浏览器渲染顺序
Absurd_people的博客
08-31 1071
原文连接：https://blog.youkuaiyun.com/weixin_45820444/article/details/109013996 原文连接：https://blog.youkuaiyun.com/qq_39669807/article/details/89388014
css、js的相互阻塞
weixin_30569153的博客
05-31 157
先决条件：脚本前面存在外部样式 以下试验虽然是在chrome下，但是对于IE8+以及其他浏览器也适用。 1、内联脚本（http://jsbin.com/mudab/1） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin&l...
css会阻塞js的加载,js与css的阻塞问题详析
weixin_32026659的博客
08-04 1790
目录DOMContentLoaded和loadjs 阻塞了什么css 阻塞了什么优化总结DOMContentLoaded和load我们先了解两个事件，有助于后面的分析。load事件：load 应该仅用于检测一个完全加载的页面 当一个资源及其依赖资源已完成加载时，将触发load事件。也就是说，页面的html、css、js、图片等资源都已经加载完之后才会触发 load 事件。DOMContentLoa...
万恶的CSS 影响JS的执行....
极度热爱JAVA_小于
01-09 477
今天在在前线的通知反馈论坛的编辑器不能用了，测试的时候没有发现问题，经过分析发现在当帖子回复多的情况下回出现编辑器不显示..................  纯正文能影响js的初始化。。。。。。很是不解！但是刷新几下就能显示了..........我顶，更迷茫了？          具体情况是 先加载 ①正文css/js-->②正文内容--->③回复内容--->④编辑器的css/js-->⑤编辑
浏览器加载、渲染和解析过程黑箱简析
09-05
在理解浏览器加载、渲染和解析过程时，首先我们要知道这是一个复杂且高度优化的过程，涉及到了多个步骤和机制。浏览器的主要任务是将HTML、CSS和JavaScript等资源转化为用户可见的网页。下面我们将详细探讨这些过程...
浏览器解析顺序和解码顺序
最新发布
04-03
### 浏览器解析和解码顺序 #### HTML 解析 浏览器在接收到服务器返回的 HTML 文件后，会立即开始解析。HTML 是按顺序从上到下逐步解析的，在此过程中如果遇到外部资源（如 CSS 或 JavaScript），其行为取决于资源...
详解关于html，css，js三者的加载顺序问题
10-17
这种行为被称为JavaScript的“阻塞效应”，它会导致页面加载时间变长，用户可能会在看到一个空白页面时感到困惑和沮丧。为了避免这种情况，开发者通常会在JavaScript代码的开始处使用$(document).ready()、window....
浏览器对html、 js、css的解析先后顺序
qq_39004843的博客
03-01 893
1、总的来说就是按照html文档的顺序加载 2、还有就是最好将无论内部或是外部JS文件放到所有html内容之后，这样会令用户感觉页面加载速度变快了，否则如果将所有外部文件（包括css和JS）引用都放到中，意味着必须等到全部的JS代码都被下载解析和执行完毕后，才能开始呈现页面的内容（当浏览器遇到）,这样会导致呈现页面时出现明显的延迟，二延迟期间的浏览器窗口将是一片空白。 浏览器载入HTML、CSS、JS文件的加载顺序及执行情况 ...
js和css会不会阻塞页面渲染？
qq_44318215的博客
06-27 2586
link 标签是同步加载还是异步加载？ js 是同步加载还是异步加载？ 它们会阻塞页面的渲染吗？
关于 JS 与 CSS 是否阻塞 DOM 的渲染和解析
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
06-23 359
点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群最近系统梳理HTML5所有涉及到的标签时，梳理至<link>和<script>标签时，碰巧想...
【知识点】你知道CSS 与 JS 是否会阻塞 DOM 解析和渲染吗？(1)
dgayuiafahf的博客
04-13 712
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处获取。[外链图片转存中…(img-cA3DkMJt-1713002111812)]由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处获取。
CSS定位属性之间的相互作用
whqet
10-28 2833
来看下CSS标布局情况下，定位相关属性之间的相互作用。
[css] css的加载会阻塞js运行吗？为什么？
歌谣的博客
01-28 1284
[css] css的加载会阻塞js运行吗？为什么？ 会阻塞js的执行，因为js可能会去获取或改变元素的样式，所以浏览为了不重复渲染， 等所有的css加载渲染完成后在执行js 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
CSS和JS对DOM解析和渲染的影响
yizao19971102的博客
07-01 573
结论： （1）CSS不会阻止DOM解析，但会阻塞DOM渲染 （2）JS会阻塞DOM的解析和渲染 （3）CSS会阻塞JS的执行 1、CSS 对 DOM 的影响 了解浏览器的解析渲染过程：先解析 DOM 形成 DOM 树；然后解析 CSS 形成 CSS树；然后 DOM 树和 CSS 树合并形成渲染树，再渲染生成页面。 ① 由于 DOM 解析和 CSS解析是分开的，因此 CSS 文件不会阻塞 DOM 解析； ② 页面渲染需要 DOM 树和 CSS 树相结合，因此 CSS文件会阻塞...
第12天 css加载会阻塞js运行吗？
qq_36529240的博客
12-16 988
1.css加载会阻塞后面js的运行 2.css加载不会阻塞DOM的解析，但是会阻塞DOM的渲染 --> 考虑到css可能会修改DOM的样式，从而引起回流或重绘，所以先加载完css，再对DOM进行渲染，减少不必要的性能损耗 3.提高css加载速度的方式： CDN 压缩css文件 合理使用缓存 合并css文件 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值