触发 window.onload 事件时会加载哪些外部资源，资源的加载顺序是什么？答案

【问题标题】：What external resources are loaded when window.onload event is fired and what is the loading order of the resources?触发 window.onload 事件时会加载哪些外部资源，资源的加载顺序是什么？
【发布时间】：2009-01-23 16:49:54
【问题描述】：

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

经过一番搜索，我发现情况并非我通常认为的那样。从这个页面：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>

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

您可能会说资源加载顺序以及何时触发 window.onload 事件取决于浏览器实现，如What is the event precedence in JavaScript? 所述。但我仍然想知道是否有公开的规范或约定。那么，请您向我推荐资源或告诉我事实以消除我的困惑吗？

【问题讨论】：

标签： javascript html browser

【解决方案1】：

查看Cuzillion。它由雅虎绩效团队的 Steve Souders 编写，旨在准确评估这些内容。

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

最后一件事，CSS 是自上而下解释的；无论它们是如何加载的，浏览器都会解释从顶部开始并向下运行的规则。

【讨论】：