[HTML 5] Understanding DOM loading event & 'async', 'defer' keyword

There are two types of Loading events:

  • DOMContentLoaded
  • Loaded

 

DOMEContentLoaded:

It happens after index.html has been parsed.

复制代码
<!DOCTYPE html>
<html>
  <head>
    <title>Ultimate Courses</title>
  <link rel="shortcut icon" href="favicon.png"></head>
  <body>
    <header class="header">
      <div class="logo">
        <div class="logo-ultimate"></div>
        <p class="logo-name">Ultimate Courses<span>&trade;</span></p>
      </div>
    </header>
    <script>
    <div id="app"></div>
  <script type="text/javascript" src="main.bundle.js" async></script></body>
</html>
复制代码

Which means it read thought the whole <html></html> tag. But it will not wait for css / images/ javascript files to load.

 

Loaded

"Loaded" event fire when all the css / javascripts get loaded. So it happens after "DOMContentLoaded" event.

 

 

 

"async" keyword

Notice that in the above code example, we have script with async

<script type="text/javascript" src="main.js" async></script></body>

Because it takes time to wait Javascript finishing loaded. Using 'async' keywrod means that "Continue parsing the rest of html code, don't wait for this Javascript file".

 

So what's the impact?

Let's have a look code inside main.js:

document.addEventListener("DOMContentLoaded", () => {
  alert("DOMContentLoaded");
});

 

So when you run the html, will you see the alert dialog?

.

.

.

.

.

Answer: Nope.

Because it takes time to load main.js file, and it is loaded async. Therefore by the time main.js finish loading, all the html have been parsed, so "DOMContentLoaded" happend before our listener code get chance to run. 

Also when using "async" and js files get loaded, then browser will stop parsing html and instead it will start parsing the javascript file.

                      html

                        |

                      div

                        |

　　　　　　script file async. --> start loading

　　　　　　    div　　　　　　　　    |

　　　　　　　　|　                    loaded

　　　　　　　-(stop)-                    |

　　　　　　　-(stop)-  　　　　parsing js

　　　　　　　-(stop)-                   |

　　　　　　　continue  <----     finsihed 

 

If you want to see the alert dialog you can just remove "async":

<script type="text/javascript" src="main.js"></script>

Then browser will wait main.js load to be finished and Javascript file to be parsed. And it will block all the rendering, it might not be a user friendly approach.

 

 

 

"defer" keyword

 

It will load script / css async.. But before "DOMContentLoaded" event, it will parse the javascript /css file.

<script type="text/javascript" src="main.js" defer></script>

 

Question: will you see the alert dialog this time?

.

.

.

.

Answer: Yes. 

Because it execute the js file before DOMContentLoaded event. And it will block the rendering.

 

posted @   Zhentiw  阅读(149)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
历史上的今天：
2019-03-15 [Algorithm] Meeting hour optimization (Kanpsack problem) and Dynamic programming
2016-03-15 [RxJS] Toggle A Stream On And Off With RxJS
2016-03-15 [RxJS] Error Handling in RxJS
2015-03-15 [Whole Web] [Node.js] [Browserify] [Grunt] Automation task with grunt-browserify & grunt-contrib-watch
2015-03-15 [Whole Web] [Node.js] Using npm run to launch local scripts
点击右上角即可分享
微信分享提示
AI IDE Trae