前端小菜鸡拾夕 —— Script 动态加载和移除-优快云博客

本文链接：https://blog.youkuaiyun.com/Kofe_Chen/article/details/106843317

本文介绍了前端开发中关于`script`标签的动态插入和删除方法，以及JS全阻塞和CSS半阻塞的原理。在DOM解析过程中，JS会阻塞后续资源加载，而CSS仅阻塞DOM的渲染呈现，不影响图片等资源加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端小菜鸡重拾之路

script 标签的插入和删除

插入

原生 JS

var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
// or script.type = "text/javascript"
script.setAttribute("src", "...");
// or script.src = "..."
var head = document.getElementsByTagName("head");
head[0].appendChild(script)
// or document.body.appendChild(script)

在 head 添加之前也可以先判断一下 head 是否存在 if (head.length)

jquery

$("head").append("<script type="text/javascript" src="..."></script>")
// or $("body").append("<script type="text/javascript" src="..."></script>")

删除

var scriptList = document.getElementsByTagName("script")
for(var script of scriptList) {
  script.parentNode.removeChild(script)
}

这里只是一个遍历全部删除操作，如果有需要删除某一个的话，需要自行加入逻辑
核心就是 script.parentNode.removeChild(script)

JS 全阻塞 / CSS 半阻塞

JS 会阻塞后续的 DOM 解析以及其他资源（如：CSS、JS 或图片资源）的加载

CSS 不阻塞 DOM 加载和解析（只阻塞 DOM 的渲染呈现），不会阻塞其他资源（如：图片）的加载，但是会阻塞后续 JS 的执行。原因之一是：JS 执行带么可能会依赖到 CSS 样式，CSS 只阻塞执行而不阻塞 JS 加载/