When I was preparing for the interview this autumn. I was always asked that
"Do you know the two properties of
deferandasyncon the<script>? What are the functions of these two properties ?"
Of course! There are so many answers on the forum, and it is easy to get the answer. But is it true? And that's why I start this experiment.
In this experiment, I resort to the Performance in Chrome Devtool. Let's begin!
<body>
<h1>Script without defer or async</h1>
<script src="./src/normal.js"></script>
</body>.png)
.jpg)
.png)
.png)
<body>
<h1>Script with defer</h1>
<script defer src="./src/defer.js"></script>
</body>
Between finishing parsing html and executing javascript code, there isn'tlayout,paintorcomposite.
.png)
.png)
.png)
<body>
<h1>Script with async</h1>
<script async src="./src/async.js"></script>
</body>.png)
.png)
.png)
