Question

我有一个像这样的html页面：

<!DOCTYPE HTML>
<html style="width: 100%; height: 100%">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
    </style>
</head>
<body style="height: 100%; width: 100%; margin: 0">
    <div id="outerParentDiv" style="width:100%; height: 100%;">  
    </div>
    <script src="<script1 - takes very long to download>">
     alert('hi1');
    </script>
    <script src="<script2 - takes very short to download>">
      alert('hi2');
    </script>
</body>
</html>

我可以假设流程是 - 下载脚本1＆gt;＆gt;执行警报（'hi1'）＆gt;＆gt;下载脚本2＆gt;＆gt;执行警报（'hi2'）或者是浏览器特定的 - 如果是，哪些浏览器可以做什么？

由于

Answer 1

浏览器很可能并行下载这两个脚本（除非已经缓存了任何一个脚本），但保证执行顺序正常。此外，在脚本完成加载和执行之前，脚本后面的页面部分不会成为脚本的一部分。这可以确保您可以安全地在代码中包含库，并期望在主脚本运行时它们存在。

如前所述，您不应将script标记同时用于src和自己的内容。

<script src = "http://path.to.a.cdn/jquery-latest.min.js"></script>
<script>
  $(function(){
    ...
  })
</script>

您可以使用async或defer属性覆盖此行为。

async html5

设置此布尔属性以指示浏览器应尽可能异步执行脚本。它对内联脚本（即没有src属性的脚本）没有影响。

延迟

此布尔属性设置为向浏览器指示在解析文档后要执行脚本。由于所有其他主流浏览器尚未实现此功能，因此作者不应假设脚本的执行实际上将被延迟。永远不要从document.write()脚本调用defer（因为Gecko 1.9.2，这会吹走文档）。不应在没有src属性的脚本上使用defer属性。

在IE 10之前，这两个属性都不适用于IE，所以不要依赖脚本不按顺序执行。

兼容性表：async; defer

参考：https://developer.mozilla.org/en/docs/Web/HTML/Element/script

Answer 2

这是正确的。默认情况下，浏览器逐行解释HTML源代码。但是，某些浏览器配置可能会同时发送多个HTTP请求（已编辑），但保证代码中打印的执行顺序。

Answer 3

不要在<script>和src之间使用<script ...>属性和内容</script>。这可能导致不可预测的结果。请参阅this question and its answers。

关于html <script> </script>中的控制流序列

3 个答案:

async html5

延迟