json格式,键名也为字符串
异步加载js
defer 异步加载,但要等到dom文档全部解析完才会被执行。IE浏览器,defer="defer"
async 异步加载,加载完就执行,async只能加载外部脚本,不能把js写在script标签里 async = "async"
创建script,插入到DOM中,加载完毕后callback
function loadScript(url,callback){ var script = document.createElement('script'); script.type = 'text/javascript';//可省略 if(script.readyState) { script.onreadystatechange = function(){ //ie if(script.readyState == 'complete' || script.readyState == 'loaded'){ callback(); } } }else{ script.onload = function () { //Safari chrome firefox opera callback(); } } script.src = url; document.head.appendChild(script); }
时间线
创建Document对象,开始解析web页面
,解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState = ‘loading’
- 遇到link外部css,创建线程加载,并继续解析文档。
- 遇到script外部js,并且没有设置async、defer,浏览器加载,并阻塞,等待js加载完成并执行脚本,然后继续解析文档
- 遇到script外部js,并且设置有async、defer,浏览器创建线程加载,并继续解析文档。对于async属性的脚本,脚本加载完成后立即执行。(异步禁止使用document.write())
- 遇到img等,先正常解析dom结构,然后浏览器异步加载src,并继续解析文档。
- 当文档解析完成后,document.readyState = ‘interactive’。
- 文档解析完成后,所有设置有defer的脚本会按照顺序执行。(注意与async的不同,但同样禁止使用document.write())。
- document对象触发DOMContentLoaded事件,这也标志着程序执行从同步脚本执行阶段,转化为事件驱动阶段。
- 当所有的async的脚本加载完成并执行后、img等加载完成后,document.readyState = ‘complete’,window对象触发load事件。
- 从此,以异步响应方式处理用户输入、网络事件等。
console.log(document.readyState);
document.onreadystatechange = function(){
console.log(document.readyState)
}
document.addEventListener('DOMContentLoaded',function(){ //dom解析完就执行
console.log('a')
},false)
//loading
//interactive
//a
//complete
//DOMContentLoaded 事件相当于 jQuery 中的 $(document).ready(function(){}) 事件