Script的加载和执行

# Script的加载和执行

<head>
  <script src="script1.js" defer></script>
  <script src="script2.js" async></script>
</head>

1
2
3
4

# defer

延迟脚本：该脚本会被马上加载，但是脚本会被延迟到整个页面都解析完再执行，即等浏览器遇到</html>标签后再执行。并且这两个脚本会按顺序执行。

异步获取脚本，不会停止HTML渲染，在DOM事件domInteractive之后，开始执行脚本，执行完成之后，触发domComplete事件，然后是onLoad事件。

# async

异步脚本： 指异步加载而不是异步执行；一旦加载完毕就会执行代码，而执行的过程肯定还是同步的，也就是阻塞的。

异步获取脚本，之后如果HTML没有渲染完毕，中断HTML渲染，执行脚本，然后继续渲染后续的HTML内容。

# noscript标签

如果浏览器不支持支持脚本，那么它会显示出 noscript 元素中的文本。

<body>
    ...
    ...
    <script type="text/vbscript">
    <!--document.write("Hello World!")'-->
    </script>

    <noscript>Your browser does not support VBScript!</noscript>
    ...
    ...
</body>

1
2
3
4
5
6
7
8
9
10
11

# 总结

将所有的<script>标签放到页面底部，也就是</body>闭合标签之前，这能确保在脚本执行前页面已经完成了渲染。
尽可能地合并脚本。页面中的<script>标签越少，加载也就越快，响应也越迅速。无论是外链脚本还是内嵌脚本都是如此。

采用无阻塞下载 JavaScript 脚本的方法：

使用<script>标签的defer属性（仅适用于 IE 和 Firefox 3.5 以上版本）；
使用动态创建的<script>元素来下载并执行代码；
使用 XHR 对象下载 JavaScript 代码并注入页面中。通过以上策略，可以在很大程度上提高那些需要使用大量 JavaScript 的 Web 网站和应用的实际性能。

← 图片懒加载防抖多列表的骚操作→