Question

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

如果我在开头和每个部分加载我需要的东西，加载我需要的东西会更快吗？

现在我的网页上都有所有脚本调用，之后，在所有部分，home，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文件。在关闭身体标签之前。

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

原因是加载JS文件可以阻止其他页面资产的并行下载。所以他们可能会造成瓶颈。

除了这个建议之外，由于你正在使用jQuery，所以从谷歌等CDN加载jQuery。这样做有几个好处：

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

Answer 3

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

进一步说明

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

因此，除非在页面加载期间需要使用某些JS函数或变量的关键元素，并且在某些情况下需要这样做，否则最好在页面底部加载JS，因为页面将更快地呈现。在那些关键的情况下，只加载足够的JS以尽快完成页面加载。

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

所以回答你的问题，

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

$(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的末尾是没有必要的，它会产生相同的效果，尽管这两种方法都是如此被认为是很好的编程实践。

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

6 个答案: