JSON、异步加载JS、JS时间线

最新推荐文章于 2022-02-12 11:16:47 发布

Persiguiendo

最新推荐文章于 2022-02-12 11:16:47 发布

阅读量136

点赞数

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/Persiguiendo/article/details/108482212

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JSON

JSON.parse(); string ——> json
JSON.stringify(); json ——> string

异步加载JS

js 加载的缺点：加载工具方法没必要阻塞文档，过多 js 加载会影响页面效率，一旦网速不好，那么整个网站将等待 js 加载而不进行后续渲染等工作
有些工具方法需要按需加载，用到时再进行加载
JavaScript 异步加载的三种方法：
1. defer 异步加载。但要等到 dom 文档全部解析完才会被执行。只有 IE 能用，也可以将代码写到内部。执行时不阻塞页面
2. async 异步加载，加载完就执行，async 只能加载外部脚本，不能把 js 写在 script 标签中。执行时不阻塞页面
3. 创建 script，插入到 DOM 中，加载完毕后 callback

function loadScript(url, callback) {
	var script = document.createElement('script');
	script.type = "text/javascript";
	if(script.readyState) {
		script.onreadystatechange = function () { // IE 
			if(script.readyState == "complete" || script.readyState == "loaded") {
				callback();
			}
		}
	} else {
		script.onload = function () { // Safari Chrome Firefox Opera
			callback();
		}
	}
	script.src = url; // 最后挂载 
	document.head.appendChild(script);
}

// demo.js
function test() {
	console.log('test');
}

loadScript('demo.js', function () {
	test();
})

JS 加载时间线

创建 Document 对象，开始解析 web 页面。解析 HTML 元素和它们的文本内容后添加 ELement 对象和 Text 节点到文档中。这个阶段 document.readyState = ‘loading’
遇到 link 外部 css，创建线程加载，并继续解析文档
遇到 script 外部 js 时，并且没有设置 async、defer，浏览器加载，并阻塞，等待 js 加载完成并执行该脚本，然后继续解析文档
遇到 script 外部 js，并且设置有 async、defer，浏览器创建线程加载，并继续解析文档。对于 async 属性的脚本，脚本加载完毕后立即执行（异步禁止使用 document.write()）
遇到 img 等，先正常解析 dom 结构，然后浏览器异步加载 src，并继续解析文档
当文档解析完成，document.readyState = ‘interactive’
文档解析完成后，所有设置有 defer 的脚本会按顺序执行（注意与 async 的不同，但同样禁止使用 document.write()）
document 对象触发 DOMContentLoaded 事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段
当所有 async 的脚本加载完成并执行后、img 等加载完成后，docume.readyState = ‘complete’，window 对象触发 load 事件
从此，以异步响应方式处理用户输入、网络事件等