何时在加载脚本时使用async vs defer?

Fel*_*ime 11 html javascript jquery asynchronous

所以我最近了解到将你的js置于DOM的底部是过时的,我应该再次将它们放入<head>"async"和"defer"属性中.

大.但基于优先级,我对应该使用哪个有点困惑.

所以我有:

  • jQuery的
  • jquery插件对页面外观没有直接影响
  • jquery插件对页面外观有直接影响
  • 我自己的个人脚本,它们对页面的外观有直接影响,并且还依赖于jquery

哪个应该异步,哪个应该延迟?

如果我理解了这一切,那些对网站外观没有直接影响的应该延迟,而其他一切都是异步的.正确?或者我把这些混淆了.

Mic*_*ski 15

这很简单.您应该使用[async]可以按任何顺序执行[defer]的脚本,以及在解析HTML之后必须执行的脚本.

例如,如果您的脚本在帖子旁边添加社交共享图标,并且此脚本不依赖于任何其他脚本,则可以同时使用[async][defer].但是如果你的脚本需要jQuery,你就不能使用[async],因为如果你这样做,它可能会在jQuery加载之前执行它并且它会中断.

如果您的所有脚本都需要jQuery,那么您根本不应该使用它[async].至于[defer],它取决于您的脚本是否访问DOM.对于插件,它可能无关紧要,但您可能需要它来为您自己的代码.

如果将脚本包装起来$(document).ready();,则可以使用[defer]不具有直接效果的脚本(例如,需要用户交互).