html渲染成图片（记录–什么时候会阻塞HTML文档渲染过程？）
时间2025-06-20 00:48:55分类IT科技浏览3915
导读：这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助...
这里给大家分享我在网上总结出来的一些知识 ，希望对大家有所帮助
由于html文件的加载自上而下的 ，所以不管传入的脚本script是代码还是链接 ，都是先写先加载 ，可能我们会问问什么style没有加载 ，不是没有加载 ，而是已经解析并加载了 ，因为对css进行解析会生成cssom规则树 ，然后需要结合DOM树构建渲染树 ，而我们的dom元素是命名在body标签中定义 ，由于当前解析的是head标签 ，这阶段还没有渲染dom ，所以一般在html中操作dom的时机都是在body中的 。
在上面例子 ，我们有没有发现在解析html文档过程中 ，但执行script脚本之前是不是有一段时间在加载 ，其实是在加载link资源 ，也就是css资源 ，等css资源执行完毕后才会执行后面script ，这就是CSS阻塞 ，这里阻塞了其后面的js语句的执行 。
而style标签引入的样式是不会阻塞浏览器渲染也不会阻塞DOM解析 ，但是可能会出现闪屏现象（使用transition动画时） 。 上面只是在head标签中引入样式 ，如果是在body标签中引入样式 ，css是否也会阻塞？
在link引入前后定义DOM元素：css加载会阻塞后面DOM元素的渲染 ，以及前面元素的css样式渲染 。
<body>
<button class="btn btn-primary">test1</button>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css">
<div>test2</div>
</body>
在link引入前后引入脚本：在link引入样式前执行脚本 ，在link引入样式后执行版本 ，我们会发现link会阻塞后面脚本的执行 ，需要等css资源加载完毕才会执行 。
我们都知道在html中加载资源除了css ，还有js资源加载 ，既然看了有CSS资源加载阻塞 ，是不是也有js阻塞？是的 ，script引入与使用分为两种方式：head中引入 、body中引入 。
在head标签中引入script：如果是head中引入脚本是不能直接操作DOM渲染 ，因为DOM还没有加载与渲染 。那么有办法可以解决吗？其实是有的 ，使用defer（延迟执行 ，等DOM解析完成再执行JS脚本）和async（异步执行 ，保证DOM树和JS脚本并行执行） 。
<head>
<script src="https://www.cnblogs.com/smileZAZ/archive/2023/02/20/a.js" defer></script>
<script src="https://www.cnblogs.com/smileZAZ/archive/2023/02/20/a.js" async></script>
</head>
在body标签中引入script： 当引入的script脚本后下载并解析完成后 ，才去加载后面DOM元素 ，但是script脚本不会影响脚本执行前的DOM元素渲染 。所以一般把所有脚本都会丢到</body>前 。
<body>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<div>test</div>
</body>
所以一般是把引入式（链接）放在head标签内 ，内联式一般是放在body内 。
本文转载于:
https://juejin.cn/post/7199994978977120316
如果对您有所帮助 ，欢迎您点个关注 ，我会定时更新技术文档 ，大家一起讨论学习 ，一起进步 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！
