$30 off During Our Annual Pro Sale. View Details »

Manage the Cost of Javascript

mercari
PRO
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.

mercari
PRO

January 25, 2019
Tweet

More Decks by mercari

Other Decks in Technology

Transcript

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

    View Slide

  2. Outline
    ● How browser works
    ● What is the cost of JavaScript
    ● Performance Budget
    ● Experiment performance budget on my project

    View Slide

  3. How browser works

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  10. Types of costs
    ● Load through network
    ● Parse, compile and execute
    ● Memory cost

    View Slide

  11. Time to Interactive
    “ The Time to Interactive (TTI) metric measures how
    long it takes a page to become interactive ”
    (Source)

    View Slide

  12. Example: Strong network & CPU
    Example: Strong network & CPU

    View Slide

  13. Profile result and summary graph (No throttling)

    View Slide

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

    View Slide

  15. Profiling result and summary graph (Throttling)

    View Slide

  16. Performance Budget

    View Slide

  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

    View Slide

  18. Experiment Performance
    Budget on my project

    View Slide

  19. Initial Page

    View Slide

  20. Webpack bundle analyzer

    View Slide

  21. View Slide

  22. Initial Loading size

    View Slide

  23. Add bundle size dependency and testing scripts

    View Slide

  24. Bundle size check in CI

    View Slide

  25. Github PR Check

    View Slide

  26. Improving Strategies
    ● Code splitting
    ● Tree shaking

    View Slide

  27. Code Splitting

    View Slide

  28. Code splitting (code change)

    View Slide

  29. Code splitting (CI result)

    View Slide

  30. Code splitting (github PR check)

    View Slide

  31. Code splitting (chrome dev tool result)

    View Slide

  32. Tree Shaking

    View Slide

  33. Tree Shaking (test code coverage)

    View Slide

  34. Tree Shaking (test code coverage)

    View Slide

  35. Tree Shaking with ContextReplacementPlugin

    View Slide

  36. Tree shaking (test code coverage again)

    View Slide

  37. Tree shaking (CI result)

    View Slide

  38. Tree shaking (github PR check)

    View Slide

  39. Webpack bundle analyzer

    View Slide

  40. View Slide

  41. Conclusion

    View Slide

  42. Don’t block your main thread

    View Slide

  43. Manage the cost of JavaScript Earlier

    View Slide

  44. Design Develop Test Performance
    Tuning

    View Slide

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

    View Slide

  46. Automate your Performance Budget check

    View Slide

  47. Thank you!

    View Slide