HTML页面中javascript文件的加载顺序[重复]

Posted 2023-03-10

【中文标题】HTML页面中javascript文件的加载顺序[重复]

【英文标题】：Order of loading of javascript files in an HTML page [duplicate]

【发布时间】：2011-12-11 18:55:47

【问题描述】：

可能重复：javascript Load Order

如果我们在 html 页面的标题中有许多脚本标签，那么它们是否有必要以串行方式呈现，或者它们可以以任何顺序重新呈现。更具体地说，我在 HTML 的头部有脚本标签，它们仅用于加载 .js 文件。现在，如果脚本标签更早出现，是否意味着它将更早呈现，并且在加载当前文件之前不会加载其他 .js 文件。此外，如果我们有两个同名的函数，那么通过将其中一个函数放在脚本标记（内联）中可确保在调用此重复名称函数时仅调用此函数。

谢谢， 杰克

【问题讨论】：

JavaScript 文件和代码按照定义的顺序加载/执行。以后的函数定义将覆盖现有的。

【参考方案1】：

加载java脚本的顺序是顺序

如果您使用将在本地脚本之后加载的任何跨域脚本（在同一域中移动脚本）

尝试将脚本放在 html 之前，否则脚本将覆盖变量

【参考方案2】：

除非设置了async 属性，否则HTML 文档中的<script> 标记将按顺序执行。这是因为他们可以通过调用 document.write 来修改 HTML 文档（包括，例如，添加必须在原始 HTML 文档中的下一个脚本之前加载和执行的其他脚本）。

由于顺序无关紧要，您不应该使用document.write，而是使用 DOM（或使用 DOM 的库），您应该将脚本放在文档的底部。尽管后面的变量赋值（在 JavaScript 中，包括函数定义）会覆盖前者，但建议对函数使用不同的前缀，以免名称冲突，和/或使用私有变量，如下所示：

function f() 
  console.log("do one thing");


(function() 
  function f() 
    console.log("do another thing");
  
  f(); // prints "another"
)();

// The "another" function is not visible here.