js阻塞dom的构建 && CSS通过js来阻塞DOM的构建 && async、defer

已于 2022-04-23 12:53:13 修改
阅读量1.1k 收藏 4
点赞数 1
文章标签： javascript 前端
于 2022-04-21 09:27:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36303110/article/details/124313486
版权
本文探讨JavaScript如何阻塞DOM构建，以及CSS如何通过JS影响DOM构建。CSS加载不会阻塞DOM解析，但可能通过JS阻塞。JavaScript的加载和执行会阻塞DOM解析和渲染。异步加载JavaScript时，defer与async有区别，前者在DOMContentLoaded前执行，后者下载完成后立即执行。浏览器加载ES6模块类似defer，都是异步的。
摘要由CSDN通过智能技术生成

js阻塞dom的构建 && CSS通过js来阻塞DOM的构建

  • JavaScript脚本由于可能会修改DOM，因此会阻塞DOM的构建，这一点我们都知道；而CSS并不会操作或者改变DOM，因此通常我们认为CSS不会影响DOM的构建，只会影响后续的布局、绘制等过程，即会影响DOM的渲染。但其实CSS可以通过JavaScript来阻塞DOM的构建。
    因为JavaScript是可以改变样式的，也就是具有修改CSS规则树的能力，而JavaScript脚本里是否有改变样式的操作，这一点在执行JavaScript之前是不可知的。因此，为保证JavaScript脚本的正确执行，在执行JavaScript之前，CSS规则树必须要先准备好（不然万一有修改CSS的操作呢）。
    也就是说，若在构建DOM的中途存在阻塞DOM构建的JavaScript脚本，而此页面中还包含了外部 CSS 文件的引用，那么此时就需要等目前的CSS规则树（基于目前生成完的部分DOM树）构建完毕后，再开始JavaScript脚本的执行，等一切结束了，再继续DOM的构建。

  • UI线程与JS线程是互斥的，因为JS运行结果会影响到UI线程的结果，当JS线程运行的时候，UI线程处于冻结状态。（现在浏览器可能对某些事件做了特殊处理，比如监听了scroll事件，在滚动时还是能够流畅的播放动画）。

DOM与CSS
  • 没有js的理想情况下，html与css会并行解析，分别生成DOM与CSSOM
    最低0.47元/天 解锁文章
    zvapour
    关注
    浏览器工作原理与实践--DOM树：JavaScript是如何影响DOM树构建的
    echohuangshihuxue的博客
    04-07 908
    从网络传给渲染引擎的HTML文件字节流是无法直接被渲染引擎理解的，所以要将其转化为渲染引擎能够理解的内部结构，这个结构就是DOM。DOM提供了对HTML文档结构化的表述。在渲染引擎中，DOM有三个层面的作用。从页面的视角来看，DOM是生成页面的基础数据结构。从JavaScript脚本视角来看，DOM提供给JavaScript脚本操作的接口，通过这套接口，JavaScript可以对DOM结构进行访问，从而改变文档的结构、样式和内容。
    DOM树：JavaScript是如何影响DOM树构建的？
    lovermeiy的博客
    12-12 323
        沿着网络数据流路径来介绍 DOM 树是怎么生成的。然后再基于 DOM 树的解析流程介绍两块内容：第一个是在解析过程中遇到 JavaScript 脚本，DOM 解析器是如何处理的？第二个是 DOM 解析器是如何处理跨站点资源的？ 什么是 DOM     从网络传给渲染引擎的 HTML 文件字节流是无法直接被渲染引擎理解的，所以要将其转化为渲染引擎能够理解的内部结构，这个结构就是 DOM。在渲染引擎中，DOM 有三个层面的作用。 从页面的视角来看，DOM 是生成页面的基础数据结构。 从 JavaScr
    在JS引入时如何避免阻塞DOM解析
    angry_rooster的博客
    07-19 1024
    在JS引入时避免阻塞HTML文档加载的几种方式 浏览器对HTML文档代码的加载和解析是按代码的编写顺序进行的，如果在浏览器对HTML文档进行加载和解析时，遇到了内嵌在HTML文档中的JavaScript脚本或者对JS脚本进行外部引入的标签，如果不经过任何的处理，浏览器会直接对遇到的JS代码相关内容进行加载和解析，这是会阻塞后续的HTML元素的加载，如果JS代码中的部分代码涉及完整HTML文档中的元素节点操作而此时目标节点并没有加载出来，这会导致代码执行错误。这就需要对JS的加载顺序进行相关处理来避免代码执行
    阻塞DOM
    dengqiu2187的博客
    01-22 84
    DOM是解析后的HTML。 这些阻塞因素我们可以叫做阻塞渲染的资源，例如 HTML、CSS（也包括web font）和 JavaScript。 请注意，图像是不会阻塞渲染的，所以如果有图像落在蓝线之前或之上你可以放心的忽略掉，当然优化图像也是很重要的一项工作。 转载于:https://www.cnblogs.com/GoCircle/p/6340658.html...
    页面加载的过程中，JS 文件是不是一定会阻塞 DOM 和 CSSOM 的构建？
    最新发布
    zz130428的博客
    05-16 867
    JavaScript阻塞DOM和CSSOM的构建的情况主要集中在以下两个方面： JavaScript文件被放置在head标签内部 当JavaScript文件被放置在head标签内部时，浏览器会先加载JavaScript文件并执行它，然后才会继续解析HTML文档。因此，如果JavaScript文件过大或服务器响应时间过长，就会导致页面一直处于等待状态，进而影响DOM和CSSOM的构建。
    JavaScript阻塞DOM树
    blue_go_go的博客
    11-19 879
    DOM 树如何生成 在渲染引擎内部，有一个叫HTML 解析器（HTMLParser）的模块，它的职责就是负责将 HTML 字节流转换为 DOM 结构。 HTML 解析器是等整个 HTML 文档加载完成之后开始解析的，还是随着 HTML 文档边加 载边解析的？ 这个答案就是：HTML 解析器并不是等整个文档加载完成之后再解析的，而是网络 进程加载了多少数据，HTML 解析器便解析多少数据 网络进程接收到响应头之后，会根据响应头中的content-type字段来判断文件的类型，比如content-type的值
    DOM阻塞
    u010780755的博客
    06-30 152
    浏览器缓存 ：cache-control 的max-age设置缓存的时间 框架区域采用的是服务器端渲染，中间页面采用的是vue的单页面应用，客户端渲染，主要框架采用服务器端渲染，速度快，有更好的体验。 1.html下载完成后解析成DOM， 2.css下载完解析成CSSOM(css object model) 3.两者结合生成 render tree 4.生成布局 5.在屏幕上绘制 css不会阻塞dom的解析，css会阻塞渲染生成render tree js会阻塞dom的解析，js下载和执行的时候会停止dom
    JS CSS 如何阻塞页面渲染
    weixin_41571491的博客
    02-12 1225
    原文地址：[https://waynegong.cn/posts/49203.html](https://waynegong.cn/posts/49203.html)TLDR: CSS 和 JS 都会阻塞页面的 关键渲染路径 ，不同情况下阻塞效果不同： 内联 JS 的执行会阻塞 DOM 构建（Layout）； 外部 JS 的加载和执行都会阻塞 DOM 构建； 内联 CSS 的 CSSOM 构建会阻塞渲染树的构建，从而阻塞布局（Layout）； 外部 CSS 的加载和 CSSOM 构建都会阻塞渲染树的...
    前端面试系列-输入url后全过程&&页面渲染机制&&DOM生成过程
    LYFlied的博客
    03-27 1625
    一、当输入url后，全过程 浏览器缓存 (DNS解析)，解析获取相应的IP地址。 cp连接，三次握手。 浏览器向服务器发送http请求，请求数据包。 将数据返回至浏览器 浏览器收到HTTP响应 读取页面内容，浏览器渲染，解析html源码 生成Dom树、解析css样式、js交互 二、页面渲染机制 三、DOM 1.什么是 DOM 2.DOM 树如何生成 HTML 解析器 3.JavaScript 是如何影响 DOM 生成的 内嵌JavaScript 引入 JavaScript 文件 引入css文件
    web前端入门到实战：CSS 与 JS 是这样阻塞 DOM 解析和渲染的
    软件开发-前端开发-IT
    08-21 156
    估计大家都听过，尽量将 CSS 放头部，JS 放底部，这样可以提高页面的性能。然而，为什么呢？大家有考虑过么？很长一段时间，我都是知其然而不知其所以然，强行背下来应付考核当然可以，但实际应用中必然一塌糊涂。因此洗（wang）心（yang）革（bu）面（lao），小结一下最近玩出来的成果。 友情提示，本文也是小白向为主，如果直接想看结论可以拉到最下面看的~ node 端唯一需要解释一下的是这个函数...
    script标签的defer和async ---总结
    昔人'
    05-07 959
    async 与 defer 的差别 async 和 defer 标注的 script 都不会暂停HTML解析就立刻被下载,两者都支持onload事件回调来解决需要该脚本来执行的初始化。 两者的区别在于执行时的不同：async 脚本在script文件下载完成后会立即执行,并且其执行时间一定在 window的load事件触发之前。这意味着多个async脚本很可能不会按其在页面中的出现次序顺序执...
    js和css是如何影响dom树构建的
    yuanwen52的博客
    05-07 406
    浏览器会下载HTML解析页面生成dom数，遇到css标签就开始解析css，这个过程不会阻塞。但是如果遇到了js脚本，此时假如CSSOM还没构建完，需要等待CSSOM构建完，再去执行js脚本，然后再执行dom解析，此时会阻塞。 就是说：js会阻塞dom的生成，而样式文件又会阻塞js的执行。 用如下代码示例来说明：script脚本阻塞了dom的生成，此时CSSOM还没有构建完，需要等待CSSOM构建完，再执行js脚本。 此时dom还没解析完，导致如下代码执行出错（没有查找到该元素） documen..
    js 和 css 是如何影响DOM树构建的？
    CoderBin的博客
    09-28 323
    大家好，我是CoderBinCSS不会阻塞DOM的解析，但是会影响JAVAScript的运行，javaSscript会阻止DOM树的解析，最终css（CSSOM）会影响DOM树的渲染，也可以说最终会影响渲染树的生成。
    javascript原生判断DOM是否加载完毕执行方法
    A-Select °
    06-22 1051
    readyState document.readyState 返回当前文档的状态 属性如下： uninitialized 还未开始加载 loading 加载中 interactive 已加载，文档与用户可以开始交互 complete 加载完成 DOMContentLoaded 当 DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash onload 当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了 根据执行时DOM是否已
    JS延迟加载的几种方式
    热门推荐
    meijory的博客
    07-30 9万+
    JS延迟加载，也就是等页面加载完成之后再加载 JavaScript 文件。一般有以下几种方式：1. defer 属性HTML 4.01 为 <script>标签定义了 defer属性。 用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。在<script> 元素中设置 defer 属性，等于告诉浏览器立即下载，但延迟执行。<!DOCTYPE html>
    浏览器DOM渲染及阻塞问题
    badanjia8818的博客
    08-22 839
    在准备面试，然后复习到了计网的知识点，紧接着又扯到了url从输入到浏览器渲染的那个问题，这里来顺便完善补充一下，本文的重点在渲染 上面的图就是浏览器从服务器请求来页面后渲染的全过程 这里我们分开来看：分为了四大步 解析DOM树和CSSOM 1.HTML标签进行Dom树解析： 在Dom树解析的过程中，遇到link会去...
    JS的异步与加载时间线
    CSH_lucky的博客
    03-11 198
    一、JS同步和异步 1、同步模式：又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续文件的加载、渲染、代码执行（即如果加载到js文件要等到文件加载完成后执行，才能继续执行后面的代码）。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以一般建议把 < script > 标签放在< body&g...
    浏览器的解析渲染原理以及JS、CSS阻塞问题分析
    song854601134的博客
    03-23 1628
    浏览器的解析渲染原理以及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
    优化JavaScript：高效访问与修改DOM策略
    JavaScript下载和执行是阻塞的，因此应尽量将脚本放在文档底部，或者使用async或defer属性异步加载。此外，标签的顺序决定了依赖关系，确保依赖的脚本在前，被依赖的在后。 在函数作用域中，this的值根据调用环境的...
    评论
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

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

    抵扣说明：

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

    余额充值