首先，我想说一下ja
因为ja
传统的方式
所以，当你写在代码中写下如下的代码：
<script type="text/javascript" src="http://coolshell.cn/asyncjs/alert.js"></script>基本上来说，head里的 <sc所以，你知道为什么有很多网站把ja
另外，因为绝大多数的ja
document.write方式
于是，你可能以为document.write()这种方式能够解决不阻塞的方式。你当然会觉得，document.write了的<sc
<script type="text/javascript" language="javascript">
function loadjs(script_filename) {
document.write('<' + 'script language="javascript" type="text/javascript"');
document.write(' src="' + script_filename + '">');
document.write('<'+'/script'+'>');
alert("loadjs() exit...");
}
var script = 'http://coolshell.cn/asyncjs/alert.js';
loadjs(script);
alert("loadjs() finished!");
</script>
<script type="text/javascript" language="javascript">
alert("another block");
</script> 你觉得alert的顺序是什么？你可以在不同的浏览器里试一试。这里的想关的测试页面：示例二。sc
IE自从IE6就支持defer标签，如：
<script defer type="text/javascript" src="./alert.js" > </script>对于IE来说，这个标签会让IE并行下载js文件，并且把其执行hold到了整个DOM装载完毕（DOMContentLoaded），多个defer的<sc而我们标准的的HTML5也加入了一个异步载入ja
支持 async标签的浏览器是：Firefox3.6+，Chrome 8.0+，Safari 5.0+，IE 10+，Opera还不支持（来自这里）所以这个方法也不是太好。因为并不是所有的浏览器你都能行。
动态创建DOM方式
这种方式可能是用得最多的了。
function loadjs(script_filename) {
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', script_filename);
script.setAttribute('id', 'coolshell_script_id');
script_id = document.getElementById('coolshell_script_id');
if(script_id){
document.getElementsByTagName('head')[0].removeChild(script_id);
}
document.getElementsByTagName('head')[0].appendChild(script);
}
var script = 'http://coolshell.cn/asyncjs/alert.js';
loadjs(script);这个方式几乎成了标准的异步载入js文件的方式，这个方式的演示请参看：示例三。这方式还被玩出了JSONP的东东，也就是我可以为sc按需异步载入js
上面那个DOM方式的例子解决了异步载入ja
比如：
绑在window.load事件上——示例四
你一定要比较一下示例四和示例三在执行上有什么不同，我在这两个示例中都专门用了个代码高亮的ja
window.load = loadjs("http://coolshell.cn/asyncjs/alert.js")绑在特定的事件上——示例五<p style="cursor: pointer" onclick="LoadJS()">Click to load alert.js </p>这个示例很简单了。当你点击某个DOM元素，才会真正载入我们的alert.js。更多
但是，绑定在某个特定事件上这个事似乎又过了一点，因为只有在点击的时候才会去真正的下载js，这又会太慢了了。好了，到这里，要抛出我们的终极问题——我们想要异步地把js文件下载到用户的本地，但是不执行，仅当在我们想要执行的时候去执行。
要是我们有下面这样的方式就好了：
var script = document.createElement("script");
script.noexecute = true;
script.src = "alert.js";
document.body.appendChild(script); //后面我们可以这么干 script.execute();可惜的是，这只是一个美丽的梦想，今天我们的ja所以，我们的程序员只能使用hack的方式来搞。
有的程序员使用了非标准的sc
<script type=cache/script src="./alert.js"></script>因为”cache/sc所以，我们需要再hack一下，就像N多年前玩preload图片那样，我们可以动用ob
function cachejs(script_filename){
var cache = document.createElement('object');
cache.data = script_filename;
cache.id = "coolshell_script_cache_id";
cache.width = 0;
cache.height = 0;
document.body.appendChild(cache);
}然后，我们在的最后调用一下这个函数。请参看一下相关的示例：示例六在Chrome下按 Ctrl+Shit+I，切换到network页，你就可以看到下载了alert.js但是没有执行，然后我们再用示例五的方式，因为浏览器端有缓存了，不会再从服务器上下载alert.js了。所以，就能保证执行速度了。
关于这种preload这种东西你应该不会陌生了。你还可以使用Ajax的方式，如：
var xhr = new XMLHttpRequest(); xhr.open('GET', 'new.js'); xhr.send('');到这里我就不再多说了，也不给示例了，大家可以自己试试去。最后再提两个js，一个是ControlJS，一个叫HeadJS，专门用来做异步load ja
好了，这是所有的内容了，希望大家看过后能对ja
本文转载自:酷壳网 作者:陈皓
最佳答案
