前言

JavaScript的文件执行时机：

• 立即加载
• 延迟加载

一、立即加载方式

• 没有async或defer，浏览器会立即加载并执行指定的脚本，“立即”指的是渲染该script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
• 示例：<script src="demo.js"></script>

二、延迟加载方式

2.1 async 和 defer

• async。有async，会在HTML文档解析时并行下载文件，并在下载完成后立即执行（暂停HTML解析）。有可能出现脚本执行顺序被打乱的情况。
  示例：<script async src="demo.js"></script>
• defer。有defer，加载后续文档元素的过程将和demo.js的加载并行进行（异步），但是demo.js。
  示例：<script defer src="demo.js"></script>

2.2 async 和 defer 的对比

• defer和async的相同点：
  • 加载文件时不阻塞页面渲染；
  • 对于inline的script无效；
  • 使用这两个属性的脚本中不能调用document.write方法；
  • 有脚本的onload的事件回调；
• defer和async的区别：
  • HTML4.0中定义了defer，HTML5.0中定义了async；
  • 浏览器支持不同；
  • 加载时机不同；
• 注意点：
  • 动态添加的标签隐含async属性

三、inline script加载防阻塞的方式

• 将script移动到页面底部。虽然仍然阻碍渲染，但是不会阻碍页面资源的下载；
• 使用settimeout启动长时间执行的代码；
• 将inline scrip以非inline的行为处理；