script 在什么情况下使用async和defer最优？

Question

突然看到script中出现 async defer属性,不太理解,阅读了大量网上解析后,不知道怎么回事,之前感觉理解清楚了,现在我突然糊涂了(可能是没有休息好,此处是借口),不知道什么情况下使用async 和 defer 是最优的,请大神们给我一个通俗的解释.越俗越好.

以下是我理解的过程

阅读一些文档后我大概得到了以下的理解

• async:仅适用于外链,下载时不会阻塞页面链接,脚本加载后立即执行,执行时阻塞html解析,不会按顺序执行那个完成就执行哪一个.执行的时候有可能页面没有加载完成.

• defer:仅适用于外链，规定脚本延迟执行,不会阻塞页面解析,在 HTML 解析完成后,DOMContentLoaded 之前执行,按照出现的顺序执行.

得到以上理解之后看了一篇文章https://segmentfault.com/a/1190000006778717

这篇文章最后的结论是

其实这么讲来，最稳妥的办法还是把 script 写在 body 底部，没有兼容性问题，没有白屏问题，没有执行顺序问题，高枕无忧，不要搞什么defer和async的花啦~

在这片文章的评论中:

给出了使用async和defer的好处:节省时间

那问题来了,在优化的情况下,

问题一:我想使用async和defer,什么时候使用async defer不会出现兼容,白屏等问题,

问题二:或者说在出现兼容,白屏等问题,在优化的情况下有没有解决方案

Answer 1

参考GPT和自己的思路：

对于问题一，最优的情况是当你的脚本对页面的呈现不需要直接影响，比如在页面的底部加载一些跟用户交互无关的统计脚本等等。这时，可以使用async和defer，异步加载脚本，使得页面的渲染不受影响，同时不会导致兼容性、白屏等问题。具体来说，如果你不需要让页面等待脚本加载完成而直接执行，使用async能提高加载速度；如果你需要按照顺序依次加载脚本，使用defer可以保证顺序。

对于问题二，如果出现兼容性、白屏等问题，可以考虑以下几个解决方案：

1. 使用jQuery的$.getScript()来异步加载脚本，这样能够避免使用async和defer带来的问题。

2. 通过动态创建script标签，并设置defer属性，达到异步加载脚本的效果，并且保证执行顺序。

3. 如果必须使用async属性加载脚本，并且带来了一些问题，可以在脚本中使用DOMContentLoaded事件（或jQuery的$(document).ready()），在页面加载完成后再执行脚本。这样能够兼容大多数情况，在效率和兼容性之间寻找平衡。

总之，在使用async和defer的过程中，需要仔细考虑脚本对页面的影响，避免出现兼容性、白屏等问题，同时寻找最优方案，优化页面性能。