文档中心 >Google PageSpeed

使用异步脚本

概览

使用异步脚本意味着系统可以更快速地呈现您的网页,而不是强制用户等待脚本完成下载,然后才呈现网页。异步版脚本可实现后台下载。

虽然最初的大多数脚本是同步的,但较新版脚本均可实现异步加载。

详细消息

当浏览器解析传统的脚本标记,它必须等待脚本下载、解析和执行后,才渲染在它后面出现的任何HTML。而异步的脚本,浏览器可以执行异步脚本时继续解析和渲染后面的HTML,无需等待脚本完成。当一个脚本异步加载,它会很快返回,但它的执行被推迟到浏览器的UI线程不是很忙的时候,比如渲染网页。

建议

JavaScript不需要用来构建网页的初始视图,比如那些用于跟踪/分析资源,应该异步加载。一些显示用户可见的内容部分的脚本也可以被异步加载,特别是如果该内容不是网页上的最重要的内容(例如,它在折叠里面)。

使用脚本DOM元素

使用脚本DOM元素最大化跨越当前浏览器异步加载:

<script>
var node = document.createElement('script');
node.type = 'text/javascript';
node.async = true;
node.src = 'example.js';
// Now insert the node into the DOM, perhaps using insertBefore()
</script>

使用脚本DOM元素异步特性允许在Internet Explorer、火狐、Chrome和Safari异步加载。相比之下,在写这篇文章的时候,一个HTML<script>标记的异步属性只会在Firefox3.6和Chrome8异步加载,因为其他浏览器还不支持这种机制的异步加载。

异步加载谷歌AdSense

<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

异步加载谷歌Analytics(分析)

谷歌分析的最新版本使用异步的JavaScript。使用旧版本的网页应该更新到异步版本。参考如下写法:

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-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>

上述范例中,它是哦那个 _setAccount 来设置网页的页面属性ID,然后调用 _trackPageview 发送跟踪数据回Google分析服务器。

重要:如果你正在把传统代码更新到最新异步版本,你应该首先删除之前的跟追代码。我们建议你在网页上同时使用他们。

本页面中的内容已获得知识共享署名3.0许可,并且代码示例已获得Apache 2.0许可;另有说明的情况除外。

文章源地址:https://developers.google.com/speed/docs/insights/UseAsync