HTML 中引入 JS 文件，如何确保文件加载完成后再执行方法？

说实话，当我第一次接一个老项目时，我对脚本加载顺序有很大的损失。
那时，页面加载速度非常缓慢。
我检查的时候发现，正文的末尾直接放置了一个厚重的脚本。
结果，整个页面的渲染被暂停了很长时间。
这给我对JS加载留下了难忘的印象。

我最常使用的确保JS在执行前加载的方法是实际动态加载脚本。
我记得在《JavaScript 权威指南》中看到过一个例子，它描述了一种编写动态注入脚本的优雅方法。
代码如下：
javascript 函数 loadScript(url, 回调) { const script = document.createElement('script'); 脚本.src = URL; script.onload = 回调; 脚本.onerror = 函数() { console.error('加载脚本失败：', url); }; document.head.appendChild(脚本); }
loadScript('https://cdn.example.com/lib.js', function() { console.log('脚本加载完成'); 初始化映射（）； });
这种方法的优点是可以精确控制执行时间。
我有一个项目，我需要首先加载地图 API，然后初始化地图。
当时我就用这个方法来确保加载顺序是完美的。
但我应该注意到，然后我踩到了一个陷阱，忘记添加错误回调。
结果，当脚本4 04 发生时，整个应用程序停止了，让用户认为服务器出现了问题。

defer属性其实还是挺强大的，特别是对于配置文件这样需要按顺序执行的场景。
上次我们重建后端管理系统时，我们将所有依赖项写入延迟脚本中，并看到页面渲染速度有了明显的提高。
然而，一个问题是，即使 defer 脚本按顺序执行，它也会在 DOM 解析完成之前运行，因此依赖 DOM 的操作需要添加自己的监听器。

我很少使用异步属性，但它确实有效。
我记得当时加载了一个不依赖任何其他 JS 的统计脚本。
我使用异步是因为我只是想让它运行得更快。
发现统计脚本运行无序，导致报告数据不正确。
这帮助我理解异步是一把双刃剑，如果使用不当可能会导致大问题。

最让我头疼的是动态脚本加载的兼容性问题。
我有一个支持 IE1 1 的项目。
我使用 fetch API 动态加载脚本，但发现它直接使旧版浏览器崩溃。
我们后来切换到 XMLHttpRequest 并在完成之前添加了很多降级处理。
所以在选择方法时，首先应该看看你的用户群使用什么浏览器。

最终，没有什么灵丹妙药。
简单场景使用 defer，复杂依赖使用动态加载，DOM 操作使用 DOMContentLoaded。
如果需要使用异步，请添加监听器来检查执行情况。
当时我写了一个小工具，涵盖了所有场景。
现在，对于新项目，您可以直接复制代码，节省大量精力。

html中script标签的作用 html中script引入js的方式

哎呀，让我告诉你这个 [xss_clean] 标签。
我已经使用这个产品十多年了，遇到了很多陷阱。
看看我的笔记。
是相当全面的。

前年，我在北京搭建一个电子商务网站。
刚开始时，我自己在 [xss_clean] 中编写了以下所有代码：
<脚本> console.log("直接插入JavaScript代码"); </脚本>
起初我认为这很棒，因为我不再需要担心外部文件。
所以，后来有了几百个页面，一旦代码太多，HTML就变得一团糟，要花很长时间才能改任何东西。
后来学习了，把所有共享的功能都放到了utils.js中。
以下是引用：
[xss_clean][xss_clean]
就在那时我意识到这个外部脚本是一个救星！想一想。
该项目有几十个页面都使用相同的 utils.js，浏览器会缓存它们。
当用户稍后访问另一个页面时，它会以闪电般的速度加载到 Flash 中。

去年我在上海参与了另一个项目。
这是一个包含大量脚本的大型项目。
我将所有 [xss_clean] 标记放在 <body> 标记关闭之前，如下所示：
<文字> <!-
其他 HTML 内容 --> [xss_clean][xss_clean] </正文>
这样，浏览器先完成HTML内容，然后执行脚本，减少了出现bug的机会。
我们也经常使用 defer 属性。
例如，如果您有一个依赖于另一个脚本的脚本，您可以这样编写：
[xss_clean][xss_clean] [xss_clean][xss_clean]
确保在运行 script2 之前执行 script1 如果异步写入，则无法保证顺序。
这取决于您的浏览器加载速度。
嗯，这取决于。

哦，对了，type属性以前是text/javascript，现在已经不再使用了，所以浏览器将其设置为默认值。
如果你写一些像 TypeScript 这样的东西，它就会变得非常清晰。

[xss_clean][xss_clean]
简单来说，对于[xss_clean]标签，简单标签使用inline，复杂标签使用external。
请注意装载顺序。
否则，如果一个依赖没有完成，就会报所有错误。
在过去的1 0年里，我在这方面遇到了很多麻烦。
现在，当您编写代码时，您需要首先考虑依赖关系。