JavaScript script标签中 async 和 defer 的作用

sync和defer

浏览器在加载、执行js文件时，会阻塞Dom元素的渲染，所以为了避免首屏白屏问题，一般将js文件放到body的最后，保证先渲染Dom元素，再加载执行js文件。

除了把js文件放到body的后面，也能把js文件放到header中，只要加上异步属性async或defer

绿色是GUI渲染线程（解析HTML文件，构建DOM树）
红色是JS引擎线程（解析js文件，执行代码）
因为GUI渲染线程和JS引擎线程互斥，所以两者不能并行

什么时候用async，什么时候用defer？

注意事项

1. 内置js代码的script标签，以及动态生成的script标签，defer属性不生效
2. 有defer或async属性的script标签脚本文件里不能使用document.write方法
3. 若同时使用async和defer，defer不起作用，async生效

参考文章

1. https://www.cnblogs.com/gqymy/p/10473909.html
2. https://segmentfault.com/a/1190000006778717
3. https://segmentfault.com/q/1010000000640869
4. https://blog.csdn.net/weixin_43967603/article/details/106309099