English subtitles

← JavaScript and the CRP - Website Performance Optimization

Get Embed Code
6 Languages

Showing Revision 5 created 05/25/2016 by Udacity Robot.

  1. [BLANK_AUDIO]
  2. >> Okay, so I think I have a handle on optimizing
  3. HTML and CSS. So, are we moving on to the render tree?
  4. >> Almost, we haven't really talked about JavaScript,
  5. and obviously that's an important step, so let's
  6. take a look at that. Okay, well let
  7. me guess, minify it, compress it and cache it?
  8. >> Yup. All of those are good strategies. But for JavaScript you may have seen
  9. piece bit insighs also complain about parser
  10. blocking scripts. Let's take a look at what
  11. that means and how we can optimize it.
  12. I've extended our hello world page with
  13. a simple inline script at the bottom. Let's
  14. walk through it. First of all, we reach into the DOM and look for the first
  15. span element. Which, as you can see, contains
  16. the web performance text. Next, we modify the
  17. DOM element by changing its inner text and
  18. also changing its CSS properties. Seems simple enough.
  19. >> Yeah, this shows that JavaScript can manipulate
  20. both the DOM and the CSS Object Model. It's
  21. a very powerful tool. And it gets a
  22. bit more interesting from here. Next, we create a
  23. new div element, set its text content. CSS
  24. caller property, and append it to the page. Let's
  25. try to load this page on our phone. Notice
  26. that the text now says, Hello interactive students instead
  27. of Hello web performance students. And we also have our new element right below
  28. it. Right, as expected. So is there
  29. anything here we can do to optimize performance?
  30. >> Definitely, optimizing JavaScript could be an entire course. But,
  31. in this particular example, it's not really the code, but how
  32. it's included on the page. Let's take a step back and
  33. think about how the browser would go about building this page