js异步加载的五种方式
前言
默认情况下js都是同步加载的,又称阻塞模式,如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js异步加载</title>
<script src="test1.js"></script>
<script src="test2.js"></script>
</head>
<body>
<!--这是页面内容-->
</body>
</html>
这种模式也就意味着必须把所有js代码都下载、解析和解释完成后,才能开始渲染页面(页面在浏览器解析到<body>的起始标签时才开始渲染)。显然,这样会导致页面渲染的明显延迟,在此期间浏览器窗口完全空白。而且如果JS中有输出document内容、修改dom、重定向的行为,就会造成页面阻塞。当然为了解决这个问题,我们可以把所有Js引用都放在<body>元素中的内容之后,如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js异步加载</title>
</head>
<body>
<!--这是页面内容-->
<script src="test1.js"></script>
<script src="test2.js"></script>
</body>
</html>
但是如果我们想要放在上面呢?有没有办法呢?当然有,接下来我们来看看Js异步加载的四种方式:
js异步加载的四种方式
1、<script>
标签的defer=“defer”属性
<script defer="defer" src="test1.js"></script> //先执行
<script defer="defer" src="test2.js"></script> //后执行
- 脚本会被延迟到整个页面都解析完毕再运行(相当于告诉浏览器立即下载,但延迟执行)
- 如果脚本不会改变文档的内容,可将
defer
属性加入到<script>
标签中,以便加快处理文档的速度 - 会按出现顺序执行
- 只对外部脚本文件有效
- 兼容所有浏览器
2、<script>
标签的async="async"
属性
<script async="async" src="test1.js"></script> <script async="async" src="test2.js"></script>
- async是HTML5新增属性
- 需要Chrome、FireFox、IE9+浏览器支持
- 不会保证按出现的次序执行
- 只对外部脚本文件有效
3、动态创建<script>标签
var script = document.createElement("script"); script.src = "test.js"; document.head.appendChild(script);
- 兼容所有浏览器
4、$(document).ready()
$(document).ready(function() { alert("加载完成!"); });
- 需要引入jquery
- 兼容所有浏览器
5、onload异步加载
window.onload = function (){ console.log("异步加载") }
- onload事件会在整个页面加载完后才触发(注意是触发,不是执行)。