Logo WMI
Site Overview
About Privacy Policy Terms Of Service Contact
HexoJS
hexo-adsense hexo-shortcodes hexo-seo
Games
Quiz The Legend Of Neverland Chimeraland Blacklist Player
Utilities
PHP Proxy Hunter Python Proxy Hunter Android Flashtool Utility
Site Overview
About Privacy Policy Terms Of Service Contact
HexoJS
hexo-adsense hexo-shortcodes hexo-seo
Games
Quiz The Legend Of Neverland Chimeraland Blacklist Player
Utilities
PHP Proxy Hunter Python Proxy Hunter Android Flashtool Utility

Search

async vs defer attributesTagsTheasyncanddeferattributes for the

programming javascript , wordpress , php
understanding async and defer


async vs defer attributes


Tags:
The async and defer attributes for the <script> element have nice support now, so it’s time to learn exactly what they do!

Legend


http://www.growingwiththeweb.com/images/2014/02/26/legend.svg

<script>

Let's begin by process what <script> with none attributes will. The HTML file are parsed till the script file is hit, at that time parsing can stop and a call for participation are created to fetch the file (if it's external). The script can then be dead before parsing is resumed.

http://www.growingwiththeweb.com/images/2014/02/26/script.svg

<script async>

async downloads the file through out HTML parsing and can pause the HTML program to execute it once it'sfinished downloading.

http://www.growingwiththeweb.com/images/2014/02/26/script-async.svg

<script defer>

defer downloads the file throughout hypertext markup language parsing and can solely execute it once the computer program has completed. defer scripts also are guarenteed to execute within the order that they seem within the document.

http://www.growingwiththeweb.com/images/2014/02/26/script-defer.svg

When should I use what?

Typically you would like to use async wherever attainable, then defer then no attribute. Here area unit some general rules to follow:
  • If the script is modular and does not rely on any scripts then useasync.
  • If the script relies upon or is relied upon by another script then usedefer.
  • If the script is small and is relied upon by anasync script then use an inlinescript with no attributes placed above the async scripts.

Support

IE9 and below have some pretty unhealthy bugs in their implementation of defersuch that the execution order isn't guarenteed. If you would like to support <= IE9 i like to recommend not exploitation defer in the least and embrace your scripts with no attribute if the execution order matters. Read the specifics here .

This time I will give functions.php custom to automatically defer or async javascript (js).
Function: adding async = "async" for async and defer = "defer" to defer javascript (js).

javascript defered defer

  add_defer_attribute function ($ tag, $ handle) {
// add script handles to the array below
$ Scripts_to_defer = array ( 'my-js-handle', 'another-handle');

foreach ($ scripts_to_defer as $ defer_script) {
if ($ defer_script === $ handle) {
return str_replace ( 'src', 'defer = "defer" src ", $ tags);
}
}
return $ tag;
}
  add_filter ( 'script_loader_tag', 'add_defer_attribute', 10, 2); 

javascript async

async

  add_async_attribute function ($ tag, $ handle) {
// add script handles to the array below
$ Scripts_to_async = array ( 'my-js-handle', 'another-handle');

foreach ($ scripts_to_async as $ async_script) {
if ($ async_script === $ handle) {
return str_replace ( 'src', 'async = "async" src ", $ tags);
}
}
return $ tag;
}
  add_filter ( 'script_loader_tag', 'add_async_attribute', 10, 2); 
Let me know if you have any questions below.
Gallery - Auto Defer Or Async Javascript in Wordpress
Gallery Image 1
Gallery Image 2
Gallery Image 3
Gallery Image 4
Gallery Image 5
Gallery Image 6
Gallery Image 7
46 Cara Untuk Meningkatkan Pendapatan Google Adsense Anda
Update Script Auto Invite All Friends To Like Fanpages

async vs defer attributes
  • Legend
  • © 2025 WMI™. All Rights Reserved.
    • About
    • Privacy Policy
    • Terms Of Service
    • Contact