1. 起源：

因为一般情况下script.js的加载是 立即且单线程的，它会马上加载，而且阻塞其他元素（如文件、图片、html标签等）的加载。若js文件过大，加载时间过长，就会造成css样式、图片、html标签等没有加载，此时会产生诸如白屏等现象。

2. 常见处理方式：

通常将script.js写在页面底部，是引入script.js的代码最后执行。

3. 引入async和defer

也可以引入异步加载async，或者延迟加载defer来解决。

1.  async：html5中新增的属性，它的作用是能够异步的加载和执行脚本，不因为加载脚本而阻塞页面的加载。
2.  defer：一个script加了defer属性，即使放在head里面，它也会在html页面解析完毕之后再去执行，也就是类似于把这个script放在了页面底部。

4. 异同点

• 相同点：
  1. 加载文件时不阻塞页面渲染。
  2. 对于inline的script无效。
  3. 使用这两个属性的脚本中不能调用document.write方法。
  4. 有脚本的onload的事件回调。
• 不同点：
  1. html4.0中定义了defer，html5.0中定义了async。
  2. defer有顺序，async无顺序：

async属性的脚本会在下载结束后立刻执行，同时会在window的load事件之前执行，所以就会出现顺序被打乱的情况；defer属性的脚本是在页面解析完成后，按照顺序执行，同时会在document的DOMContentLoaded之前执行。