异步加载 JS 的3种方法

方法一

定义和用法:(兼容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>

异步加载 JS 的3种方法

猜你喜欢