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.

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