JSON，异步加载JS
JSON
前后端传送数据，原使用XML格式。现以对象形式传递即JSON。
JSON是静态类。有方法stringify、parse，对象转为字符串和字符串转对象。
浏览器渲染
浏览器渲染页面时，生成domTree（一边解析，一边下载），采用深度优先原则。
domTree解析完，等待cssTree生成，合并成 randerTree，开始绘制页面。
domTree节点的删除、增加，宽、高、位置等变化会触发reflow重排。优化页面尽量少更改domTree，
repaint重绘影响比较少。
异步加载JS
不影响页面的js，采用异步加载js，或按需加载js。
defer 异步加载，
但要等到dom文档全部解析完才会被执行，只有IE能用，也可以将代码写到内部。
async异步加载，
加载完就执行，async只能外部脚步，不能把js写在script标签里。
创建script，插入到dom中，加载完毕后callBack。
defer、async执行时不阻塞页面。
<h1>异步加载js</h1>
<script>
function loadScript(url,callback){
var script = document.createElement('script');
script.type = "text/javascript";
if(script.readState){
script.onreadstatechange = function(){
if(script.readState == "complete" || script.readState == "loaded"){
// callback();
tools[callback];
}
}
}else{
script.onload = function(){
// callback();
tools[callback];
}
}
script.src = url
//src 灯塔模式 预加载。
document.head.appendChild(script);
}
//调用异步加载js方法。
//loadScript('demo.js',function(){test()});
loadScript('demo.js',"test");
//demo.js内容
// var tools ={
// test:function(){
// console.log('a');
// }
// }
</script>
js加载时间线
-
创建Document对象，开始解析web页面，解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段Document。readyState = “loading”。
-
遇到link外部css，创建线程加载，并继续解析文档。
-
遇到script外部js，并且没有设置async ， defer ，浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。
-
遇到script外部js，并且设置有async，defer 浏览器创建线程加载，并继续解析文档，对于async属性的脚本，脚本加载完成后立即执行（异步禁止使用docuemnt.write();会清除所有元素）。
-
遇到img标签等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。
-
当文档解析完成，document.readyState = “interactive”；
-
文档解析完成后，所有设置有defer的脚本会按照顺序执行。
-
当文档解析完成之后，document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。
-
当所有saync的脚本加载完成并执行后，img等加载完成后，document.readyState = “complete” window对象触发load事件。
-
从此，页面以异步响应方式处理用户输入，网络事件等。
<h1>js加载时间线</h1>
<div></div>
<script>
console.log('loading:',document.readyState);
//文档全部加载渲染完成
window.onload = function(){
console.log('window.onload:',document.readyState);
}
document.onreadystatechange = function(){
console.log('readystatechange:',document.readyState);
}
//DOM解析完触发事件
document.addEventListener('DOMContentLoaded',function(){
console.log('DOMContentLoaded');
})
</script>
ent.addEventListener('DOMContentLoaded',function(){
console.log('DOMContentLoaded');
})
</script>