在之前放置JavaScript文件与放置之间的任何区别

StackOverflow https://stackoverflow.com/questions/2901265

题

环顾四周，找不到讨论的具体问题。可以肯定的是，差异可以忽略不计，只是对您的想法感到好奇。

方案：在关闭之前放置页面渲染之前不需要加载的所有JavaScript </body> 标签。在发射DOM负载/Ready事件时执行的头部中的一些JavaScript代码，是否有任何好处或有害懒惰加载它们？假设这仅涉及下载一个完整功能的整个.js文件，而不是按照使用时需要按需要的几个单独的文件。

希望这很清楚，谢谢。

有帮助吗？

解决方案

在我看来，有很大的区别。

当您嵌入JS时 <body> 标签，您正在强迫页面加载这些页面 <script>S同步（必须立即发生）并依次（一行发生），因此您要稍微放慢页面，因为您必须等待那些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个大球的粉丝（因为如果有1个依赖性改变，您必须再次下载并解释整个内容！），但是我是管道衬里（组合脚本）和基于事件的模型。

当您确实允许异步，基于事件的加载时，您会获得更好的性能，但也许不会感知性能（尽管可以对其进行抵消）。

例如，页面的一部分可能不会加载一两秒钟，因此看起来不同（如果您使用JS来影响页面样式，我 别 建议）或不准备好进行用户交互，直到您（或托管网站的人）返回脚本。

此外，您必须做一些工作以确保您的 <script>S具有正确的依赖性，以便能够正确执行。例如，如果您没有jQuery或原型，则无法成功致电：

<script>

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

</script>

或者

<script>

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

</script>

正如解释器会说“可变$ undefined”之类的话。即使您都添加了 <script>S到DOM 同时, ，因为我敢打赌，jQuery或原型比您的js大得多（因此，数据的请求需要更长的时间）。无论哪种方式，没有某种类型的限制，您都可以偶然。

因此，选择确实取决于您。如果您可以正确地分割依赖项 - 即将您需要的东西放在前面，然后懒惰地加载其他东西，它将导致整体时间更快，直到您准备就绪DOM为止。

但是，如果您使用诸如jQuery之类的单片库或用户期望能够看到涉及JS动画或样式的东西 马上, ，对您可能会更好。

其他提示

就可用性而言，您绝对不应该使用用户期望通过按钮做出快速响应的任何事情来做到这一点。

Otoh 取代分页 随着用户滚动的连续加载页面是一个很好的主意。当负载扳机在页面末端时，我确实发现这是一种干扰，最好将其降低1/2至3/4。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top