Oh, the Scripts We’’ll Load! Tim Kadlec @tkadlec
A presentation at Jamstack Conf in October 2020 in by Tim Kadlec
Oh, the Scripts We’’ll Load! Tim Kadlec @tkadlec
How to load a script
Script: High Script: Normal Script: High
document.write(“Sir Hawk Philsworth”);
JavaScript is Parser Blocking
k a T ! o w t e
</head> <script src=”https://slowfil.es/filetype=js&delay=2500”></ script> </body>
Script: High Script: Normal Script: Medium
2.2kb 198kb
k a T ! e e r h t e
<script> var script = document.createElement(‘script’); script.src = “https://slowfil.es/file?type=js&delay=2500”; document.getElementsByTagName(‘head’)[0].appendChild(script); </script>
Dynamically Inserted Scripts are Async By Default
Script: High Script: Normal Script: Low
document.getElementById(“#main”).style.height = “100px”;
CSS Blocks JS Execution JS Execution Blocks Parser
Blocks parser Discovered Late
T ! r u o f e ak
<script async src=”https://slowfil.es/file? type=js&delay=2500”></script>
Script: Low Script: Normal Script: Low
Async Does not Guarantee Order
Async Blocks Parser When Script Arrives
k a T <script defer src=”https://slowfil.es/file? type=js&delay=2500”></script> ! e v i f e
Script: High Script: Normal Script: Low
But what if we want both network priority and parser benefits?
k a T ! n e v e s e
<link rel=”preload” href=”https://slowfil.es/file? type=js&delay=2500” as=”script”> <script defer src=”https://slowfil.es/file? type=js&delay=2500”></script>
Script: High Script: Normal Script: High
Understanding the Trade-offs
Experiment Measure Iterate
Thank You! Tim Kadlec @tkadlec
