it-swarm.cn

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

有没有办法将我的JavaScript加载到一个页面,使其加载更快?

14
Jason

你可以做一些事情:

  1. 在javascript之前加载HTML和CSS。这为浏览器提供了布局页面并渲染它所需的一切。这给用户留下了页面流畅的印象。将脚本标记或块放置在尽可能靠近关闭体标记的位置。

  2. 考虑使用CDN。如果您使用任何流行的库(如JQuery),许多公司(例如谷歌,雅虎)都会运行可用于加载库的免费CDN。

  3. 从外部文件而不是嵌入式脚本加载代码。这使浏览器有机会缓存​​JS内容,而不必加载它。连续页面加载会更快。

  4. 在Web服务器上启用Zip压缩。

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

14
Gareth Farrington

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

7
The Disintegrator

您可能还想查看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/

7
Jeff Atwood

几位Google人员 在Velocity 2010上宣布了一个新的开源项目 名为 Diffable 。 Diffable执行一些魔术来逐步发布自从存储在用户缓存中的版本以来已更改的JS,HTML和CSS部分,而不是在发布新版本时发送整个新文件。

这种技术非常酷,目前在您使用大型JavaScript代码库且频繁更改代码的网站上最有效(并且值得付出努力)。这尤其适用于谷歌地图等应用程序,它至少经历 每周二发布一次 ,平均每年发布约100个新版本。一旦HTML5本地存储变得更加普及,它一般也很有意义。

顺便说一句,如果你还没有看到谷歌迈克尔琼斯关于变化的讨论(在地理空间背景下),那么值得关注他的整个 GeoWeb 2009的主题演讲

3
JasonBirch

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

我在StackOverflow中添加了一个问题,我将在这里添加内容aswel。

唯一的区别是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这里只是一个包含所有文件的所有网址的对象。

我已经运行了3次测试,结果如下:

正常设置

Page load with css in the head and javascript at the bottom

这只是正常设置,我们头部有4个css文件,页面底部有3个css文件。

现在我没有看到任何阻塞。我认为一切都在同时加载。

非阻塞JS

Page load with non-blocking javascript

现在更进一步,我只使js文件非阻塞。这与上面的脚本。我突然发现我的css文件阻塞了负载。这很奇怪,因为在第一个例子中它没有阻塞任何东西。 为什么css会突然阻塞负载?

一切都是非阻塞的

Page load with everything non-blocking

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

结论

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

或者我在这里遗漏了什么?

更多:

1
Saif Bechan