Nguyễn Xuân Duẩn duannx

## async-defer-module.md

      
        
          
            
              
              1 file
            
          
          
            
              
              33 forks
            
          
          
            
              
              4 comments
            
          
          
            
              
              270 stars
            
          
        
        
          
              
          
          
            
                jakub-g
                / async-defer-module.md
            
            
              Last active
              April 12, 2024 07:32
            
              
                async scripts, defer scripts, module scripts: explainer, comparison, and gotchas
              
          
        
      
        
  
      
    <script> async, defer, async defer, module, nomodule, src, inline - the cheat sheet

With the addition of ES modules, there's now no fewer than 24 ways to load your JS code: (inline|not inline) x (defer|no defer) x (async|no async) x (type=text/javascript | type=module | nomodule) -- and each of them is subtly different.
This document is a comparison of various ways the <script> tags in HTML are processed depending on the attributes set.
If you ever wondered when to use inline <script async type="module"> and when <script nomodule defer src="...">, you're in the good place!
Note that this article is about <script>s inserted in the HTML; the behavior of <script>s inserted at runtime is slightly different - see Deep dive into the murky waters of script loading by Jake Archibald (2013)