web前端性能分析工具导引课件.pptVIP

Web Front-end performance Analyzerer 梁剑钊 2008年6月;主题;The sluggish Web;Web User Perceive’s Response time;A view of Web communications ;The Life of Page 2.0;Back-end=5%; Requires extra HTTP requests!;The Performance Golden Rule; 为什么关注前端性能分析？ Yahoo 高性能网页最佳实践(14+20) 前端性能分析工具 Fiddler IBM Page Detailer FireBug Yahoo YSlow HTTP Analyzer AOL PageTest PageTest 源码解读 优化定律 如何扩展前端工具;The14 rules for high performance web sites;Flush the buffer early Use GET for AJAX requests Post-load components Preload components Reduce the number of DOM elements Split components across domains Minimize the number of iframes No 404s Reduce cookie size Use cookie-free domains for components Minimize DOM access Develop smart event handlers Choose link over @import Avoid filters Optimize images Optimize CSS sprites Dont scale images in HTML Make favicon.ico small and cacheable Keep components under 25K Pack components into a multipart document; 为什么关注前端性能分析？ Yahoo 高性能网页最佳实践(14+20) 前端性能分析工具 Fiddler IBM Page Detailer FireBug Yahoo YSlow HTTP Analyzer AOL PageTest PageTest 源码解读 优化定律 如何扩展前端工具;Web前端工具;IBM Page Detailer Chart(IE7);Maximizing Parallel Downloads;IBM Page Detailer details;FireBug Net Panel;YSlow 13 Rules for Fast Web Pages_网页性能评分以及规则遵循性;HTTP Analyzer3;AOL PageTest WaterFall View;AOL PageTest Optimiztion CheckList;在线网页分析websiteoptimization;性能分析工具小结; 为什么关注前端性能分析？ Yahoo 高性能网页最佳实践(14+20) 前端性能分析工具 Fiddler IBM Page Detailer FireBug Yahoo YSlow HTTP Analyzer AOL PageTest PageTest 源码解读 优化定律 如何扩展前端工具;DOM ReadyState;PageTest源码调试;WSHook.cpp –winsock2服务提供者;WinInet Hook (网络事件);IE BHO技术;Win32精确计时;render start time and Document Complete time;CTestState::CheckRender判断render起点; CWatchDlg::DrawItemWaterfall画出render比例图;PageTest优化检查列表;优化定律; 为什么关注前端性能分析？ Yahoo 高性能网页最佳实践(14+20) 前端性能分析工具 Fiddler IBM Page Detailer FireBug Yahoo YSlow HTTP Analyzer AOL PageTest PageTest 源码解读 优化定律 如何扩展前端工具;精减组件利器;;如何扩展前端分析工具;Books;Links pool