目录
JSON简介
异步加载JS
js加载时间线
网页渲染的过程
JSON是一种传输数据的格式
（以对象为样板，本质上就是对象，但用途有区别，对象就是本地用的，json是用来传输的）
JSON.parse(); string -> json
JSON.stringify(); json -> string
过去传输数据的格式：Xml （ 可以自定义标签）
HTML 不可以自定义标签
现在传输数据的格式：json （对象）。区别：json属性名必须加双引号，但是对象没有这个强制规定。
前端与后台之间传输的数据是字符串格式的。如：'{"name" : "deng","age" : 123}'
e.g:
前端往后端传数据时：
var obj = {
"name" : "abc",
"age" : 123
}
JSON.stringify(obj) ======> "{"name" : "abc","age" : 123}"
前端接收到后端传过来的数据str="{"name" : "abc","age" : 123}"时：
JSON.parse(str) =======> Object {name:"abc",age:123}
异步加载JS
js加载的缺点：加载工具方法没必要阻塞文档，过多加载js会影响页面效率，一旦网速不好，那么整个网站将等待js加载而不进行后续渲染工作。有些工具方法需要按需加载，用到再加载，不用不加载。
同步加载如：<head>
<script type="text/javascript" src="tools.js"> </script>
</head>
javascript异步加载的三种方案：
1、defer异步加载，但要等到dom文档全部解析完时才会被执行。只有IE能用，也可以将代码写到内部。不阻塞页面。
<head>
<script type="text/javascript" src="tools.js" defer="defer">内部可以写js代码</script>
</head>
2、async异步加载，加载完就异步执行，async只能加载外部脚本，不能把js写在script标签里。W3C标准方法，非IE浏览器和高版本IE浏览器可用，不阻塞页面。
<head>
<script type="text/javascript" src="tools.js" async="async">内部不可以写js代码</script>
</head>
3、创建script，插入到DOM中，加载完毕后callBack。可以按需加载（最常用）
<body>
<script type="text/javascript">
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "tools.js";//此时开始异步加载tools.js资源，但是不执行该js内的语言
document.head.appendChild(script);//此时才执行，所以可以通过控制这句指令，来按需使用。
script.onload = function(){ // safari chrome firefox opera可以用 IE的script标签没有load事件
some function in tools.js
}
IE中使用script.readyState loading---->complete/loaded
script.onreadystatechange = function(){
if(script.readState == 'complete" || script.readyState == "loaded"){some function}
}
</script>
</body>
封装：
function loadScript(url,callback){
var script = document.createElement('script');
script.type = "text/javascript";
if(script.readyState){
script.onreadystatechange = function(){
if(script.readyState == 'complete' || script.readyState == 'loaded'){
callback();
}
}
}else{
script.onload = function(){
callback();
}
}
script.src = url;
document.appendChild(script);
}
loadScript('demo.js',function(){
test();
});//传入的第二个参数是一个函数引用，这样可以防止未定义函数名报错。实现按需加载。
或使用如下：
js加载时间线
1、创建Document对象，开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState='loading'。
2、遇到link外部css，创建线程加载，并继续解析文档。
3、遇到script外部js，并且没有设置async、defer，（同步加载）浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。
4、遇到script外部js，并且设置有async、defer，浏览器创建线程加载，并继续解析文档，对于async属性的脚本，脚本加载完成后立即执行。（异步脚本中禁止使用document.write()，此时会消除之前的文档流）
5、遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。
6、当文档解析完成，document.readyState= ‘interactive’。
7、文档解析完成后，所有设置有defer的脚本会按照顺序执行。（注意与async的不同，但同样禁止使用document.write()）
8、document对象触发DOMContentLoaded事件(该事件只能在addEventListener上绑定)，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。
9、当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState = 'complete'，window对象触发load事件。
10、从此，以异步相应方式处理用户输入、网络事件等。
注：
文档解析完成的状态变化：1、document.readyState= ‘interactive’；2、document对象触发DOMContentLoaded事件
文档加载完成的状态变化：1、document.readyState = 'complete'；2、window对象触发load事件
网页渲染的过程：
1、DOM节点解析：找到HTML元素，并按照深度优先原则，绘制DOM树。遇到img等有src资源的元素，先不下载资源。
2、异步下载资源同时发生
3、根据CSS元素生成CSS树（深度优先原则）
4、CSS树和DOM树拼在一起形成randerTree
5、渲染引擎按照randerTree开始渲染界面
DOM优化：尽量减少DOM节点的增删改查、DOM节点的宽高变化，位置变化，字体宽高重设，display none-->block，offsetWidth offsetLeft ,以减少randerTree重建（reflow），俗称重排或重构。编程要尽量避免重排。
重绘（repaint）,浪费的效率少。如：更改背景颜色，字体颜色。
今日良言：一个人能够同时保有两种截然相反的观念，还能正常行事，这是第一等智慧的标志。----菲茨杰拉德（Fitzgerald）
![Ajax——模板引擎[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)