标签位置
现代Web应用程序通常将所有JavaScript引用放在元素中的页面后面
推迟执行脚本
HTML4.01为
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script defer src = "example1.js"></script>
<script defer src = "example2.js"></script>
</head>
<body>
</body>
</html>
derfer属性只对外部脚本文件才有效
异步执行脚本
HTML5为
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script async src = "example1.js"></script>
<script async src = "example2.js"></script>
</head>
<body>
</body>
</html>
第二个脚本可能先于第一个执行,重点是他们之间有没有依赖关系
异步脚本保证会在页面的load事件前执行,但可能在DOMContentLoaded之前或之后
动态加载脚本
创建一个script元素并将其添加到DOM即可
let script = document.createElement('script');
script.src = 'gibberish.js';
document.head.appendChild(script);
以这种方式创建的
let script = document.createElement('script');
script.src = 'gibberish.js';
script.async = false;
document.head.appendChild(script);
这种方式可能会严重影响性能可任意在文档头部显式声明它们
<link rel = "preload" herf = "gibberish.js">