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.
Manage the cost ofJavaScriptPaipo / Frontend Engineer @ Mercari
View Slide
Outline● How browser works● What is the cost of JavaScript● Performance Budget● Experiment performance budget on my project
How browser works
Source: https://developers.google.com/web/updates/2018/09/inside-browser-part1
Source: https://developers.google.com/web/updates/2018/09/inside-browser-part3
Source: https://developers.google.com/web/updates/2018/09/inside-browser-part4
What does it mean by thecost of JavaScript?
Why do we blame Javascript so hard?Source: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/tree-shaking/
Reasons● Javascript is compressed● More than loading Javascript ...
Types of costs● Load through network● Parse, compile and execute● Memory cost
Time to Interactive“ The Time to Interactive (TTI) metric measures howlong it takes a page to become interactive ”(Source)
Example: Strong network & CPUExample: Strong network & CPU
Profile result and summary graph (No throttling)
Example: Fast 3G with 4x slower CPUExample: Fast 3G with 4x slower CPU
Profiling result and summary graph (Throttling)
Performance Budget
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
Experiment PerformanceBudget on my project
Initial Page
Webpack bundle analyzer
Initial Loading size
Add bundle size dependency and testing scripts
Bundle size check in CI
Github PR Check
Improving Strategies● Code splitting● Tree shaking
Code Splitting
Code splitting (code change)
Code splitting (CI result)
Code splitting (github PR check)
Code splitting (chrome dev tool result)
Tree Shaking
Tree Shaking (test code coverage)
Tree Shaking with ContextReplacementPlugin
Tree shaking (test code coverage again)
Tree shaking (CI result)
Tree shaking (github PR check)
Conclusion
Don’t block your main thread
Manage the cost of JavaScript Earlier
Design Develop Test PerformanceTuning
DesignDevelopTestPerformanceBudget CheckDesignDevelopTestPerformanceBudget CheckDesignDevelopTestPerformanceBudget Check
Automate your Performance Budget check
Thank you!