# Script的加载和执行

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

# 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>

# 总结

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

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

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