Manage the Cost of Javascript

92cdcff298e89e2fcd2fb705155c2d4b?s=47 mercari
January 25, 2019

Manage the Cost of Javascript

Manage the Cost of Javascript - by Paipo Tang (Front-end engineer @ Mercari)

Tech talk given on the Mercari Global Engineers Meetup on Jan 25, 2019.

92cdcff298e89e2fcd2fb705155c2d4b?s=128

mercari

January 25, 2019
Tweet

Transcript

  1. Manage the cost of JavaScript Paipo / Frontend Engineer @

    Mercari
  2. Outline • How browser works • What is the cost

    of JavaScript • Performance Budget • Experiment performance budget on my project
  3. How browser works

  4. Source: https://developers.google.com/web/updates/2018/09/inside-browser-part1

  5. Source: https://developers.google.com/web/updates/2018/09/inside-browser-part3

  6. Source: https://developers.google.com/web/updates/2018/09/inside-browser-part4

  7. What does it mean by the cost of JavaScript?

  8. Why do we blame Javascript so hard? Source: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/tree-shaking/

  9. Reasons • Javascript is compressed • More than loading Javascript

    ...
  10. Types of costs • Load through network • Parse, compile

    and execute • Memory cost
  11. Time to Interactive “ The Time to Interactive (TTI) metric

    measures how long it takes a page to become interactive ” (Source)
  12. Example: Strong network & CPU Example: Strong network & CPU

  13. Profile result and summary graph (No throttling)

  14. Example: Fast 3G with 4x slower CPU Example: Fast 3G

    with 4x slower CPU
  15. Profiling result and summary graph (Throttling)

  16. Performance Budget

  17. Performance Budget • Metric for things like Javascript bundle size

    and Time to Interactive • Not a one time task • Keep this budget in mind when making decisions
  18. Experiment Performance Budget on my project

  19. Initial Page

  20. Webpack bundle analyzer

  21. None
  22. Initial Loading size

  23. Add bundle size dependency and testing scripts

  24. Bundle size check in CI

  25. Github PR Check

  26. Improving Strategies • Code splitting • Tree shaking

  27. Code Splitting

  28. Code splitting (code change)

  29. Code splitting (CI result)

  30. Code splitting (github PR check)

  31. Code splitting (chrome dev tool result)

  32. Tree Shaking

  33. Tree Shaking (test code coverage)

  34. Tree Shaking (test code coverage)

  35. Tree Shaking with ContextReplacementPlugin

  36. Tree shaking (test code coverage again)

  37. Tree shaking (CI result)

  38. Tree shaking (github PR check)

  39. Webpack bundle analyzer

  40. None
  41. Conclusion

  42. Don’t block your main thread

  43. Manage the cost of JavaScript Earlier

  44. Design Develop Test Performance Tuning

  45. Design Develop Test Performance Budget Check Design Develop Test Performance

    Budget Check Design Develop Test Performance Budget Check
  46. Automate your Performance Budget check

  47. Thank you!