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

#1 楼

您可以执行以下操作：


在JavaScript之前加载HTML和CSS。这为浏览器提供了布局页面和呈现页面所需的一切。这给用户留下页面活泼的印象。将脚本标签或块放置在尽可能靠近封闭体标签的位置。
考虑使用CDN。如果您使用的是诸如JQuery之类的任何流行库，那么许多公司（例如google，yahoo）都可以使用免费的CDN来加载库。
从外部文件而不是嵌入式脚本中加载代码。这使浏览器有机会缓存​​JS内容，而不必完全加载它。连续的页面加载将更快。
在Web服务器上启用zip压缩。

Yahoo提供了很多建议，可以帮助减少页面加载时间。

#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 /

#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/

#4 楼

几个Google员工在Velocity 2010上宣布了一个名为Diffable的新开源项目。 Diffable执行一些魔术操作，以增量方式仅发布自用户缓存中存储的版本以来已更改的JS，HTML和CSS部分，而不是在发布新版本时发送整个新文件。

这项技术非常酷，目前在您使用大型JavaScript代码库且代码更改很少的网站上，最有效（值得努力）。这尤其适用于Google Maps之类的应用程序，该应用程序每个星期二至少发布一个版本，并且平均每年大约发布100个新版本。一般而言，一旦HTML5本地存储变得更加普及，这通常也很有意义。

顺便说一句，如果您还没有看到Google的迈克尔·琼斯（Michael Jones）谈论变化（在地理空间环境中），那么值得一看在GeoWeb 2009上的主题演讲。

#5 楼

要对此问题进行更新。我认为在现代，不再需要非阻塞加载的方式，浏览器将为您完成。

我向StackOverflow添加了一个问题，我将在此处添加内容。

唯一的区别是load事件将被提前触发，但是加载文件本身保持不变。我还想补充一点，即使onload甚至使用非阻塞脚本更早触发了，这也不意味着JS文件更早触发了。在我的情况下，正常设置效果最好

现在首先看脚本，它们看起来像这样：

<script>
(function () {
    var styles = JSON.parse(myObject.styles);
    for( name in styles ){
        var link  = document.createElement('link');
        link.setAttribute('rel', 'stylesheet');
        link.setAttribute('type', 'text/css');
        link.setAttribute('href', styles[name]);
        document.getElementsByTagName('head')[0].appendChild(link);
    }

    var scripts = JSON.parse(myObject.scripts);
    for( name in scripts ){
        var e = document.createElement('script');
        e.src = scripts[name];
        e.async = true;
        document.getElementsByTagName('head')[0].appendChild(e);
    }
}());
</script>

myObject.styles只是一个对象包含所有文件的所有URL。

我已经运行了3个测试，结果如下：

常规设置



这只是正常的设置，我们的头中有4个CSS文件，页面底部有3个CSS文件。我看到的是所有内容都在同一时间加载。

非阻塞JS



现在，请进一步介绍一下，我只将js文件设为非阻塞。这与上面的脚本相同。我突然看到我的css文件阻塞了负载。这很奇怪，因为在第一个示例中它没有阻塞任何东西。为什么CSS突然阻止了加载？

所有非阻止性



最后我做了一个测试，将所有外部文件都加载到其中一种非阻塞的方式。现在，我认为第一种方法没有任何区别。它们看起来都一样。

结论

我的结论是文件已经以非阻塞方式加载，我看不到需要添加特殊脚本。

还是我在这里缺少什么？

更多：


文章：http://www.yuiblog.com/博客/ 2008/07/22 / non-blocking-scripts /

问题：https://stackoverflow.com/questions/6828271/javascript-non-blocking-scripts-why-dont-simply-put-all-scripts-before-body

问题：https：/ /stackoverflow.com/questions/5765113/do-modern-browsers-still-limit-parallel-downloads

代码：http://calendar.perfplanet.com/2010/the-truth-about- non-blocking-javascript /

代码：http://blog.fedecarg.com/2011/07/12/javascript-asynchronous-script-loading-and-lazy-loading/