# xml写法
<student>
<name>deng</name>
<age>40</age>
</student>
2
3
4
以前是以xml来传输数据的,最后逐渐被json取代
# json
json
json是一种传输数据的格式,传输的是对象,在前后端互相配和互相传送数据的时候就有一个固定的格式json---- > {}
以前用的xml现在我们传的是对象本来传的是对象,为了和其他的对象分开来我们专门将这个对象命名为json
# json书写格式
{
"name": "deng",
"age": "123"
//以前的对象属性可以不加"" 但是json格式必须加
}
2
3
4
5
# json用法
json用法
JSON.pares() String-- >json 可以把字符串转换为对象
JSON.stringify() json-- > string 可以把json对象转换为字符串.自动给属性加""
# 浏览器绘制页面过程
浏览器绘制页面过程
解析过程会按照深度优先原则,一条树看完看树的枝干再看另外一条树
首先浏览器内核会对页面进行一步一步的检查代码,首先识别HTML代码,然后形成一个dom树,他会一行一行识别html代码然后把他挂到树上去,整个文档是先解析完之后再去加载,比如img标签他是先解析再去一步的加载,所有的DOM树解析完才会去下载图片等地址
dom树形成之后再去形成css树,等css树形成之后他会和dom树拼在一起形成一个新的渲染树randerTree,在渲染树形成之后渲染引擎才会根据渲染树的每一条规则绘制页面
domTree+cssTree=randerTree
dom树节点的删除添加宽高变化display,offsetwidth,offsetLeft``会影响渲染树,渲染树会重构(reflow),效率最低,编程要尽量避免重构
repaint 重绘 改变字体大小等都会重绘页面
# 异步加载
js加载会阻断Html和css的加载线,js是同步加载,就是读到就是就会阻断页面,等js执行完之后下边的内容才会执行,那为什么js的下载过程和执行过程不能和html和css并行去做呢？因为js会修改html和css，还没绘制完就修改了,这是不可行的.
js加载的缺点
加载工具方法没有必要阻塞文档,过多js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作
有些工具方法需要按需加载,用到再加载,不用不加载
# 异步加载三种方案
1.defer异步加载,但要等到dom文档全部解析完毕时才会被执行,只有ie及ie9以下能用,好处是也可以将代码写到内部,它的执行时刻在页面解析完才执行
<script type="text/javascript" src="tools.js" defer="defer"></script>
2.async异步加载,加载完立即执行,只能引入外部加载js脚本，ie9及以下不能用,谷歌火狐等浏览器也可以用,缺点是不能把js写在script标签里
<script type="text/javascript" src="tools.js" async="async"></script>
async和defer不能同时使用，因为他们的执行时刻不一样
第三种异步加载 创建script,插入到dom中,加载完毕后callBack,并且是按需加载。
var script = document.createElement("script");
//创建script标签
script.type = "text/javascript";
script.src = "tools.js";
//系统会在这儿开始异步下载tools.js
document.head.appendChild(script);
//当把标签插入到页面中才会去执行脚本
2
3
4
5
6
7
外部js里面如果写了test函数,在此test();会报错,在加载外部文件时他会发一个请求，需要一个过程，还没等反馈过来时，他已将将后面代码执行完了所以会报错
# 解决方法load
script.onload = function () {
test();
//当上面的下载完毕后才执行onload方法
// 兼容性:safari chrome firefox opera
}
2
3
4
5
唯独IE在script没有load事件
IE里的script上有个状态码,readyState就是一个属性，里边存值了，一开始是“loading”，加载完之后里边的值会变成“complete”或“loaded”，提供了一个事件,onreadystatechange，就是当里边的状态码发生改变的时候触发这个事件
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "tools.js";
script.onreadystatechange = function () {
if (script.readyState == "complete" || script.readyState == "loaded") {
test();
}
}
document.head.appendChild(script);
2
3
4
5
6
7
8
9
# 封装函数
封装函数loadScript，解决异步加载的兼容性问题
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.head.appendChild(script);
//loadScript('demo.js',test);
//此时test函数在demo.js里面,
//执行此方法会先执行demo.js,读到test会报错
loadScript('demo.js', function () {
test();
});
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# js加载时间线
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()，因为当你整个文档都加载完的时候，再调用document.write()，会把之前所有的文档流都清空，用它里面的文档代替）
（5）遇到 img 等（带有 src），先正常解析 dom 结构，然后浏览器异步加载 src， 并继续解析文档。
（6）当文档解析完成（domTree 建立完毕，不是加载完毕），document.readyState ='interactive'。
（7）文档解析完成后，所有设置有 defer 的脚本会按照顺序执行。（注意与 async 的 不同,但同样禁止使用 document.write()）;
（8）文档解析完成后，document 对象触发 DOMContentLoaded 事件，这也标志着程 序执行从同步脚本执行阶段，转化为事件驱动阶段。
（9）当所有 async 的脚本加载完成并执行后、img 等加载完成后（页面所有的都执 行加载完之后），document.readyState = 'complete'，window 对象触发 load 事件。
（10）从此，以异步响应方式处理用户输入、网络事件等。
console.log(document.readyState); //loading
document.onreadystatechange = function () {
console.log(document.readyState);
//interactive complete
}
2
3
4
5
DOMContentLoaded事件，只在addEVeventListener绑定上好用,可以写在 head 上部,解析完才执行
document.addEventListener("DOMContentLoaded", function () {
console.log("a");
}, false)
2
3