async和defer

链接script的问题

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
    <script src="./index.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

index.js：

1 2	const app = document.querySelector('#app') console.log(app) // -> null

可以看到，因为在执行JS时候，#app元素尚未被渲染，所以app的值是null

解决方法诸如将链接script放在#app后、或在JS中使用window.onload

但在做前端工程化项目时，生成的script标签会很多，将它们逐个处理费时费力

async和defer

这时就要缕清script的加载时机了

正常情况下，当需要加载script时，HTML将暂停加载，等待script下载执行完毕再继续
当开启async后，script的下载会与并行HTML的加载并行，直到script下载完毕，则HTML停止加载、script开始执行；执行完后，HTML恢复加载
当开启defer后，script的下载会与并行HTML的加载并行，但直到HTML加载完毕，才会执行script