使用异步脚本
概览
使用异步脚本意味着系统可以更快速地呈现您的网页,而不是强制用户等待脚本完成下载,然后才呈现网页。异步版脚本可实现后台下载。
虽然最初的大多数脚本是同步的,但较新版脚本均可实现异步加载。
详细消息
当浏览器解析传统的脚本标记,它必须等待脚本下载、解析和执行后,才渲染在它后面出现的任何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