一、Js延迟加载的方式
Js延迟加载的方式有许多,比如:动态创建、setTimeout,等等。
重点:async、defer即使在HTML之前写,也可以在HTML加载之后执行
- async:与html解析同步加载,不按顺次执行(谁先加载完谁先执行)
- defer:等html全部执行完才执行js代码,按顺次执行js脚本
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Normal mode to load js script(1) -->
<script type="text/javascript" src="script.js"></script>
<!-- Delay mode to load js script -->
<script async type="text/javascript" src="script.js"></script>
<script defer type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>HTML ISSUES</h1>
<!-- Normal mode to load js script(2) -->
<script type="text/javascript" src="script.js"></script>
</body>
</html>
正常加载对比:提升效率一般建议使用方案(2)
(1)先加载js脚本,后解析html
(2)先解析html,后加载js脚本