JSON与JS异步加载详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44624386/article/details/108227830

JSON理解和使用

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

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

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

stringify的使用方法和理解
使用方法
var she = JSON.stringify();
理解：
这个方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串
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以下版本的
用法：

<script  type="text/javascript" defer>
	var num = 13;
	console.log(num);
</script>

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

<script  type = "text/javascript" async>
	var num = 15;
	console.log(num);
</script>

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

<script type="text/javascript">
     function loadScript(url, callback){
            var script = document.createElement('script');
            script.type = "text/javascript";//这个可要可不要
            script.src = url;//下载了指定地址的js文件
            //挂到DOM树上，此时才执行了js文件中的代码
            document.head.appendChild(script);
        }
     loadScript('js的外部文件名', 'intr');
</script>

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事件，这个时候也就是页面的所有的内容解析完和加载完成了
从此，以异步响应式处理用户输入、网络事件等。