Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web前端性能分析工具导引

1,341 views

Published on

Published in: Technology, Design
  • Be the first to comment

Web前端性能分析工具导引

  1. 1. Web Front-end performance Analyzerer 梁剑钊 2008 年 6 月
  2. 2. 主题 为什么关注前端性能分析? Yahoo 高性能网页最佳实践 (14+20) 前端性能分析工具 ◦ Fiddler ◦ IBM Page Detailer ◦ FireBug ◦ Yahoo YSlow ◦ HTTP Analyzer ◦ AOL PageTest PageTest 源码解读 优化定律 如何扩展前端工具
  3. 3. The sluggish Web 500 ms slower = 20% drop in traffic (Google) 100 ms slower = 1% drop in sales (Amazon)
  4. 4. Web User Perceive’s Response time
  5. 5. A view of Webcommunications
  6. 6. The Life of Page 2.0 event handlers, backend fetching components, user interaction, XHRs components XHRs requestrequest HTML page onload settles sent graduation marriage? R.I.P.conception birth fetus child User perceived “onload” teen happens somewhere here adult
  7. 7. The Importance of Front-End PerformanceBack- Front-end=5% end=95% Even Primed Cache, front-end= 88%
  8. 8. What’s the Other 80%? Focus on! External RenderingComponents + Redirects + (complicated by + DNS lookups(images, js, css) js and css) Requires extra HTTP requests! = 80% - 90%
  9. 9. The Performance GoldenRule80-90% of the end-user response time is spent on the front-end Greater potential for improvement 80-90% of the time Easier than the back-end目标 Faster loading times for pages Lesser amount of data to transfer Less load on the server
  10. 10.  为什么关注前端性能分析? Yahoo 高性能网页最佳实践 (14+20) 前端性能分析工具 ◦ Fiddler ◦ IBM Page Detailer ◦ FireBug ◦ Yahoo YSlow ◦ HTTP Analyzer ◦ AOL PageTest PageTest 源码解读 优化定律 如何扩展前端工具
  11. 11. The14 rules for high performance web sites Make Fewer HTTP Requests content Use a Content Delivery Network server Add Expires header (or Cache-control) server Gzip Components server Put CSS at the Top css Move Scripts to the Bottom (inline too) javascript Avoid CSS Expressions css Make JavaScript and CSS External css javascript Reduce DNS Lookups content Minify JavaScript and CSS (inline too) css javascript Avoid Redirects content Remove Duplicate Scripts javascript Configure ETags server Make AJAX Cacheable content
  12. 12. High performance web pages 20 new best-practices 1. Flush the buffer early server 2. Use GET for AJAX requests server 3. Post-load components content 4. Preload components content 5. Reduce the number of DOM elements content 6. Split components across domains content 7. Minimize the number of iframes content 8. No 404s content 9. Reduce cookie size cookie 10. Use cookie-free domains for components cookie 11. Minimize DOM access javascript 12. Develop smart event handlers javascript 13. Choose <link> over @import css 14. Avoid filters css images 15. Optimize images 16. Optimize CSS sprites images images 17. Dont scale images in HTML 18. Make favicon.ico small and cacheable images mobile 19. Keep components under 25K mobile 20. Pack components into a multipart document
  13. 13.  为什么关注前端性能分析? Yahoo 高性能网页最佳实践 (14+20) 前端性能分析工具 ◦ Fiddler ◦ IBM Page Detailer ◦ FireBug ◦ Yahoo YSlow ◦ HTTP Analyzer ◦ AOL PageTest PageTest 源码解读 优化定律 如何扩展前端工具
  14. 14. Web 前端工具 Firefox 阵营  IE 堡垒 ◦ DOM Inspector ◦ IE Developer Toolbar ◦ Firebug ◦ IE Pro ◦ JavaScript Debugger ◦ Fiddler ◦ HTML Validator ◦ HttpWatch ◦ Web Developer ◦ AOL PageTest( 开源 ) ◦ YSlow  通用商业工具 ◦ IBM Page Detailer ◦ HTTP Analyzer
  15. 15. IBM Page Detailer Chart(IE7)
  16. 16. Maximizing Parallel Downloads 1.40 average 36 x 36 px (0.9 Kb) 116 x 61 px (3.4 Kb) 1.20 1.00 0.80response time (seconds) 0.60 0.40 0.20 0.00 1 2 4 5 10 rule of thumb: use at least two but no more than four aliases
  17. 17. IBM Page Detailer details
  18. 18. FireBug Net Panel
  19. 19. YSlow 13 Rules for Fast WebPages_ 网页性能评分以及规则遵循 性
  20. 20. HTTP Analyzer3
  21. 21. AOL PageTest WaterFall View
  22. 22. AOL PageTest OptimiztionCheckList
  23. 23. 在线网页分析websiteoptimization
  24. 24. 性能分析工具小结 FireBug Net PanelIBM Page Detailer  Methodology Methodology ◦ Packet Sniffer ◦ Packet Sniffer  Competitive Advantage Competitive Advantage ◦ Displays waterfall view ◦ Most accurate ◦ Provides HTTP header info ◦ Provides detailed data  Drawbacks ◦ Works for any browser ◦ Runs only in Firefox ◦ Best waterfall view ◦ Inaccurate waterfall view Drawbacks  No render time  No parse time ◦ 90 day free trial  No redirects ◦ Runs only on Windows  No DNS lookups ◦ Misses cached components ◦ Misses cached components AOL PageTest  Methodology YSlow ◦ IE Extension  Methodology ◦ Firefox extension  Competitive Advantage  Competitive Advantage ◦ Open source ◦ performance lint tool ◦ more granular details of each ◦ grades web pages for each rule HTTP request  Drawbacks  Drawbacks ◦ Runs only on IE ◦ Runs only on FireFox
  25. 25.  为什么关注前端性能分析? Yahoo 高性能网页最佳实践 (14+20) 前端性能分析工具 ◦ Fiddler ◦ IBM Page Detailer ◦ FireBug ◦ Yahoo YSlow ◦ HTTP Analyzer ◦ AOL PageTest PageTest 源码解读 优化定律 如何扩展前端工具
  26. 26. DOM ReadyState READYSTATE_UNINITIALIZED ◦ Default initialization state. READYSTATE_LOADING ◦ Object is currently loading its properties. READYSTATE_LOADED ◦ Object has been initialized. – 获取完服务器原始数据,但不 能直接在客户端使用 READYSTATE_INTERACTIVE ◦ Object is interactive, but not all of its data is available. ---- 正在解析数据 READYSTATE_COMPLETE ◦ Object has received all of its data.— 全部数据已解析完客户 端可用的格式
  27. 27. PageTest 源码调试 Microsoft Visual Studio c++ 2008 Win32 Debug IDE BHO 调试参数 : iexplore.exe
  28. 28. WSHook.cpp –winsock2 服务提供者wspStartup = new CAPIHook("msafd.dll", "WSPStartup", (PROC)::WSPStartup_Hook, TRUE);nspStartup = new CAPIHook("rnr20.dll", "NSPStartup", (PROC)::NSPStartup_Hook, TRUE);… // store the original function pointers to use later wsp->socket = lpProcTable->lpWSPSocket; wsp->close = lpProcTable->lpWSPCloseSocket; wsp->connect = lpProcTable->lpWSPConnect; wsp->recv = lpProcTable->lpWSPRecv; wsp->send = lpProcTable->lpWSPSend; wsp->bind = lpProcTable->lpWSPBind; lpProcTable->lpWSPSocket = WSPSocket_Hook; lpProcTable->lpWSPCloseSocket = WSPCloseSocket_Hook; lpProcTable->lpWSPConnect = WSPConnect_Hook; lpProcTable->lpWSPRecv = WSPRecv_Hook; lpProcTable->lpWSPSend = WSPSend_Hook; lpProcTable->lpWSPBind = WSPBind_Hook;
  29. 29. WinInet Hook ( 网络事件 )CWinInetHook::CWinInetHook(void):internetOpenA("wininet.dll", "InternetOpenA", (PROC)::InternetOpenA_Hook, TRUE) , internetOpenW("wininet.dll", "InternetOpenW", (PROC)::InternetOpenW_Hook, TRUE) , internetCloseHandle("wininet.dll", "InternetCloseHandle", (PROC)::InternetCloseHandle_Hook, TRUE) , internetSetStatusCallback("wininet.dll", "InternetSetStatusCallback", (PROC)::InternetSetStatusCallback_Hook, TRUE) , internetSetStatusCallbackA("wininet.dll", "InternetSetStatusCallbackA", (PROC)::InternetSetStatusCallbackA_Hook, TRUE) , internetSetStatusCallbackW("wininet.dll", "InternetSetStatusCallbackW", (PROC)::InternetSetStatusCallbackW_Hook, TRUE) , internetConnectA("wininet.dll", "InternetConnectA", (PROC)::InternetConnectA_Hook, TRUE) , internetConnectW("wininet.dll", "InternetConnectW", (PROC)::InternetConnectW_Hook, TRUE) , internetOpenUrlA("wininet.dll", "InternetOpenUrlA", (PROC)::InternetOpenUrlA_Hook, TRUE) , internetOpenUrlW("wininet.dll", "InternetOpenUrlW", (PROC)::InternetOpenUrlW_Hook, TRUE) , httpOpenRequestA("wininet.dll", "HttpOpenRequestA", (PROC)::HttpOpenRequestA_Hook, TRUE) , httpOpenRequestW("wininet.dll", "HttpOpenRequestW", (PROC)::HttpOpenRequestW_Hook, TRUE) , httpSendRequestA("wininet.dll", "HttpSendRequestA", (PROC)::HttpSendRequestA_Hook, TRUE) , httpSendRequestW("wininet.dll", "HttpSendRequestW", (PROC)::HttpSendRequestW_Hook, TRUE) , ftpOpenFileA("wininet.dll", "FtpOpenFileA", (PROC)::FtpOpenFileA_Hook, TRUE) , ftpOpenFileW("wininet.dll", "FtpOpenFileW", (PROC)::FtpOpenFileW_Hook, TRUE){}
  30. 30. IE BHO 技术
  31. 31. Win32 精确计时QueryPerformanceFrequency((LARGE_INTEGER *)&freq);msFreq = freq / (__int64)1000;…QueryPerformanceCounter((LARGE_INTEGER *)&startRender);
  32. 32. render start time andDocument Complete time the "render start time". This is the point at which the browser first displays any content to the user. the "Document Complete time" which is the time when the browser would fire the onLoad event.
  33. 33. CTestState::CheckRender 判断 render 起点 if( SUCCEEDED(tracker.browser- >get_ReadyState(&rs)) && (rs == READYSTATE_INTERACTIVE || rs == READYSTATE_COMPLETE)){… body2->get_scrollWidth(&width);body2->get_scrollHeight(&height);…} if( width && height ) QueryPerformanceCounter((LARGE_INTEGER *)&startRender);
  34. 34. CWatchDlg::DrawItemWaterfall 画出 render 比例图 const COLORREF colorRender = RGB( 40,188, 0); hPenRender = CreatePen(PS_SOLID, 2, colorRender); rc.DeflateRect(rect.Width() / 4, 0, 2, 0); double width = rc.Width();… double range = (double)(lastRequest - start);…if( startRender && startRender >= start && startRender <= lastRequest) { int x = (int)(((double)(startRender - start) / range) * width); SelectObject(hDC, hPenRender); LineVert(hDC, rc.left + x, rc.top, rc.bottom); }if( !currentDoc && endDoc && endDoc >= start && endDoc <= lastRequest){ int x = (int)(((double)(endDoc - start) / range) * width); SelectObject(hDC, hPenDone); LineVert(hDC, rc.left + x, rc.top, rc.bottom);}
  35. 35. PageTest 优化检查列表
  36. 36. 优化定律 Don’t Optimize Don’t Optimize anything you can’t measure 80/20 rule of Optimization ◦ <20% retriving a typical web page ◦ >80% rendering a typical web page
  37. 37.  为什么关注前端性能分析? Yahoo 高性能网页最佳实践 (14+20) 前端性能分析工具 ◦ Fiddler ◦ IBM Page Detailer ◦ FireBug ◦ Yahoo YSlow ◦ HTTP Analyzer ◦ AOL PageTest PageTest 源码解读 优化定律 如何扩展前端工具
  38. 38. 精减组件利器 Javascript 压缩工具 ◦ YUI Compressor ◦ JSA: 国内开源 ◦ JSMin 图片优化工具 ◦ ImageMagick ◦ Pngcrush : unix/win32 ,开源 ◦ Jpegtran CSS 压缩 ◦ CSSTidy CSS Sprites 图片制作 ◦ CSS Sprite Generator 服务器端压缩 ◦ Apache deflate
  39. 39.  为什么关注前端性能分析? Yahoo 高性能网页最佳实践 (14+20) 前端性能分析工具 ◦ Fiddler ◦ IBM Page Detailer ◦ FireBug ◦ Yahoo YSlow ◦ HTTP Analyzer ◦ AOL PageTest PageTest 源码解读 优化定律 如何扩展前端工具
  40. 40. 如何扩展前端分析工具 建立持续网页评估结果库及告警机制 ◦ 集成 YSlow 接口? ◦ 扩充新 20 条? 建立持续网页速率监控池 ◦ 扩展 PageTest ◦ 自主研发 BHO 工具 ◦ Apache module 推送 document.readyState 事件代码 ◦ …
  41. 41. Books
  42. 42. Links poolExceptional Performance: http:// performance.corp.yahoo.comYSlow?: http:// performance.corp.yahoo.com/docs/yslow.htmlIBM Page Detailer: http://alphaworks.ibm.com/tech/pagedetailerAOL Pagetest http://sourceforge.net/projects/pagetest/

×