javascript在html中的加载顺序

通常来说，浏览器对于Javascript的运行有两大特性：1）载入后马上执行，2）执行时会阻塞页面后续的内容
关于js在页面的装载与执行的一些问题

按HTML文档流顺序执行JavaScript代码，那么我们按照初学的HTML框架

<html>
<head>
<script type="text/javascript" src="">
		js代码
</script> 
</head>
<body>
	页面元素
</body>
</html>

关于js在页面的装载与执行的一些问题

在页面加载时，存在于head标签中的JavaScript脚本就会执行，而此时DOM树还未加载其后面的节点，这就会导致HTML被阻塞，JavaScript脚本报错，找不到对象。

解决方法

（1）将JS文件都放在</body>甚至</HTML>后面后再进行调用

（2）将JS代码封装在window.onload或是docmuemt.ready之类的事件

以上为同步载入js的方法，主要因为 js 中可能有输出 document 内容、改动dom、重定向等行为，所以默认同步运行才是安全的，但很有可能堵塞浏览器的处理。
所以又有了异步加载js
简单说：同步载入js是瀑布模型，而异步加载js是并发模型。

网上比较常见的异步载入写法

常见异步载入（Script DOM Element）

(function() { 
var s = document.createElement('script'); 
s.type = 'text/javascript'; 
s.async = true; 
s.src = 'xxx.js'; 
var x = document.getElementsByTagName('script')[0]; 
x.parentNode.insertBefore(s, x); 
})();

动态创建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);

异步载入的其他方法
由于Javascript的动态特性，还有非常多异步载入方法：

XHR Eval
XHR Injection
Script in Iframe
Script Defer
document.write Script Tag

关于js在页面的装载与执行的一些问题

javascript在html中的加载顺序

相关推荐