JavaScript代码执行时间线

JavaScript代码执行时间线

Javascript是单线程(底层：多线程)

• 同步情况:script标签中的src是同步
• 异步情况:所有外部资源,出来script中的src都是异步的,img src link href

script标签没有设置async defer的时候会阻塞
1.形成dom树，开始绘制dom树 document.readyState=“loading”
2.dom绘制完成 document.readyState=“interactive” 触发DOMContentloaded事件，jquery中ready函数的源代码（树绘制完成 效率更高）
3.dom树中的资源下载完成 document.readyState=“complete”||document.readyState=“loaded” 触发window.onload事件（资源下载完成）
4.响应完成

JavaScript异步加载js的三种方案

  >  1.defer  老版本的IE
     2.async  W3C规范   只能加载外部的js代码
     3.按需加载

       function loadScript(url,callback){
				var script=document.createElement("script");
				if(script.readyState){
					script.onreadystatechange=function(){
						if(script.readyState=="complete"||script.readyState=="loaded"){
							test();
						}
					}
				}else{
					script.onload=function(){//老版本IE不支持
						callback();
					}
				}
				script.src=url;
				document.head.appendChild(script);
			}
		loadScript("js/demo009JS.js",function(){test()});
		~~~