将Javascript加载到页面以优化性能的最佳方法是什么？

Question

有没有一种方法可以将我的JavaScript加载到一个页面中，从而使其加载速度更快？

Answer 1

有几件事你可以做：

1. 在javascript之前加载HTML和CSS。这为浏览器提供了布局和呈现页面所需的一切。这给用户的印象是页面是快速的。将脚本标记或块尽可能靠近关闭体标记。
2. 考虑使用CDN。如果您正在使用像JQuery这样的流行库，那么许多公司(例如谷歌、雅虎)都可以使用免费的CDN来加载库。
3. 加载外部文件而不是嵌入式脚本的代码。这使浏览器有机会缓存JS内容，而不必加载它。连续的页面加载将更快。
4. 打开web服务器上的压缩压缩。

雅虎有一个大页的建议，可以帮助减少页面加载时间。

Answer 2

除了Minifing，gziping和CDNing (新词？)你应该考虑推迟装货。基本上，这样做是动态添加脚本，防止阻塞，允许并行下载。

做这件事有很多种方法，我更喜欢这一种

<script type="text/javascript">
    function AttachScript(src) {
        window._sf_endpt=(new Date()).getTime();
        var script = document.createElement("script");
        document.getElementsByTagName("body")[0].appendChild(script);
        script.src = src;
    }
    AttachScript("/js/scripts.js");
    AttachScript("http://www.google-analytics.com/ga.js");
</script>

将其放置在关闭正文标记之前，并使用AttachScript加载每个js文件。

这里有更多的信息，http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

Answer 3

您可能也想看看Google加载Analytics的方式：

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-xxxxxxx-x']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

因为它被认为是一种“最佳实践”脚本：

http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/