我有一个网站，它在外部 JS 文件中使用大型 JS 数据存储。 问题是我的网站有时可以运行，有时则不能:/
源代码基本上如下所示:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="data.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
// All HTML code is here //
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
//Another JS code to display data
}
</script>
</body>
</html>
可能是数据文件“data.js”太大，有时加载速度很慢，并且在该数据之前加载了另一个代码。
我认为有时在运行网站后一切都会完美，但有时我在控制台中出现错误，例如“元素后缺少 ] 或“variable1FromDataJS 未定义”，但我确信在此代码中一切都是正确的!
我如何确定我的外部文件 data.js 将作为第一个加载？ (在 JS 代码中，我使用 document.addEventListener("DOMContentLoaded", function(event) { }
或者您认为问题的原因有所不同？
最佳答案
"missing ] after element"和"variable1FromDataJS is not defined"表明您存在脚本错误，导致部分 Javascript 中止执行，因此某些变量和数据未按您的预期定义。
您需要查找并修复这些脚本错误，并且仅当您拥有完全清晰的控制台且未报告任何错误时才能继续。控制台中的所有错误都应该得到充分理解并修复。
现在您已经让我们查看了实际站点，当我查看 Chrome 浏览器中的“网络”选项卡时，我看到 data.js 的下载。 Chrome 中的文件有时会失败并出现此错误 net::ERR_CONTENT_LENGTH_MISMATCH 。它完成了部分或大部分下载，但未成功完成。根据具体失败的位置，您会收到不同的脚本错误。我看不出为什么这会是客户端错误。我认为您的服务器提供 data.js 的方式有问题。我不知道它是否未正确完成请求，或者您的服务器中是否存在并发问题，或者创建 data.js 时是否存在编程错误，但我认为您需要在服务器上修复此问题。
失败时我在 Chrome 日志中看到以下内容:
GET http://maps.890m.com/data.js net::ERR_CONTENT_LENGTH_MISMATCH
<script>页面原始 HTML 中且未标有 defer 的元素或async属性将按照它们在网页中遇到的顺序执行。第二个<script>在第一个标签加载并执行之前，标签不会执行。如果第一个脚本在解析或执行时抛出异常，那么它将被中止，并且行中的下一个脚本将在准备好时执行。但是，由于第一个脚本中止，您期望第一个脚本执行的操作将不会完成。
但是，这种顺序执行脚本标签的结果是，如果 data.js 很大，您不必担心时间问题。它仍然会在任何 <script> 之前加载并执行。执行后出现的标签。
关于javascript - 如何确保外部 JS 代码作为第一个加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28685097/