JS的异步加载和时间线

绝地灬酷狼 2022-12-01 03:55 155阅读 0赞

# JSON理解和使用 #

我们先说一下json：  
JSON是一种传输格式，它是服务端和客户端之间的数据传输的。  
JSON规范代码是类似对象的数据就像把对象用单引号引起来的  
例子：

> ‘\{“name”: “lilei”,“age”:18\}’

在这里有两个方法一个是stringify和parse  
这两个的作用理解：

1.  stringify的使用方法和理解  
    使用方法  
    var she = JSON.stringify();  
    理解：  
    这个方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串
2.  parse的使用方法和理解  
    使用方法;  
    var she = JSON.parse();  
    理解：  
    这个方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。提供可选的reviver函数用以在返回之前对所得到的对象执行变换

在说js的异步加载的之前先说一下js的同步加载：

# js同步加载 #

加载到js文件的是会等待js文件加载完成且执行完成 再继续执行后面的代码（html css js）  
js同步加载的原因： js是能够修改DOM结构 renderTree

这样的话就相当于说程序加载出现了阻塞，所以我们要防止阻塞或重排

# js异步加载 #

1、什么是异步加载  
使js文件脱离html解析的文档流加载，从而使js可以并行下载。

2、为什么要异步加载  
一般写法将js放在head中，而且默认方式是同步加载，这就会导致在进行js加载的过程中，无法在其加载完成前对后续的内容进行操作，造成页面内阻塞，对用户体验很不友好。  
3、如何使其加载方式变成异步加载

**①使用defer方法**  
这个方法是只兼容IE9以下版本的  
用法：

**②使用async方法**  
这个方法是兼容苹果、谷歌、火狐、欧朋这几大浏览器的  
用法：

**③通用的方法**  
创建一个script标签，插入到DOM中，加载完毕后callback 兼容性最好的  
用法例子：

# js时间线 #

前言：时间线在js中占很重要的地位  
优化DOM、逻辑正确时输出的为什么是undefind，很有可能都是时间线在作祟

*  创建Document对象，再开始解析web页面。解析hrml里面的标签元素和他们的文本内容后添加Element对象和文本节点到文档中，这个阶段document.readyState = ‘loading’
 *  遇到link外部css，创建线程加载，并继续解析文档。
 *  遇到script外部js，并且没有设置async、defer，同时浏览器加载，并阻塞，这时会等待js加载完成并执行该脚本，然后继续解析文档。这时解析的是js同步文件
 *  遇到script外部js，并且同时设置有async、defer，浏览器会创建线程加载，并继续解析文档。对于async属性的脚本，脚本加载完成后立即执行。 -
 *  遇到img等，先正常解析dom结果，然后浏览器异步加载src（图片资源），并继续解析文档。注意：img本来就是会进行异步加载的方式加载的。当文档解析完成，这个阶段就是document.readyState = ‘interactive’，文档解析完成后，所有设置有defer异步加载的脚本按照顺序执行。
 *  document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转换为事件驱动阶段。注意：事件驱动阶段则就是浏览器正常发挥功能
 *  当所有async的脚本的加载完成并执行后、img等加载完成后，这个阶段document.readyState = ‘complete’,window对象触发load事件，这个时候也就是页面的所有的内容解析完和加载完成了
 *  从此，以异步响应式处理用户输入、网络事件等。