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

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 显示。