一、同步加载
同步加载又称为阻塞模式,是我们常用的默认的模式。
<script type="text/javascript" src="load.js"></script>
<script type="text/javascript">
console.log('Hello');
</script>
当浏览器解析文档遇到script标签时,会阻止浏览器的后续解析,停止后续的解析,将当前遇到的js加载完成后,才能进行下一步操作,但如果js中有输出document内容、修改dom、重定向等行为,就会造成页面堵塞,严重影响用户体验。所以一般建议把
二、异步加载
js加载默认是同步加载的,但同步加载会阻塞文档,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作。但是有些工具js文件是不会改变页面的,用到时再加载,不用时不加载,可以提升效率,所以就用到了异步加载。
异步加载有三种模式:
1、defer,IE专用
代码执行时间:当整个网页解析完,执行代码(在网页加载完之前)
<script src="load.js" defer></script>
<script defer>
console.log('Hello');
</script>
2、async
加载完就执行 W3C的标准。
注意:async 只能加载外部脚本,不能把js写在script标签里。
3.创建一个script标签,插入到DOM中,加载完毕后callback 兼容性最好的
function loadScript(url, callback){
var script = document.createElement('script');
script.type = "text/javascript";
//先绑定监听
if(script.readyState) { //兼容IE
script.onreadystatechange = function () {
if(script.readyState == 'complete' || script.readyState == 'loaded') {
tools[callback](); //执行callback函数,要求工具函数以都包在“tools”对象中
}
}
} else {
script.onload = function () {
//chrome firefox safari oprea
tools[callback]();
}
}
script.src = url; //当执行到这一行代码时就开始下载srcipt脚本了
document.head.appendChild(script); //当执行到这里时代码被写入到文档中,如果下载好了就开始执行
}
//调用方式: 调用loadScript()方法,函数名通过字符串形式传入
loadScript('tools.js', 'test')
Js时间线
js加载时间线的步骤:
1.创建Document对象,开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段 document.readyState = ‘loading’ 。loading (加载)
2.遇到link外部css,创建线程加载,并继续解析文档。
3.遇到script外部js,并且没有设置async、defer,浏览器加载,并阻塞html,css,等待js加载完成并执行该脚本,然后继续解析文档( html css)。
4.遇到script外部js,并且设置有async、defer,浏览器创建线程加载,并继续解析文档。 对于async属性的脚本,脚本加载完成后立即执行。(禁止使用document.write(), 因为有可能会清空DOM树)
5.遇到img等,先正常解析dom结构,然后浏览器异步加载src,并继续解析文档。此时DOM树上有img标签但是没有加载src
6.当文档解析完成,document.readyState = ‘interactive’ 。 interactive (交互的)
7.文档解析完成后,所有设置有defer的脚本会按照顺序执行。(禁止使用document.write())。
8.document对象触发DOMContentLoaded事件,这也标志着程序执行从同步脚本执行阶段,转化为事件驱动阶段(浏览器正常发挥功能)。
9.当所有async的脚本加载完成并执行后、img等加载完成后,document.readyState = ‘complete’,complete (完成)window对象触发load事件。
10.从此,以异步响应方式处理用户输入、网络事件等。