Question

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

场景：在页面渲染之前不需要加载的所有Javascript都放在结束</body>标记之前。是否通过在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>

因为解释器会说“Variable $ undefined”。即使你同时将<script>添加到DOM ，也会发生这种情况，因为我认为jQuery或Prototype比你应用程序的JS更大（所以对数据的请求需要更长时间）。无论哪种方式，如果没有某种限制，你就会把它留给机会。

所以，选择取决于你。如果你能正确地细分您的依赖 - 即把东西你需要前面懒洋洋地加载其他的东西后，它会导致更快的整体时间，直到你打的DOM准备好

不过，如果你使用的单片库如jQuery或用户希望能够看到一些涉及JS动画或风格的马上的，内联可能对你更好。

Answer 2

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

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

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

2 个答案: