JS----执行与装载

alert.js 内容：即一个弹窗内容，随于区分效果

alert(“helloworld”);

1.传统的方式：

head里的 <script>标签会阻塞后续资源的载入以及整个页面的生成

<script type="text/javascript" src="../style/js/alert.js"></script>

2. document.write方式

document.write()这种方式能够解决不阻塞的方式

<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 = '../style/js/alert.js';
 
    loadjs(script);
    alert("loadjs() finished!");
</script>

<script type="text/javascript" language="javascript">
   alert("another block");
</script>

3.动态创建DOM方式

这个方式几乎成了标准的异步载入js文件的方式

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 = '../style/js/alert.js’;
loadjs(script);

4.按需异步载入js

 

上面那个DOM方式的例子解决了异步载入Javascript的问题，但是没有解决我们想让他按我们指定的时机运行的问题，如是就有：

A: 绑在window.load事件上    

window.load = loadjs("../style/js/alert.js")

B: 绑在特定的事件上

<span οnclick="loadjs()">Click to load alert.js </span>

5.异步地把js文件下载到用户的本地，但是不执行，仅当在我们想要执行的时候去执行。

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);
}

6.Ajax方式：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'new.js');
xhr.send('');