如何实现异步加载脚本
2019-04-25 本文已影响0人
AuraAura
一般<script></script>标签引入的内容放在<head>元素中，例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</head>
<body>
<!--···内容代码-->
</body>
</html>
这样就必须等所有的js文件全部下载、解析、执行完成才能呈现<body></body>标签中的页面内容。如果存在很多js代码的页面会导致页面呈现出现很大的延迟，在这个延迟期间内页面是一片空白，即白屏。为了避免这个问题，一般推荐把js文件放在页面内容之后引入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--···内容代码-->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>
1. defer属性
在HTML 4.01中<script>定义了defer属性，用来控制在js脚本文件执行时不影响页面内容的呈现。使用defer属性后js文件被延迟到整个页面都解析完了再执行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<!--···内容代码-->
</body>
</html>
还用的defer属性时，js文件按顺序执行
2. async属性
此外<script>元素还有一个async属性，页面不用等到js代码下载执行，异步加载页面内容，与defer属性不同，async属性的js文件不按照顺序执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" async src="example1.js"></script>
<script type="text/javascript" async src="example2.js"></script>
</head>
<body>
<!--···内容代码-->
</body>
</html>
3. 其他方法
动态添加<script>标签
待学习
