浏览器何时执行Javascript？执行光标如何移动？

小编典典

浏览器何时执行Javascript？执行光标如何移动？

ajax

我想知道是否有任何可用资源描述浏览器的光标如何执行Javascript。

我知道它会在页面加载时加载并执行标签，并且您可以将函数附加到各种窗口事件，但是事情变得模糊的是，例如，当我通过AJAX检索远程页面并将其内容放入div中时。

如果该远程页面必须加载脚本库（例如）<script src="anotherscript.js" />，则何时加载“
anotherscript.js”并执行其内容？

如果我在当前页面上包含“ anotherscript.js”，然后加载一些包含此脚本重复内容的远程内容，会发生什么情况？它会覆盖原始的吗？如果原始的“
anotherscript.js”中包含一个我更改了值的变量，然后重新加载该文件怎么办…我会丢失原始值还是忽略了该脚本的第二个包含项？

如果我通过AJAX加载了一些过程性Javascript，则何时执行？我之后马上做mydiv.innerHTML(remoteContent)？还是在此之前执行？

阅读 246

2020-07-26

共1个答案

小编典典

答案取决于script标记的位置以及添加方式：

与标记内联的脚本标签与浏览器对该标记的处理同步执行（请参阅＃2除外），因此，例如，如果这些标签引用外部文件，则它们会减慢页面的处理速度。（这样浏览器可以处理document.write语句，这些语句可以更改正在处理的标记。）
defer在某些浏览器中，只有在完全呈现DOM之后，才会执行具有属性的脚本标签。这些自然无法使用document.write。（类似地，有一个async使脚本异步的属性，但是我对其了解不多，也不了解它的支持程度；细节）。
在DOM加载（通过innerHTML和类似）之后分配给元素的内容中的脚本标签根本不会执行，除非您使用jQuery或Prototype之类的库来帮您做。 （除了Andy E指出的一个例外：在IE上，如果它们具有defer属性，它将执行它们。在其他浏览器中不起作用。）
如果您通过将实际script元素添加到文档中Element#appendChild，浏览器将立即开始下载该脚本，并在下载完成后立即执行该脚本。以这种方式添加的脚本不能同步执行，也不必按顺序执行。首先附加一个<script type="text/javascript" src="MyFct.js"></script>，然后附加<script type="text/javascript">myFunction();</script>可以很好地在远程（第一个）之前执行内联（第二个）。如果发生这种情况并MyFct.js声明myFunction()，则当我们尝试将其与内联脚本一起使用时将不会对其进行定义。如果您需要按顺序完成工作，则可以通过观看所添加元素上的load和readyStateChange事件script（load大多数浏览器中的事件，readyStateChange 在某些版本的IE中，某些浏览器会同时使用这两种方法，因此您必须处理同一脚本的多个通知）。
<a href='#' onclick='myNiftyJavaScript();'>当相关事件发生时，将在属性（）而非脚本标记中的事件处理程序中执行脚本。

我在我的真正的工作在外打工，突然我的后脑说：“你知道，你一直在说，如果你将它们分配给它们不会被执行innerHTML，但你有没有亲自检查？”
而且我没有，所以我做到了-FWIW：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Script Test Page</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
</style>
<script type='text/javascript'>
function addScript()
{
    var str, div;

    div = document.getElementById('target');
    str = "Content added<" + "script type='text/javascript'>alert('hi there')<" + "/" + "script>";
    alert("About to add:" + str);
    div.innerHTML = str;
    alert("Done adding script");
}
</script>
</head>
<body><div>
<input type='button' value='Go' onclick='addScript();'>
<div id='target'></div>
</div></body>
</html>

脚本的警报没有出现在IE7，FF3.6或Chrome4上（我没有费心检查其他对象，我的意思是：:)）。如果追加要素如图所示，而在这里，脚本被执行。

2020-07-26