json 异步加载时间线（上）有源码可以随意进行练习哈太棒了一起加油一起成长

最新推荐文章于 2022-05-13 11:41:48 发布

小白追梦

最新推荐文章于 2022-05-13 11:41:48 发布

阅读量68

点赞数

分类专栏： JS json 文章标签： js

本文链接：https://blog.csdn.net/weixin_43815680/article/details/106611221

版权

JS 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

json

4 篇文章 0 订阅

订阅专栏

1、
xml可以自定义标签

<student>
<name>deng</name>
<age>23</age>
</student>

2、json 是一种传输数据的格式（一对象为样板，本质上就是对象，但用途有区别对象就是本地用的 json是用来传输的）
JSON.parse(); string —> json
JSON.stringify(); json —> string
斜体样式 在这里插入图片描述

3、
JS异步加载
页面

randerTree 改变会导致reflow （重排）低效率的

repaint 重绘改背景颜色等效率浪费的比较少

异步加载JS
阻断 html 和 css 的下载线
有些工具方法需要按需求加载用到再加载不用不加载

缺点：加载工具方法没必要阻塞文档过多js加载会影响页面效率一旦网速不好那么整个网站将等待js加载而不进行后续渲染等工作

javascript 异步加载的三种方案
1、defer 异步加载但是要等到dom 文档全部解析完(domTree 生成完)才会被执行 只有IE能用 也可以将代码写道内部（<script> 写在这个里面</script>）
在这里插入图片描述

2、async异步加载加载完就执行 async只能加载外部脚本 不能把js 写在script标签里面
2.1 执行时也不阻塞页面
在这里插入图片描述

3、创建script 插入到DOM中加载完毕后 callBack 最常用的方式

IE没有load 事件
IE里面是 script.readState 状态码

<!DOCTYPE html>
<html lang="en">
<head>
	<title>修炼之路</title>
	<meta charset="utf-8">
	<style type="text/css">
		
	</style>

</head>
<body>
	     
	  
 	<script type="text/javascript">
 	//手写一个方法  传入两个变量  
 	function loadScript(url, callback){
 	var script = document.creatElement('script');
 	 script.type = "text/javascript";
 	 //IE 浏览器 部分
 	if(script.readyState){
 		script.onreadyStatechange = function () {
 			if(script.readyState == "comple" || script.readyState == "loaded"){
 				callback();
 			}
 		}
 	}else{
 		//非 IE浏览器部分
 		script.onload = function () {
 			callback();
 		}
 	}
     // 把这一句放在后面 确保事件先执行 避免下载太快
     //   未能绑定事件
 	script.src = url;  //url 一般指代的是js文件 
 	//最后这一句 确保 上面的操作可以展示到界面上
 	document.head.appendChild(script);
 	}
 	</script>
	
</body>
</html>

在这里插入图片描述

小白追梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
json 异步加载时间线（上）有源码可以随意进行练习哈太棒了一起加油一起成长

1、xml可以自定义标签<student><name>deng</name><age>23</age></student>2、json 是一种传输数据的格式（一对象为样板，本质上就是对象，但用途有区别对象就是本地用的 json是用来传输的）JSON.parse(); string —> jsonJSON.stringify(); json —> string斜体样式
复制链接

扫一扫