1.前后端数据传输——JSON
本来用XML传输数据
<student>
<name>deng</name>
<age>40</age>
</student>
数据库的基础格式也是XML
现在改为对象的形式，即JSON
{
"name" : "deng",
"age" : 40
}
通常对象的属性名可加或不加双引号，但为了将JSON与对象区别，要求JSON属性必须加双引号
- 传输形式——字符串
‘{"name" : "deng","age" : 40}’
- 静态类JSON的方法
（1）JSON.stringgify(obj)
将对象转换为字符串的形式，给对象属性和整体加引号
obj = {
name : "deng",
age : 40
}
JSON.stringgify(obj);
// 转换为 ‘{"name" : "deng","age" : 40}’
（2）JSON.parse(obj)
将后端传来的字符串形式JSON转换为对象格式
HTML和CSS是同时加载的 DOM树要先解析完再加载资源 DOM——深度优先，将一条枝干识别后再识别另一条枝干 深度优先和广度优先
<img>标签先被挂在DOM树上，图片资源后来再加载 然后再加载cssTree最后 组合成渲染树renderTree = domTree + cssTree
DOM优化前提：要尽量减少节点的增加删除或一次修改完（减少reflow重排——DOM节点的增删改查、节点的宽高变化、求尺寸的offsetWidth，因为要求尺寸要在渲染页面的过程中）
repaint 重绘：只改变局部的，比如改变字体颜色、背景颜色
2.异步加载JS
- defer异步加载
要等到dom文档全部解析完才会被执行，只有IE能用，也可以将代码写到内部。 - async异步加载
加载完就执行（异步执行，不影响dom树加载），只能加载外部脚本，不能把JS写在script标签里
标签中的属性名和属性值相同时可以省略属性值，比如
<sript src = "a.js" async></sript>
- 创建script插入到DOM中，加载完毕后callback（最常用，且功能强大）
<script type = "text/javascript">
var script = document.createElement('script');
script.type = "text/javascript";
// 加上源属性，开始异步下载tools.js
script.src = "tools.js";
// 将标签置于页面中，可以执行tools.js
document.head.appendChild(script);
//此时若要执行tool.js中的函数test()
//test();
//将会报错没有test()这个函数
//因为在异步下载tools.js时，会继续执行接下来的语句，但是下载的比执行的慢
//若是将函数改成定时器作用下的
//setTimeout(test(), 1000);让其在下载完JS后再执行
//使用onload函数判断是否加载完毕（除了IE）
script.onload = function() {
test();
}
</script>
- IE中特有的异步加载方法
状态码 script.readyState = “loaded” 或 “complete”
状态码改变时触发onreadystatechange方法
script.onreadystatechange = function() {
if(script.readyState == "complete" || script.readyState == "loaded") {
test();
}
}
控制台中的Network菜单下是所有下载的资源
回调函数callback：当满足一定条件才调用的函数（比如事件处理函数）
3.JS加载时间线
- 创建document对象，解析web页面。解析HTML元素和他们的文本内容后添加Element对象，这一阶段
document.readyState = "loading";
<body>
<div></div>
<script type = "text/javascript">
console.log(document.readyState);
</script>
</body>
// script标签是DOM树中最后执行的，此时树还没加载完毕
// 因此输出 loading
- 遇到link外部css，创建线程异步加载，并继续解析文档。
- 遇到script外部JS，并且没有设置async、defer，浏览器加载并阻塞，等待js加载完成并执行
- 遇到script外部js，并设置async、defer，浏览器创建线程加载，并继续解析文档。对于async属性的脚本，脚本加载完成后立即执行（异步禁止使用document.write）；
遇到document.write时，在异步情况下会消除文档流 - 遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档；
- 当文档解析完成，
document.readyState = 'interactive'。 - 文档解析完成后（DOM树），所有设置有defer的脚本会按照顺序执行（与6同时执行）；（注意与async不同，但同样禁止document.write）
- document对象触发
DOMContentLoaded事件（只在addEventListener上绑定，这是jQuery中封装的事件触发函数所用的方法），这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段；
**重点：**相比于document.onload要等到全部资源加载完成后执行，可以在DOM树解析完时触发（但此时script标签还没有加载完），因此这个DOMContentLoaded事件更加快，效率更高。（window.onload效率最低）
<script type = "text/javascript">
document.addEventListener("DOMContentLoaded", functiong() {
//DOM树解析完要触发的函数
}, false);
</script>
- 当所有async的脚本加载完成并执行后、IMG等加载完成后，
document.readyState = "complete"，window对象触发load事件；
<body>
<div></div>
<script type = "text/javascript">
console.log(document.readyState);
// 当文档加载状态改变时就会触发 onreadystatechange函数
document.onreadystatechange = function() {
console.log(document.readyState);
}
</script>
</body>
//输出 loading interactive complete
- 从此，以异步响应方式处理用户输入、网络事件等。