同步加载
同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作。
<script src="http://xxx/script.js"></script>
<!--所以一般建议把<script>标签放在<body>结尾处,这样尽可能减少页面阻塞。-->
异步加载
异步加载又叫非阻塞加载,浏览器在下载执行js的同时,还会继续进行后续页面的处理。主要有三种方式。
defer
<script src="http://xxx/script.js" defer></script>
<!--要等dom文档全部解析完(dom树生成)才会被执行。-->
async
<script src="http://xxx/script.js" defer></script>
<!--加载完就执行;async只能加载外部脚本,不能写js到标签里。-->
Script DOM Element
这种方法是在页面中<script>
标签内,用 js 创建一个 script 元素并插入到 document 中。
以下是封装函数兼容性的异步加载js文件,并且可以按需执行该文件里面的函数(按需加载)
<script>
function loadScript(url,callback){
//url是按需加载的js文件
//callback是按需加载的js文件中某个函数
// 1. 创建一个script标签
var script = document.createElement('script');
// 处理ie的兼容
if(script.readyState){
script.onreadystatechange = function(){
// 如果script已经下载完成
if(script.readyState == 'complete' || script.readyState == 'loaded'){
callback();
}
}
}else{
// 监听script的下载的状态 当状态变为下载完成后 再执行callback
script.onload = function(){
callback();
}
}
//在后面引入的目的是如果在IE上如果下载太快(比读程序还快)
//IE的readystatechange 事件检测状态码的时候,它早已经从loading变成complete或者loaded(以极快的速度加载完了文件,你还没来得及检测)
// 那你再检测它就不会变了,它一直都是complete或者loaded
//这个时候就是马后炮了,检测也没用了。
// 2. 给script标签添加src 引入一个js文件
script.src = url;
// 3. 追加到body
document.body.appendChild(script);
}
</script>
补充:document三个状态
document.readyState === "loading" //表示document仍在加载
document.readyState === "interactive"//文档已经完成加载,文档已被解析,但是诸如图像,样式表和框架之类的子资源仍在加载。
interactive //活跃状态,dom树绘制完成
document.readyState === "complate" T文档和所有子资源已完成加载。状态表示 [load]