AddyOsmani.com - JavaScript Loading Priorities in Chrome

How browsers schedule and execute scripts can impact the performance of web pages. While techniques like <script defer>, <link rel=preload> (and ...

February 18, 2019 How browsers schedule and execute scripts can impact the performance of web pages. While techniques like <script defer>, <link rel=preload> (and others) influence script loading, knowing how browsers interpret them can also be helpful. Thanks to Kouhei Ueno, we now have an up to date summary of script scheduling in Chrome. Loading priority (network/Blink) Execution priority Where should this be used? <script> in <head> Medium/High VeryHigh - Blocks parser Scripts that affect layout of First Meaningful Paint (FMP) / First Contentful Paint (FCP) content Scripts…

saved by

• Jacky Zhao
• Lâm Vũ

related reading

• Microtasks and event looptr.javascript.info
• The Web Animation Performance Tier List | Motion Magazinemotion.dev
• Populating the page: how browsers work - Performance | MDNdeveloper.mozilla.org
• The Web Animation Performance Tier List | Motion Magazinemotion.dev
• 7 Principles of Rich Web Applicationsrauchg.com
• Preload critical assets to improve loading speed | Articles | web.devweb.dev
• Inside look at modern web browser (part 1) | Blog | Chrome for Developersdeveloper.chrome.com
• An Introduction to the Browser Rendering Pipelinewebperf.tips
• Improving Load Performance - Chrome DevTools 101youtube.com
• Your options for preloading images with JavaScript | Alex MacArthurmacarthur.me
• Inside look at modern web browser (part 3) | Blog | Chrome for Developersdeveloper.chrome.com
• What the heck is the event loop anyway? | Philip Roberts | JSConf EUyoutube.com