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
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
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
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!