English subtitles

← The Preload Scanner - Website Performance Optimization

Get Embed Code
6 Languages

Showing Revision 8 created 05/24/2016 by Udacity Robot.

  1. Cameron, why don't you try drawing the
  2. critical rendering path diagram for this example?
  3. >> Sure. Let's see. First things first. We
  4. request this HTML. Then we start to build the
  5. DOM and come across this CSS file, which of
  6. course we have to request. We continue to build
  7. the DOM and then immediately encounter app.js, which
  8. is parser blocking. So we halt construction of the
  9. DOM, request, and wait for the file. When we
  10. finally get the CSS and have built the CSSOM,
  11. we can run app.js and then continue to build the DOM. And then we hit
  12. the next script, timing.js, so we block
  13. parsing on the download. Does that sound right?
  14. >> Yep, that's right. However, this could take quite a while. First
  15. we block on app.js and wait for it to arrive. Then on
  16. timing.js, and wait for that to arrive. To optimize this particular case,
  17. the browser has a special process called a preload scanner, which peaks
  18. ahead in the document, and tries to
  19. discover critical CSS and JavaScript files, like timing.js.
  20. >> Well that's clever, so even though the parser is
  21. blocked, we can discover timing.js
  22. and initiate downloads for critical resources?
  23. >> Yeah, exactly, so instead of waiting to build
  24. the CSS object model, and run app.js before requesting.
  25. >> timing.js. The preload scanner finds timing.js and requests it while the
  26. parser is blocked.
  27. >> Cool. Well, that's pretty interesting. Where
  28. can I learn more about the preload scanner?
  29. >> Check out the instructor notes. You'll find a couple of good resources
  30. there that will help explain why the preload scanner exists and how it operates.