script标签属性sync和defer

script标签上的async和defer属性都属于html5标准，用来优化script的下载。

1.async

script标签设置async后，会异步下载脚本，此时已经不会阻塞 UI 线程继续渲染之后的 DOM 元素。脚本下载完成后会被尽快解析和执行（不清楚暂停 UI 线程的时机）。async脚本会阻塞load事件的触发，和DOMContentLoaded事件无关。

2.defer script标签设置defer后，会异步下载脚本，此时已经不会阻塞 UI 线程继续渲染之后的DOM 元素。当 UI 线程解析完 HTML，触发DOMContentLoaded事件之前，会按顺序执行defer脚本。defer脚本会阻塞DOMContentLoaded事件的触发。

3.async与defer的联系和区别

• 绿色: 页面解析(渲染/显示)
• 蓝色: 脚本 加载(下载/获取)
• 红色: 脚本执行