defer和async属性详解

script标签的加载是同步执行的，也就是说如果将JavaScript文件放在head标签中时，必须等所有JavaScript代码下载、解析和解释完毕后，才能开始渲染页面 (页面在解析到body标签时，开始渲染），这样的话，当js文件过多时，会导致渲染延迟，浏览器空白的情况，因此一般情况我们将js文件放在页面内容之后。并且提出了延迟执行脚本异步执行脚本，通过给script标签添加属性defer或者async来实现。

1.推迟执行脚本_defer

添加了defer属性的脚本会告诉浏览器，立即下载该脚本，但是等整个页面解析完毕后再运行。HTML5规范要求脚本按照出现顺序执行，即如果两个脚本都设置了defer属性，那么等页面解析完毕后，先执行第一个脚本，再执行第二个脚本。但是在实际中，推迟执行的脚本不一定会按照顺序执行，因此最好只有一个推迟执行脚本

2.异步执行脚本_async

添加了async属性的脚本会告诉浏览器，立即下载该脚本，且不阻止页面其他动作，即，不必等到脚本下载和执行完再加载页面，也不必等该异步脚本下载和执行后再加载其他脚本。因此，如果出现两个异步脚本，则不能确定它们的执行顺序。值得注意的是，异步脚本不应该在加载期间修改DOM