JSON、异步加载、时间线

JSON（其实他就是一个对象，但是和对象唯一不同的地方在与，我们常常在对象里给属性名不加双引号，但是，json必须给属性名加双引号）
1. json是一种传输数据的格式
2. 对象（属性名加不加双引号都行）
  1. ```
  var ob = {
                  name:"yang",
                  age:25;
                  height:123
              }
```
3. json（属性名必须加双引号）
  1. ```
  var ob = {
                  "name":"yang",
                  "age":25;
                  "height":123
              }
```
4. json的两个方法
  1. JSON.parse(); string------>json 这个方法就是将字符串格式地json转换成json
  2. JSON.stringify(); json-------->string 这个方法就是将json转换成字符串的json格式
  3. 上边为什么要这样转换呢？？？上边我们说到过，json就是为了数据的传输，其实在传输的过程当中是以json的格式在传输，其实都是字符串格式地json格式，所以，当我们想要给后台传输数据的时候就需要把json转换成字符串形式的json，当我们拿到后台的数据时，我们拿到的也是字符串形式的json，所以我们就需要自己来转换
  4. ```
  var ob = {
                  "name":"yang",
                  "age":25;
                  "height":123
              }
              JSON.stringify(ob);    这样就把ob转换成字符串形式的json         "{"name":"yang","age":25,"height":123}"
```
现在我们补充两个知识点：
1. 重排：是引起DOM树重新计算的行为，通俗易懂的解释就是能改变DOM结构的操作（改变DOMTree），比如下边的行为：
  1. dom节点的删除，添加
  2. dom节点的宽高变化，位置变化，displa：none------>block
  3. offsetWidth offsetLeft ：它们两个是查看宽高的，但是引擎会重新加载dom数再去计算（为了实时的得到数据，所以它也会引起dom结构的重排
2. 重绘：一个元素外观的改变（如color）所触发的浏览器行为，通俗易懂的解释就是，不改变dom树，而是改变cssTree
我们以前了解的JS都是怎么加载的呢？肯定是同步加载的，为什么同步，因为JS能改变HTML和css，所以当JS加载的时候就会出现阻塞。那我们的需求有时候会要求我们一步的加载JS，我们怎么来实现呢？

defer异步加载，但要等到dom文档全部解析完才会被执行。只有IE能用，也可以将代码写在内部
async异步加载，加载完就执行，async只能加载外部脚本，不能将js写在script标签里边（上边的两种方法执行时都不会阻塞界面）
创建script，插入到DOM中，加载完毕后callback（我理解的就是动态的添加JS文件）

JS加载时间线
1. 创建Document对象，开始解析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. 当文档解析完成（DOMTree构建完成时），document.readyState='interactive'
7. 文档解析完成后，所有设置defer的脚本会按照顺序执行 (异步禁止使用document.write();)
8. document对象触发DOMContentLoader事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段
9. 当所有async的脚本加载完成并执行后、img等加载完成后，document.readtState='complete',window对象触发load事件

posted @ 2019-12-04 19:07 杨超（yc）阅读(292) 评论(0) 编辑收藏举报

刷新页面返回顶部

杨超

JSON、异步加载、时间线

公告