为解决script标签引入外部脚本阻塞HTML解析的问题
添加延迟:defer
和异步:async
属性
推荐将脚本写在body标签之后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script src="../config.js" async></script>
<script src="../config.js" defer></script>
</html>
defer
:直到文档解析完再开始解析脚本(下载完脚本 等待文档解析完毕再执行脚本)
文档中排在前面的脚本先执行 适用于脚本之间存在依赖关系的场景;
async
:尽快解析脚本,不会阻塞文档的解析(下载脚本时不会阻塞HTML的解析,执行脚本时才会阻塞HTML文档解析)
,脚本不一定会按照文档中的书写顺序执行。