When to use async vs defer when loading scripts?
Question
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.
So I have:
- jquery
- jquery plugins that don't have immediate effects on the look of the page
- jquery plugins that do have immediate effects on the look of the page
- my own personal scripts, which have immediate effects on the look of the 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.
1 answers
solution1
13 ACCPTED 2017-06-08 19:19:01
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.
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.
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.
If you wrap your scripts in $(document).ready(); , you can use [defer] for scripts which don't have immediate effect (eg require user interaction).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.