Question

由于单个网页可能包含大量外部资源：外部javascript，外部css，图像，小程序，flash等，通常我的传统智慧告诉我，当所有链接资源都是时，会触发window.onload事件完成下载（尽管外部资源通常由浏览器的实现下载到多个线程或进程中）。通常的情况可能在大多数时间都有效。但是......如果加载序列不是我认为理所当然的话，那么一些javascript bug可能会在某个地方蔓延。

在做了一些搜索后，我发现事实并非如此。从这个页面：https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html，似乎在onload事件被触发时没有加载图像。但是从这里window.onload vs <body onload=""/>，我觉得在onload被触发时会加载图像。通过这个链接http://forums.mozillazine.org/viewtopic.php?f=25&t=413504&start=0&st=0&sk=t&sd=a让我更加困惑。

所以问题的第一部分是：当window.onload被触发时，是否所有资源都被加载了？

问题的另一个密切相关的部分是：在触发window.onload之前，资源加载顺序是什么？我知道内部资源，如内部javascript或css，加载顺序是从页面顶部到底部（除非在IE中，使用延迟脚本，如此处所说Getting notified when the page DOM has loaded (but before window.onload)）。但是外部javascript和css资源呢？例如，如果我像这样写我的页面：

 <external stylesheet...>
 <external javascript #1...>
 <external javascript #2...>
 <script>
  .....
  window.onload=....
  </script>

然后假设“外部javascript＃2”中的函数调用“外部javascript＃1”中的函数，我能确定它总是有效吗？另外如果window.onload调用“外部javascript＃1”中的函数也可以按预期工作吗？

您可以说资源加载顺序以及何时触发window.onload事件取决于浏览器实现，如此处What is the event precedence in JavaScript?所述。但我仍然想知道公众是否有规范或惯例。那么请你转介我的资源或告诉我事实以清除我的困惑？

Answer 1

结帐Cuzillion。它由雅虎表现团队的史蒂夫·索德斯（Steve Souders）撰写，用于评估这些事情。

归结为：浏览器按照文档中遇到的顺序加载脚本，并在下载每个脚本时停止所有其他加载。其他资源（css / images）是异步加载的，您无法确定它们何时完成。

加载文档及其脚本/样式/图像资源时会触发onload事件，但如果在加载页面时正在执行任何javascript，则可能不想等待图像。相反，使用类似jQuery的“ready”事件或通过在正文的末尾放置一个脚本标记来激活您自己的“DOMReady”事件：

<body>
    <!-- your page contents here -->
    <script type="text/javascript">
        // DOM is ready, do scripty stuff now
        DOMReady();
    </script>
</body>

Answer 2

在onload触发之前加载脚本资源。但是，imgs以惰性异步方式加载，不一定按文档中列出的顺序加载。

我至少在IE上发现并非所有DOM元素属性都在加载时正确计算（例如，客户端和偏移量大小在它们应该有值时仍然可以为0）。

Answer 3

您提供的SO链接有点误导; body onload和window onload都调用相同的EVENTS，但事件不会同时触发。 Window.onload将以第一个资源解释的方式在body onload之前触发。

出于解释原因，浏览器会串行请求javascript资源，因为它们可以并行请求其他所有内容。这就是为什么有时你会加载一个页面，图像将无序加载，而javascript，除了你所指导的情况，按顺序加载。所以是的，资源将被加载。

此外，浏览器首先评估js函数，因此在显式定义之前调用函数不应该有任何问题。但是，这不适用于变量。

最后一件事，CSS被自上而下解释;无论它们如何加载，浏览器都会从顶部开始解释规则并逐步解决。

触发window.onload事件时加载了哪些外部资源以及资源的加载顺序是什么？

3 个答案: