WebFundamentals
WebFundamentals copied to clipboard
google
unlike ordinary scripts, async scripts block css parsing and thereby delay the first render
Page Affected: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript
What needs to be done?
Hello. The final statement "Adding the async keyword to the script tag tells the browser not to block DOM construction while it waits for the script to become available, which can significantly improve performance." is misleading. Async or defer attributes can rather significantly ruin the performance if the script takes long time to execute.
The absolute statement "the browser delays script execution and DOM construction until it has finished downloading and constructing the CSSOM." is also wrong. async and defer scripts do not wait for styles.
To see it, execute in Chrome 91 index.html with and without async attribute:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="root" class="my-5 text-center display-1 fw-bold text-danger">LOADING</div>
<script src="js/bundle.js" async></script>
</body>
</html>
bundle.js:
document.getElementById('root').replaceChildren("DONE"); alert('Waiting');
Best regards, Marian Caikovski
