使用异步脚本

文档中心 >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