Question

我正在构建一个面向公众的网站，我正在使用大量的jQuery和jQueryUI。我注意到的是，大多数使用jQuery和jQueryUI的互联网站点在他们的页面中都没有这样的代码。

<script type="text/javascript">
  $(document).ready(function(){

    $("a").click(function(event){
      alert("Thanks for visiting!");
    });

    $( "input:submit" ).button();
  });
</script>

我知道这是一个简单的例子，但大多数网站，例如SO只有一个混淆的js文件包含在所有页面中。看起来他们似乎没有在任何地方使用$（document）.ready。在我当前的网站上，似乎我需要为每个页面包含一个js文件。我的问题是它是如何完成的，是否有关于如何在页面中使用/包含javascript的最佳实践？

Answer 1

你不会看到这个着名的文档。因为大多数代码通常被压缩成一个大文件用于缓存目的。只需将你的js包含在身体的末端，如：

<script type="text/javascript" src="site.js"></script>

所以每个页面都可以一次性缓存。

Answer 2

根据W3C，您可以将脚本放在几乎任何位置：http://www.w3schools.com/js/js_whereto.asp

那么你应该把它们放在哪里？

Ege说你应该尽可能地将它们放在页面尽可能远的地方，因为它可以使浏览器在进入“阻塞”脚本之前预先并行加载更多内容。有关详细信息，请参阅此处：http://developer.yahoo.com/performance/rules.html#js_bottom

此外，将脚本（和CSS）放入外部文件几乎总是一个好主意，这样浏览器就可以缓存它们，从而使用户不必每次都下载页面。

就个人而言，我总是使用CDN来处理脚本框架，例如jQuery等，因为它们可以比你可能更快地提供外部资源。此外，浏览器已经从同一个CDN缓存jQuery到另一个站点的可能性更大。更多细节：http://code.google.com/apis/libraries/devguide.html

最后，使用$（document）.ready没有任何问题，但请注意，这可能会影响网站的响应能力，其专业人员可能不会超过其缺点。再次，更多细节：http://encosia.com/2010/08/18/dont-let-jquerys-document-ready-slow-you-down/

希望这会有所帮助。

Answer 3

是否在顶部或底部包含'site.js'文件无关紧要，除非您的javascript正在执行document.write以在页面上放置内容。然后当然在顶部将是期望的。有些人喜欢它在底部，以便在下载js文件之前加载页面的其余部分，如果它是一个大文件，有时会延迟页面加载。

如何在面向公众的网站上加入JavaScript？

3 个答案: