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

14

有没有办法将我的JavaScript加载到页面中以使其加载更快？

javascript optimization performance

— 杰森
source

14

您可以做几件事：

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

雅虎提供了大量建议，可以帮助减少页面加载时间。

— 加雷斯·法灵顿
source

1

雅虎还分发了用于Firefox的YSlow插件，该插件会根据上述最佳做法分析您的网页，并为您提供成绩单。请参阅developer.yahoo.com/yslow

— 艾伦（Alan）2010年

1

如果您拥有不需要在页面最初呈现时加载脚本的站点元素，则还可以使用异步加载之类的技术。这和将脚本放置在页面底部附近都有局限性。在某些情况下，您需要将JS加载到文档头中。

— JasonBirch

7

除了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>

将其放在结束body标记之前，并使用AttachScript加载每个js文件。
一些更多的信息在这里http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

— 崩解器
source

1

嘿，您偷了CDNing；这应该意味着要做加拿大人！;）

— JasonBirch 2010年

jajajaja好人

— The Disintegrator 2010年

7

您可能还想看看Google加载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/

— 杰夫·阿特伍德
source

3

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

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

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

— 杰森·伯奇
source

1

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

我向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次测试，结果如下：

正常设置

页面加载的顶部是CSS，底部是javascript

这只是正常的设置，我们的头部有4个CSS文件，在页面底部有3个CSS文件。

现在，我看不到任何障碍。我看到的是所有内容都在同一时间加载。

非阻塞JS

使用非阻塞JavaScript进行页面加载

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

一切都畅通无阻

页面加载无阻塞

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

结论

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

还是我在这里想念什么？

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

正常设置

非阻塞JS

一切都畅通无阻

结论

更多：