JSON异步加载时间线

Posted 2020-11-24 杨超

1. 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}"

2. 现在我们补充两个知识点：
   1. 重排：是引起DOM树重新计算的行为，通俗易懂的解释就是能改变DOM结构的操作（改变DOMTree），比如下边的行为：
      1. dom节点的删除，添加
      2. dom节点的宽高变化，位置变化，displa：none------>block
      3. offsetWidth     offsetLeft ：它们两个是查看宽高的，但是引擎会重新加载dom数再去计算（为了实时的得到数据，所以它也会引起dom结构的重排
   2. 重绘：一个元素外观的改变（如color）所触发的浏览器行为，通俗易懂的解释就是，不改变dom树，而是改变cssTree
      
      
3. 我们以前了解的JS都是怎么加载的呢？肯定是同步加载的，为什么同步，因为JS能改变html和css，所以当JS加载的时候就会出现阻塞。那我们的需求有时候会要求我们一步的加载JS，我们怎么来实现呢？
javascript异步的加载有三种方法：（异步：创建新的线程进行操作）
1. defer异步加载，但要等到dom文档全部解析完才会被执行。只有IE能用，也可以将代码写在内部
2. async异步加载，加载完就执行，async只能加载外部脚本，不能将js写在script标签里边（上边的两种方法执行时都不会阻塞界面）
3. 创建script，插入到DOM中，加载完毕后callback（我理解的就是动态的添加JS文件）
4. 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事件