M站前端性能优化 刘哲 - 2015
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
- 1. M - 2015
- 2. Performance means revenue Server Cost Bandwidth Cost User Lose
- 3. WPO to business Facebook pages that are 500ms slower result in a 3% drop-off in trafc, 1000ms is 6% drop-off If Amazon increased page load time by +100ms they lose 1% of sales If Google increased page load by +500 ms they get 25% fewer searches
- 4. DOM Tree Render Tree Animationpaint javascript
- 5. Bandwidth Latency/RTT
- 6. Bandwidth TCP
- 7.
- 8. Latency
- 9. Last Mile
- 10. Depend On Performance Analysis, Not Intuition
- 11. Browser interface for Timings performance.timing
- 12. Custom Timing DOM load time Page load time Above the fold time Cache Hit Rate Ajax state ready time
- 13. http://203.130.42.237/s.gif? rt_index_index=488&la=234&dl=132&ex_cchr=0%2F17 &ns=0&fs=325&dls=325&dle=325&cs=325&ce=325&rq s=330&rss=379&rse=397&ds=398&di=752&dcs=752&d ce=763&de=859&ls=859&le=882&tp=ol&aid=1&pid= %2Findex%2Findex%2F&ct=unknown send beacon Beacon API: navigator.sendBeacon(url, data);
- 14. Log Node A mongo node-mailer Node BTimer Timer charted
- 15.
- 16. (charted)
- 17. Speed Index Above the fold time Cache Hit Rate API cost time
- 18. Webpagetest/Pagespeed Browser DevTools
- 19. RTT
- 20. init cwnd server DNS
- 21. CDN TCPe.g. : init cwnd dns lookup?
- 22. Reduce requests Reduce bytes
- 23. Reduce requests combine js & css localStorage(js,css) full cache (image,js,css) HTTP header : cache-control md5
- 24. MRequire.js Loader ? xx.js/xx.css combo sever localStorage require([index.css, index.js]) success request response index.css@{md5_version}}; index.js@{md5_version}
- 25. Full Cache
- 26. Reduce bytes compress html & image & js & css gzip remove unused code
- 27.
- 28. lazy load cnzz jscss
- 29. mo.js + api mo.js + api + index.js 36.1k + 4.1k 50k + ~60K + 4.1k 37k main.css 5.8k 112k + ~60k gzip mo.js + index.js
- 30. pre-*
- 31. Dns prefetch
- 32. prefetch ready
- 33. prerender
- 34. localStorage : IO scroll
- 35. Check List DOM CRUD: Animation,paint HTTP 2.0 HTTP/1, 30ms latency HTTP/2, 30ms latency JS
- 36. QA
Related Documents
