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

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 加载时间线

  1. 创建 Document 对象,开始解析 web 页面。解析 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. 当文档解析完成,document.readyState = ‘interactive’
  7. 文档解析完成后,所有设置有 defer 的脚本会按顺序执行(注意与 async 的不同,但同样禁止使用 document.write())
  8. document 对象触发 DOMContentLoaded 事件,这也标志着程序执行从同步脚本执行阶段,转化为事件驱动阶段
  9. 当所有 async 的脚本加载完成并执行后、img 等加载完成后,docume.readyState = ‘complete’,window 对象触发 load 事件
  10. 从此,以异步响应方式处理用户输入、网络事件等
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值