Web Front-end performance Analyzerer 梁剑钊 2008 年 6 月

1. Web Front-end performance Analyzerer 梁剑钊 2008年6月

2. 主题 为什么关注前端性能分析？ Yahoo 高性能网页最佳实践(14+20) 前端性能分析工具 Fiddler IBM Page Detailer FireBug Yahoo YSlow HTTP Analyzer AOL PageTest PageTest 源码解读 优化定律 如何扩展前端工具

3. What Front-end Techniques?

4. The sluggish Web • 500 ms slower = 20% drop in traffic (Google) • 100 ms slower = 1% drop in sales (Amazon)

5. Web User Perceive’s Response time

6. A view of Web communications

7. The Life of Page 2.0 event handlers, components, XHRs fetching components backend user interaction, XHRs request page settles HTML sent request onload R.I.P. marriage? graduation birth conception fetus child teen adult User perceived “onload” happens somewhere here

8. The Importance of Front-End Performance Back-end=5% Front-end=95% Even Primed Cache, front-end=88%

9. What’s the Other 80%? Focus on! Requires extra HTTP requests! Redirects External Components (images, js, css) Rendering (complicated by js and css) DNS lookups + + + = 80% - 90%

10. The Performance Golden Rule 80-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

11. 为什么关注前端性能分析？ • Yahoo 高性能网页最佳实践(14+20) • 前端性能分析工具 • Fiddler • IBM Page Detailer • FireBug • Yahoo YSlow • HTTP Analyzer • AOL PageTest • PageTest 源码解读 • 优化定律 • 如何扩展前端工具

12. The14 rules for high performance web sites content • Make Fewer HTTP Requests • Use a Content Delivery Network • Add Expires header (or Cache-control) • Gzip Components • Put CSS at the Top • Move Scripts to the Bottom (inline too) • Avoid CSS Expressions • Make JavaScript and CSS External • Reduce DNS Lookups • Minify JavaScript and CSS (inline too) • Avoid Redirects • Remove Duplicate Scripts • Configure ETags • Make AJAX Cacheable server server server css javascript css css javascript content css javascript content javascript server content

13. Example:Reduce DNS Lookups • typically 20-120 ms • block parallel downloads • OS and browser both have DNS caches

14. High performance web pages 20 new best-practices • 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 • Don't scale images in HTML • Make favicon.ico small and cacheable • Keep components under 25K • Pack components into a multipart document server server content content content content content content cookie cookie javascript javascript css css images images images images mobile mobile

15. 为什么关注前端性能分析？ • Yahoo 高性能网页最佳实践(14+20) • 前端性能分析工具 • Fiddler • IBM Page Detailer • FireBug • Yahoo YSlow • HTTP Analyzer • AOL PageTest • PageTest 源码解读 • 优化定律 • 如何扩展前端工具

16. Web前端工具 • Firefox阵营 • DOM Inspector • Firebug • JavaScript Debugger • HTML Validator • Web Developer • YSlow • IE堡垒 • IE Developer Toolbar • IE Pro • Fiddler • HttpWatch • AOL PageTest(开源) • 通用商业工具 • IBM Page Detailer • HTTP Analyzer

17. Fiddler2.1.6.2

18. IBM Page Detailer Chart(IE7)

19. IBM Page Detailer Chart(FireFox2)

20. Maximizing Parallel Downloads response time (seconds) rule of thumb: use at least two but no more than four aliases

21. IBM Page Detailer details

22. FireBug Net Panel

23. YSlow 13 Rules for Fast Web Pages_网页性能评分以及规则遵循性

24. YSlow Components

25. HTTP Analyzer3

26. AOL PageTest WaterFall View

27. AOL PageTest Optimiztion CheckList

28. 在线网页分析websiteoptimization

29. 性能分析工具小结 FireBug Net Panel • Methodology • Packet Sniffer • Competitive Advantage • Integrated with Firebug • Displays waterfall view • Provides HTTP header info • Drawbacks • Runs only in Firefox • Inaccurate waterfall view • No render time • No parse time • No redirects • No DNS lookups • Misses cached components IBM Page Detailer • Methodology • Packet Sniffer • Competitive Advantage • Most accurate • Provides detailed data • Works for any browser • Best waterfall view • Drawbacks • 90 day free trial • Runs only on Windows • Misses cached components AOL PageTest • Methodology • IE Extension • Competitive Advantage • Open source • more granular details of each HTTP request • Drawbacks • Runs only on IE YSlow • Methodology • Firefox extension • Competitive Advantage • performance lint tool • grades web pages for each rule • Drawbacks • Runs only on FireFox

30. 为什么关注前端性能分析？ • Yahoo 高性能网页最佳实践(14+20) • 前端性能分析工具 • Fiddler • IBM Page Detailer • FireBug • Yahoo YSlow • HTTP Analyzer • AOL PageTest • PageTest 源码解读 • 优化定律 • 如何扩展前端工具

31. ReadyStat • 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.—全部数据已解析完客户端可用的格式

32. PageTest源码调试 • Microsoft Visual Studio c++ 2008 • Win32 Debug • Regsvr32 PageTest.dll • IDE BHO 调试参数: iexplore.exe

33. 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;

34. 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) • { • }

35. IE BHO技术

36. Win32精确计时 QueryPerformanceFrequency((LARGE_INTEGER *)&freq); msFreq = freq / (__int64)1000; … QueryPerformanceCounter((LARGE_INTEGER *)&startRender);

37. render start time and Document 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.

38. 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);

39. 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); }

40. PageTest优化检查列表

41. 优化定律 • 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

42. 为什么关注前端性能分析？ • Yahoo 高性能网页最佳实践(14+20) • 前端性能分析工具 • Fiddler • IBM Page Detailer • FireBug • Yahoo YSlow • HTTP Analyzer • AOL PageTest • PageTest 源码解读 • 优化定律 • 如何扩展前端工具

43. 精减组件利器 • Javascript压缩工具 • YUI Compressor • JSA:国内开源 • JSMin • 图片优化工具 • ImageMagick • Pngcrush：unix/win32 ，开源 • Jpegtran • CSS压缩 • CSSTidy • CSS Sprites图片制作 • CSS Sprite Generator • 服务器端压缩 • Apache deflate

44. 为什么关注前端性能分析？ • Yahoo 高性能网页最佳实践(14+20) • 前端性能分析工具 • Fiddler • IBM Page Detailer • FireBug • Yahoo YSlow • HTTP Analyzer • AOL PageTest • PageTest 源码解读 • 优化定律 • 如何扩展前端工具

45. 如何扩展前端分析工具 • 建立持续网页评估结果库及告警机制 • 集成YSlow 接口？ • 扩充新20条？ • 建立持续网页速率监控池 • 扩展PageTest • 自主研发BHO 工具 • …

46. Books

47. Links pool Exceptional Performance: http://performance.corp.yahoo.com YSlow?: http://performance.corp.yahoo.com/docs/yslow.html IBM Page Detailer: http://alphaworks.ibm.com/tech/pagedetailer AOL Pagetest http://sourceforge.net/projects/pagetest/

48. 写在最后的闲话 大师 匠人

49. FAQ?