异步加载 JS 的3种方法

最新推荐文章于 2024-04-25 15:19:41 发布

生命在于行动

最新推荐文章于 2024-04-25 15:19:41 发布

阅读量1.7k

点赞数 1

分类专栏： JavaScript 文章标签： javascript 页面优化

本文链接：https://blog.csdn.net/lidong081824/article/details/72779550

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

网站首页往往是官网的脸,如果千呼万唤始出来的话就会给浏览者一种想死的心理,我上一家公司的经理就曾经给我提到过这个首页加载炒鸡慢的问题,不过很遗憾,当时我并没有想到办法来解决...

方法一

定义和用法:(兼容IE9及以上,主流浏览器)
defer 属性规定当页面加载完成之后,才会执行脚本,严格意义上来讲它并不是异步的,原理是延迟了加载。
defer 属性仅适用于外部脚本,只用在使用src属性时生效

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js" defer="defer"></script>

方法二

定义和用法:(兼容所有浏览器)
async 属性规定一旦脚本可用,就会异步的加载。即当页面开始解析时,js就开始加载,同时进行。
async 属性仅适用于外部脚本,只用在使用src属性时生效

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js" async="async"></script>

方法三

动态创建script标签（兼容所有浏览器）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动态创建 script 标签</title>
		<script type="text/javascript">
			(function(){
				//创建script标签
				var att = document.createElement("script");
				//设置type属性值
				att.type = "text/javascript";
				//设置你需要加载js
				att.src = "http://code.jquery.com/jquery-1.7.2.min.js";
				//获取新创建的script节点
				var attScript = document.getElementsByTagName("script")[0];
				//将新建的节点插入到  当前节点的父节点下面已有子节点之前
				attScript.parentNode.insertBefore(att,attScript);
			})();
		</script>
	</head>
	<body>
	</body>
</html>

效果图如下