问题描述
所以我最近了解到将你的js置于DOM的底部是过时的,我应该再次将它们放入< head>
使用async和defer属性。
So I've recently learned that putting your js at the bottom of the DOM is antiquated, and that I should be once again putting them in the <head>
with the "async" and "defer" attributes.
太棒了。但是基于优先级,我对应该使用哪个有点困惑。
Great. But I'm a bit confused as to which I should use, based on priority.
所以我有:
- jquery
- jquery插件对
页面的外观没有直接影响 - 对页面外观有直接影响的jquery插件
- 我自己的个人脚本,它对页面的
外观有直接影响,同时也依赖于jquery
- jquery
- jquery plugins that don't have immediate effects on the look of thepage
- jquery plugins that do have immediate effects on the look of the page
- my own personal scripts, which have immediate effects on the look ofthe page, and is also reliant on jquery
哪个应该异步,哪个应该延迟?
Which should get async, and which should get defer?
如果我理解了这一切,那些对网站外观没有直接影响的应该延迟,而其他一切都是异步的。正确?或者我把这些搞混了。
If I understand all this correctly, the ones that don't have an immediate effect on the look of the site should get defer, while everything else gets async. Correct? Or am I getting these mixed up.
推荐答案
这很简单。对于可以按任何顺序执行的脚本,您应该使用 [async]
;对于具有任何顺序的脚本,您应该使用 [defer]
解析HTML后执行。
It's quite simple. You should use [async]
for scripts which can be executed in any order, and [defer]
for scripts which have to be executed after HTML is parsed.
例如,如果你有一个脚本在你的帖子旁边添加社交分享图标,这个脚本不依赖于任何其他脚本,你可以使用 [async]
和 [defer]
。但是如果您的脚本需要jQuery,则不能使用 [async]
,因为如果这样做,可能会发现它在加载jQuery之前被执行并且它会中断。
For example, if you have a script that add social sharing icons next to your posts, and this script doesn't rely on any other script, you can use both [async]
and [defer]
. But if your scripts requires jQuery, you can't use [async]
, because if you do, it might turn out that it gets executed before jQuery is loaded and it breaks.
如果所有脚本都需要jQuery,那么你根本不应该使用 [async]
。至于 [defer]
,这取决于你的脚本是否访问DOM。对于插件,它可能无关紧要,但您可能需要它来代替您自己的代码。
If all your scripts require jQuery, then you shouldn't use [async]
at all. As for [defer]
, it depends on whether your scripts access DOM. For plugins it probably doesn't matter, but you'll probably need it for your own code.
如果您将脚本包装在 $(文件).ready();
,您可以使用 [defer]
来查找没有立即生效的脚本(例如,需要用户交互)。
If you wrap your scripts in $(document).ready();
, you can use [defer]
for scripts which don't have immediate effect (e.g. require user interaction).
这篇关于何时在加载脚本时使用async vs defer?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!