JS: 非阻塞脚本
defer属性
HTLM4为<script>标签扩张了一个属性: defer.这个属性指明元素中所包含的脚本不打算修改DOM, 因此代码可以稍后执行. 对于外部引用脚本也一样, 会下载但是不会立即执行.执行的时间点会在onload事件之前. 但是defer的浏览器支持有限.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>defer test</title>
</head>
<body>
<script defer>
alert('defer');
</script>
<script>
alert('script');
</script>
<script>
window.onload=function(){
alert('onload');
}
</script>
</body>
</html>
对于上面代码, 支持defer的浏览器的输出顺序是script-->defer-->onload. 不支持defer的浏览器输出顺序是defer-->script-->onload.
对于chrome虽然支持defer, 但输出顺序却不一致.
浏览器的测试结果：
opera 11 “defer –> script –> onload”(支持，但顺序不一致)
safari 5.0 “defer –> script –> onload” (支持，但顺序不一致)
ie8 “script –> defer –> onload” (顺序一致)
ie6 “defer –> script –> onload” (支持，但顺序不一致)
chrome 17.0.963.26 “defer –> script –> onload” (支持，但顺序不一致)
动态脚本元素
文档对象模型(DOM)允许你使用JavaScript动态创建HTML的几乎全部文档内容, 包括<script>.
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'file1.js';
document.getElementsByTagName('head')[0].appendChild(script);
新的<script>元素加载file1.js源文件.此文件当元素添加到页面之后立刻开始下载.
此技术的重点在于: 无论在何处启动下载, 文件的下载和运行都不会阻塞其他页面处理过程.你甚至可以将这些代码放在<head>部分而不会对其余部分的页面代码造成影响(除了用于下载文件的HTTP链接).
XHR脚本注入
另一个以非阻塞方式获得脚本的方法是使用XMLHttpRequest(XHR)对象将脚本注入到页面中.此技术首先创建一个XHR对象, 然后下载JavaScript文件, 接着用一个动态<script>元素将JavaScript代码注入页面.
var xhr = new XMLHttpRequest();
xhr.open('get', 'file1.js', true);
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
var script = document.createElement ("script");
script.type = "text/javascript";
script.text = xhr.responseText;
document.body.appendChild(script);
}
}
}
xhr.send(null);
