确保首先运行 Javascript 脚本?
我注意到某些脚本似乎在某个页面上的其他脚本之前被调用,我想知道脚本加载的具体顺序是什么?在引用 .js 脚本之前的页内?它们是按照从页面中提到的第一个 到最后一个的顺序运行的,还是这取决于浏览器?如何确保特定脚本首先在页面中运行?
I've noticed some scripts seem to be called before others on a certain page, I was wondering, what is the specific order for scripts to load? In-page before referenced .js scripts? Are they run in order from first <script>
mentioned to last in page, or Is this browser-dependent? How can one make sure that a specific script is first to run in a page?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
只要没有动态加载脚本或将脚本标记为异步或延迟,脚本就会按照页面中遇到的顺序运行或评估。因此,首先运行遇到的第一个脚本。
必须加载的外部引用的脚本文件将导致所有进一步的 javascript 执行等待,直到该外部引用的文件被加载、解析并运行。
因此,普通(非异步、非延迟)JavaScript 的评估顺序 100% 确定为页面中遇到的顺序。
As long as no scripts are dynamically loaded or marked as async or defer, scripts are run or evaluated in the order encountered in the page. So, the first scripts encountered run first.
An externally referenced script file that must be loaded will cause all further javascript execution to wait until that externally referenced file is loaded and parsed and runs.
So, the evaluation order of normal (non-async, non-defer) javascript is 100% determinate as the order it is encountered in the page.
这是由 W3C 在其语言规范中规定的。例如,对于 HTML 4.01 规范,它是在 第 18.2.4 节文档的动态修改,第 1 项。
见上文。不,内联脚本和链接脚本的处理方式相同。
规范要求它们从上到下按顺序运行。您必须找到一个根据规范实现该语言的浏览器。我现在想不出任何以不同方式处理 SCRIPT 标签的方法,但我确信这是可能的。
另一件需要考虑的事情是“运行”的定义。这听起来像是语义解析,但事实并非如此。 JavaScript 与任何编程语言一样,其本身就是按照标准设计的。 JavaScript 在 ECMA-262 5.1 版 / 2011 年 6 月中指定标准在第 7 节词汇约定中从左到右进行评估。 (行结尾被视为下一行最左边的字符。)本文档还提供了语句和其他操作(例如 WHILE 或 FOR 语句)的计算顺序约定。
(1) 将其放在顶部,(2) 选择实现该语言规范的浏览器。
然而,我觉得这个问题背后可能还有更多的东西。如果您试图阻止意外代码的执行,则必须阻止它,直到 ONLOAD 事件处理程序注册页面已完成。 (只需将您的操作包含在一个函数中或用 IF 包围它们来检查布尔标志,即 isLoaded 被 ONLOAD 设置为 true。)然后,当 ONLOAD 事件处理程序触发时,您可以按照自己的计划启动操作,而无需不必担心诸如未实例化的 DOM 对象之类的事情。
This is set by W3C in their language specifications. For the HTML 4.01 Specification, for instance, it's defined in Section 18.2.4 Dynamic modification of documents, item 1.
See above. No, inline and linked scripts are handled identically.
The specifications call for them to be run sequentially from top to bottom. You'll have to find a browser that implements the language according to specification. I can't think of any right now that handle SCRIPT tags differently, but I'm sure that is possible.
Another thing to consider is the definition of "run." That may sound like semantic parsing, but it's not. JavaScript, like any programming language, is itself designed to behave according to standards. JavaScript is specified in the ECMA-262 5.1 Edition / June 2011 standard to evaluate from left-to-right in Section 7 Lexical Conventions. (Line endings are treated as the left-most character of the next line.) This document also provides conventions for the order in which statements and other operations are evaluated, such as WHILE or FOR statements.
(1) Put it at the top, and (2) choose a browser that implements the language specification.
However, I feel there may be something more behind this question. If you're trying to stop unexpected code from executing, you'll have to block it until the ONLOAD event handler registers that the page is complete. (Simply enclose your operations in a function or surround them with an IF to check for a boolean flag, i.e. isLoaded being set true by ONLOAD.) Then, when the ONLOAD event handler fires off, you can kick off operations on your own schedule without having to worry about things like uninstantiated DOM objects.
默认情况下,
script
标记会按照在 HTML 文档中遇到的顺序进行下载和评估。但是,如果您使用
async
或defer
属性,则执行会在脚本完成下载(异步)后或页面加载完成后(延迟)发生。By default,
script
tags are downloaded and evaluated sequentially as they are encountered in an HTML document.However if you use the
async
ordefer
attributes, the execution happens either after the script finishes downloading (async) or after the page is done loading (defer).脚本按照它们在 html 文件中的计算顺序运行,就像您从上到下阅读它一样。
但是,对于已实现这些功能的浏览器,异步和延迟可以覆盖此设置。
Scripts are run in the order they are evaluated in the html file, just as you would read it from the top down.
However, async and defer can override this for browsers that have those implemented.