延迟加载Javascript文件与之前放置之间的任何差异</body>

Question

环顾四周，未能找到这个具体问题进行讨论。 很确定差异可以忽略不计，只是对你的想法感到好奇。

场景：在结束</body>标记之前放置了在页面渲染之前不需要加载的所有Javascript。 是否通过在DOM加载/就绪事件被触发时执行的头部中的一些Javascript代码对延迟加载有什么好处或不利？ 假设这只涉及下载一个完整函数的整个.js文件，而不是在使用时根据需要延迟加载几个单独的文件。

希望很清楚，谢谢。

Answer 1

在我看来，有很大的不同。

当你在<body>标签的底部内联JS时，你强迫页面同步加载那些<script> （现在必须发生）和顺序加载（连续），这样你就会减慢页面的速度有点，因为你必须等待那些HTTP调用完成，JS引擎才能解释你的脚本。如果你把大量的JS堆叠在一起放在页面底部，你可能会浪费用户的网络排队时间（在旧浏览器中，每次只有2个连接），因为脚本可能相互依赖，所以必须按顺序下载。

如果你希望你的DOM准备得更快（通常是大多数等待任何事件处理和动画），你必须尽可能少地减少所需脚本的大小并将它们并行化。

例如，YUI3具有较小的依赖关系解析和下载脚本，您必须在页面中按顺序加载（请参阅YUI3的seed.js）。 之后，您浏览页面并收集依赖项，并对其CDN（或您自己的服务器）进行1次异步和流水线调用，以获得JS的重要性。 返回JS球后，您的脚本会执行您提供的回调。 这是一般模式：

<script src="seed.js"></script>
<script>

    YUI().use('module', function(Y) {
        // done when the ball returns and is interpretted
    });

</script>

我不是特别喜欢将你的脚本放入一个大球（因为如果1个依赖项改变了，你必须重新下载并解释整个事情！），但我是管道衬里的粉丝（结合脚本）和基于事件的模型。

当您允许基于事件的异步加载时，您可以获得更好的性能，但可能没有感知性能（尽管可以抵消）。

例如，页面的某些部分可能无法加载一两秒，因此看起来不同（如果您使用JS影响页面样式，我不建议）或者没有为用户交互做好准备，直到您（或托管您网站的人）返回您的脚本。

此外，您必须做一些工作以确保您的<script>具有正确的依赖关系才能正确执行。 例如，如果您没有jQuery或Prototype，则无法成功调用：

<script>

    $(function () {
        /* do something */
    });

</script>

要么

<script>

    document.observe('dom:loaded', function {
        /* do something */
    });

</script>

因为译者会说“变量$ undefined”。 即使你同时将两个<script>添加到DOM 中也会发生这种情况，因为我认为jQuery或Prototype比你应用程序的JS更大（因此对数据的请求需要更长时间）。 无论哪种方式，没有某种限制，你都可以把它留给机会。

所以，选择取决于你。 如果你可以正确地分割你的依赖关系 - 即把你需要的东西放在前面并且稍后懒洋洋地加载其他东西，它将导致更快的总体时间，直到你准备好DOM。

但是，如果你使用的单片库如jQuery或用户希望能够看到涉及JS动画或风格马上东西，内联可能是你更好。

Answer 2

在可用性方面，你绝对不应该对用户期望快速响应的任何事情做这件事，比如除了它的其他功能之外，按钮作为加载触发器执行双重任务。

当用户滚动时，OTOH 用连续加载页面取代分页是一个非常好的主意。 当负载触发器朝向页面末端时，我确实发现它分散了注意力，最好将它放在1/2到3/4的位置。

延迟加载Javascript文件与之前放置之间的任何差异</body>

问题描述

2 个解决方案

解决方案1
8 已采纳 2010-05-25 02:10:31

解决方案2
0 2010-05-25 00:50:24

延迟加载Javascript文件与之前放置之间的任何差异</body>

问题描述

2 个解决方案

解决方案1 8 已采纳 2010-05-25 02:10:31

解决方案2 0 2010-05-25 00:50:24

解决方案1
8 已采纳 2010-05-25 02:10:31

解决方案2
0 2010-05-25 00:50:24