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. The sluggish Web
 500 ms slower = 20% drop in
traffic (Google)
 100
ms slower = 1% drop in sales
(Amazon)

4. Web User Perceive’s Response
time

5. A view of Web
communications

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

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

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

9. 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

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

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. 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. Don't 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.  为什么关注前端性能分析？
 Yahoo 高性能网页最佳实践 (14+20)
 前端性能分析工具
◦ Fiddler
◦ IBM Page Detailer
◦ FireBug
◦ Yahoo YSlow
◦ HTTP Analyzer
◦ AOL PageTest
 PageTest 源码解读
 优化定律
 如何扩展前端工具

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. IBM Page Detailer
Chart(IE7)

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.80
response 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. IBM Page Detailer details

18. FireBug Net Panel

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

20. HTTP Analyzer3

21. AOL PageTest WaterFall
View

22. AOL PageTest Optimiztion
CheckList

23. 在线网页分析
websiteoptimization

24. 性能分析工具小结 FireBug Net Panel
IBM 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.  为什么关注前端性能分析？
 Yahoo 高性能网页最佳实践 (14+20)
 前端性能分析工具
◦ Fiddler
◦ IBM Page Detailer
◦ FireBug
◦ Yahoo YSlow
◦ HTTP Analyzer
◦ AOL PageTest
 PageTest 源码解读
 优化定律
 如何扩展前端工具

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. PageTest 源码调试
 Microsoft Visual Studio c++ 2008
 Win32 Debug
 IDE BHO 调试参数 : iexplore.exe

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. 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. IE BHO 技术

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

32. 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.

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. 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. PageTest 优化检查列表

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

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

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

40. 如何扩展前端分析工具
 建立持续网页评估结果库及告警机制
◦ 集成 YSlow 接口？
◦ 扩充新 20 条？
 建立持续网页速率监控池
◦ 扩展 PageTest
◦ 自主研发 BHO 工具
◦ Apache module 推送 document.readyState 事件代码
◦ …

41. Books

42. 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/