高性能网站最佳实践.pptVIP

18. Preload Components Unconditional preload Conditional preload Anticipated preload 19. Reduce the # of DOM Elements /zufang 1585 /fang1 762 20. Split Components Across Domains 2~4 domains 21. Reduce Cookie Size 1115 379 21. Reduce Cookie Size Keep cookie sizes as low as possible Be mindful of setting cookies at the appropriate domain level Other Rules Use Cookie-free Domains for Components Minimize DOM Access Develop Smart Event Handlers Avoid Filters Optimize Images Optimize CSS Sprites Keep Components under 25K Avoid Empty Image src Tools FireBug YSlow URLs /performance/rules.html /blog/2008/07/21/performance-research-part-6/ What matters? QA RTX: hesong Email: hesong@58.com 没有最佳 * Steve Sounders Background check * For 58.. For me * Recover the shortcome with engineering process * How to place sprit icons * What’s the fastest portal? QQ.Com 1.8s No 304 * * Document.write not work for FF Head.append won’t block rendering * * * * * 58 doesn’t have a cookie free domain * 高性能网站实践 何松 hesong@58.com 2011年12月30日 Yahoo’s 14/35 rules Performance Matters Time Spent On Front-end Empty Cache Primed Cache 97% 97% 95% 81% 95% 81% 98% 94% /wiki 94% 91% 97% 96% 98% 97% Time Spent On Front-end 96% What’s most critical? First Screen Loaded Inside a HTTP request Basic Minimize the number requests Minimize the size/time of every request Do it in parallel Categories Content Server Cookie Javascript CSS Images Mobile 1. Minimize Http Requests Combine Files Cons？ /zufang/: 16 jscss requests 1. Minimize Http Requests CSS Sprites #rss { background-image: url(sprite.png); background-position: -8px -40px; width: 16px; height: 16px; } /zufang/: 9 image requests 1. Minimize Http Requests Image Maps (Not recommended) 1. Minimize Http Requests Cache Cons？ 1. Minimize Http Requests Cache 2. Use CDN distribute your static content before distributing your dynamic content Cons？ 3. Add an Expires or a Cache-Control Header Not only for images, but al