javascript - script element with async attribute still block browser render? -


i use cuzillion tool build page:

<head>   <script async></script> </head> <body>    <img />    <img />    <img />  </body>

there 1 script element in head, async attribute , 2 second delay, 3 second execute.

but page load timeline in chrome is:

enter image description here

when script executing, still block browser render process?

but why? shouldn't execute asynchronously?

however doesn't block parser:

enter image description here

the execution of script blocks parsing, rendering, , execution of other scripts in same tab. attribute async not change that.

the thing async tell browser script should fetched (assuming it's remote file) without blocking activities.

after script downloaded, script starts executing @ next available opportunity (that is, right after current script, if any, finishes running; new script won't, of course, interrupt running script). once happens, rendering blocked. so, fast web server, downloading happens fast async makes no difference @ all.

if don't want scripts pause rendering, use defer attribute instead of async. delay execution of script until after document loaded.

more on here.


Comments

Post a Comment