在html页面中加载javascript脚本的位置

Question

我正在开发一个 jquery 页面，我认为加载它时它有点慢，因为我在开始时加载了所有 js 文件。

如果我在开始时只加载我需要的内容并在每个部分加载我需要的内容会更快吗？

现在我的网页有所有脚本调用，然后在所有部分，主页，page2，page3...

我在一个 html 文件中构建了网页，然后导航到每个部分。每个部分都是这样的：

<div data-role="page" id="secion2" data-theme="e">
<!--<script type='text/javascript' src='javascript/createFbAlbums.js'></script> -->
**LOAD SCRIPTS HERE**
<div data-theme = "f" data-role="header" data-id="fixedNav" data-position="fixed">
    <h1>Page 2</h1>
    <a href="#home" data-icon="home" data-iconpos="notext"></a>

</div> <!-- /header -->
<div data-role="content">
     <ul data-role="listview" data-inset="true" class="managementEvents">   
        <li data-theme = "f"><a href="#expositivo">Page2</a></li>
        <li data-theme = "f"><a href="#page3">Modify Exposiciones</a></li>
    </ul>        
</div> <!-- /content -->

在这段代码中的注释部分加载它们。这是否等于开始时的负载？

或者在javascript中做这样的事情：

$(document).on("pageinit", '#section2', function(){
**LOAD HERE SCRIPTS**
Javascript code here doing everything in that page
});

我有点迷茫，因为我不知道这是否可以或会破坏页面或不会加速加载。

Answer 1

通常的建议（例如，在 YUI's Best Practices for Speeding Up Your Web Site 中）是，除非您有充分的理由去做其他事情，否则将您的脚本放在页面的最后，就在结束 </body> 标记之前：

<p>Content</p>
<div>More content</div>
<script src="/some/script.js"></script>
</body>
</html>

旁注：这也使得使用 jQuery 的ready 功能基本上没有必要。如果脚本位于页面的最底部，则上面的标记定义的所有元素都可用于编写脚本。

在上面链接的页面中有更多有用的建议。例如：尽可能将所有脚本合并到一个文件中。 （并使文件可缓存等）

缺点：如果您的页面上的内容需要 JavaScript 才能正常工作，上述情况意味着与此相关的事件将无法正确连接离开。在用户可用的内容和注册的事件处理程序之间可能有一个短暂的时间窗口。为了解决这个问题，“渐进式增强”的概念开始发挥作用：没有 JavaScript 让事情运行良好，然后使用 JavaScript 让它们更好地运行。没有 JavaScript 就无法工作的东西应该由 JavaScript 添加，或者最初隐藏加载，然后由 JavaScript 显示。

Answer 2

应尽可能在页面底部加载 JS 文件。在结束 body 标签之前。

http://developer.yahoo.com/performance/rules.html#js_bottom

原因是 JS 文件加载会阻塞其他页面资源的并行下载。所以它们可能会导致瓶颈。

除此建议外，由于您使用的是 jQuery，请从 CDN（例如 Google）加载 jQuery。这样做有几个好处：

• Google 等流行的 CDN 增加了最终用户已经缓存 JS 库的几率
• 它进一步减少了并行下载瓶颈，因为它是另一个域（瓶颈是每个域）

Answer 3

建议将 JavaScript 放在页面底部。但是，这并没有考虑动态加载脚本，因为在使用标签和通过 JavaScript DOM 操作动态加载之间，浏览器实际处理下载外部资源（如 JS 文件）的方式存在差异。

进一步说明

浏览器在解析 HTML 时会同步加载 HTML 和任何嵌入的资源。这意味着当您的页面加载时，当您预先准备好脚本时，页面的加载会停止，浏览器会发出下载请求，然后解析和评估/执行 JavaScript 文件，然后继续加载 HTML 的其余部分.它对每个脚本执行此操作。

因此，除非在页面加载过程中有关键元素需要使用一些 JS 函数或变量，并且在某些情况下需要这样做，否则最好将 JS 加载到页面底部，因为您的页面会渲染得更快。而在那些关键的情况下，只需要加载足够的 JS 以尽快完成页面加载。

有趣的是，使用 JavaScript 本身动态加载 JS 文件（即在页面加载后通过 javascript 动态注入脚本对象），这些脚本将异步加载并进一步缩短页面加载时间。

所以回答你的问题，

如果您使用jQuery.ready() 加载JS 的方法，它符合最佳实践，因为脚本将在页面已被浏览器加载后加载。这实际上比在页面底部放置标签更好。

$(document).ready(function () {
    $.getScript( "yourScript.js" )
});

（可以在此处找到 jQuery getScript 的完整示例以获得更深入的示例： http://api.jquery.com/jquery.getscript/

Answer 4

在关闭</body> 标签之前，您应该始终将脚本放在页面底部

请参阅here 了解更多信息为什么你应该这样做。

Answer 5

是的，正如大家提到的，将脚本放在页面底部 </body> 标记之前不会有什么坏处，但有时将脚本放在 head 标记中时可能会产生问题。

Answer 6

如果你使用$(document).ready(function(){然后添加你的代码，并用})关闭它，它确实没有必要将你的脚本放在你的HTML末尾，尽管这两种方法都被认为是好的编程练习。