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
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
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
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
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;
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.
http://www.ibm.com/developerworks/websphere/library/techarticles/hipods/perform.html The communication progresses as follows: A client user enters a request (for example, a Web site name like www.ibm.com.). The browser application accepts the request, then typically uses the domain name service (DNS), a service of the User Datagram Protocol (UDP), to resolve fully qualified names (FQNs) such as www.ibm.com into Internet Protocol (IP) addresses such as 123.321.456.34. DNS builds a connection to the DNS server to obtain the IP address. When the browser receives the IP address, it initiates a Hypertext Transfer Protocol (HTTP) request. HTTP runs on the Transmission Control Protocol (TCP), which runs on IP, the network-layer protocol of the Internet. What happens next depends on whether communications are secured. If communications are not secured, the browser passes an HTTP request directly through TCP/IP, which creates a socket, a virtual mechanism to manage the addressing needed for sending the request and establishing the connection to the Web server. If communications are secured, the browser passes a secure HTTP (HTTPS) request to Socks, a security package that negotiates for transmission through the firewall. Such security negotiations occur both before sending the request and before receiving the response. The server also refers to the socket to accept the request and return the response through the firewall.
http://space.itpub.net/100788/viewspace-256935 http://www.codeproject.com/KB/aspnet/PageLifeCycle.aspx 呼应关系: 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.— 全部数据已解析完客户端可用的格式
An exceptional backend alone won’t get your far in terms of response time performance. Without cache, 5/95 split. With a primed cache, it still is 88% for FE.
Web Application Optimization is all about tuning your web application components to make your web application fast or appear fast.
1 让 HTML 缓冲内容提前推送到客户端。 Response.flush 与减少 http 请求是对立的 2 POST is a two-step process (send headers, send data) 而 get 请求仅仅使用一次请求, cookie 信息除外 3 The rest can wait (drag and drop, animations, hidden content, images below the fold) Onload 完成后执行 工具有 :YUI image loader,YUI Get utility 4 google Suggest, 智能提示 5 A complex page means more bytes to download It also means slower DOM access in JavaScript 不要滥用表格和 div 6 Maximize parallel downloads 组件从一台主机下载,响应时间受到并发线程数限制以及带宽限制。 但由于 DNS 开销损耗 But not more than 2-4 domains, because of the DNS lookup penalty Future: IE8 will allow 6 requests per domain 7 iframe: They have a cost even if blank They block page onload Non-semantic 8 When an external JavaScript is a 404, the browser will still try to parse it and find something usable in it The second component is a 404 JavaScript and it blocks the rest of the page 9 cookie 名字短小,设置域范围 10 创建子域存放静态的组件,减少 cookie 信息。 如 yahoo 的 yimg.com 11 采用缓存元素引用、避免直接操作 DOM 、避免用 JS 修改页面布局 12 Don't wait for onload , use DOMContentLoaded 采用事件委托机制。 YUI,JQuery,Prototype,Ext 13 import = 把 css 放在页面底部 14 IE proprietary AlphaImageLoader Fixes an IE6 problem with semi-transparent PNGs, IE7 is fine Blocks rendering, freezes the browser Increased memory consumption Per element, not per image! Best: Avoid completely, use gracefully degrading PNG8 Fallback: use underscore hack _filter not to penalize IE7+ users 16 多个小图片组合成一个大图片,然后用 CSS 技术对图片像素分割获取显示特定位置的图像。 17 如需要 100*100 的图片,就不要下载 500*500 的缩放图片 18 favicon.ico 根目录下的图片文件。 干扰正常的下载顺序。文件占总页面 PV 9% 。 19
1 Browsers limits the number of connections to: four simultaneous connections (plus one queued connection) for a single HTTP 1.0 server, and two simultaneous connections to a single HTTP 1.1 server? Components are downloaded two or four at a time per hostname, depending on the HTTP server version. There are a couple exceptions to this rule that I just wanted to verbally mention: Firefox has default 8 connections Users can modify their configuration http://support.microsoft.com/?kbid=282402 http://kb.mozillazine.org/Network.http.max-connections http://kb.mozillazine.org/Network.http.max-connections-per-server http://kb.mozillazine.org/Network.http.max-persistent-connections-per-proxy http://kb.mozillazine.org/Network.http.max-persistent-connections-per-server 2 总耗时 3 IBM Page Detailer 支持 firefox 4 Nothing is rendered until all external CSS is downloaded 5 JS components block simultaneous downloads – all other download queues are not used. 6 首先,浏览器对于 script 的下载是避免并行进行的。 HTTP/1.1 协议中规定浏览器和同一 host 之间只建立最多两个连接,也就是说允许的最大并行度为 2 (当然,对 IE 和 Firefox 来说,你都可以通过修改浏览器的设置来扩大这个并行度)。但对于 Script 的下载来说,浏览器在开始下载 Script 之后,是不会并行的下载其他 element 的 7 http:// www.dbanotes.net/web/browser_connections_per_server.html 8 IBM Page Detailer 通过在客户端的 Windows 端口堆栈中插入探针( Probe )来获取相关信息 9 IBM Page Detailer 能够获取以下类型的数据: 总连接时间 端口连接时间和传输数据量 SSL 连接时间和传输数据量 Server 响应时间和传输数据量 内容传输时间和数据量 传输延迟时间 请求字节头 请求传输数据 反馈字节头 反馈数据内容 页面数总计,平均及最大、最小页面数
Group Level Timeline Chart The colored bars are used to express the relative timing of requests in the same group ( Webpage for IE Add-on, Process for Stand-alone) and the different phases of an HTTP request, e.g. blocked, connect, etc. The screen shot below shows a timeline from the google home page: Blocked The Blocked time includes any pre-processing time (such as cache lookup) and the time spent waiting for a network connection to become available. By default, IE allows only two outstanding connections per host name when talking to HTTP/1.1 servers or eight-ish outstanding connections total. Firefox has similar limits. Often the block time is the most significant factor in the time to download images embedded in the website. &quot;Blocked&quot; is available only in IE Add-on Edition DNS Lookup DNS Lookup represents the DNS Lookup time. It's the time that required to query a DNS name server to look up and find IP address information of computers in the internet. For example, resolve a host name (e.g. www.ieinspector.com) into a numeric IP address (e.g. 203.22.204.73). Connect Connect represents the TCP level connection time. It's the time that a new TCP level connection was established with web server(s) . If a secure HTTPS connection is being used this time includes the SSL handshake process. &quot;Keep-alive&quot; HTTP connections allow multiple requests to be send over the same TCP connection, and in some cases have been shown to result in an almost 50% speedup in latency times for HTML documents with lots of images. Send first to last Send represents the time required to send the HTTP request message to the server. This value will depend on the amount of data that is sent to the server. Wait Wait is the idle time taken to receive a response message from the server. This value includes network delay time and web server processing time. Receive first to last Receive is the time that receive the response message from the web server. This value will depend on the size of the return data, network bandwidth, as well as whether or not to use the HTTP compression method. Cache Read Cache Read is the time taken to read the content from the browser cache during (Cache) or 304 responses.
Each HTTP request is broken down into get IP, open socket, time to first byte, and content download all color coded on each waterfall chart
CTestState::DoStartup(CString& szUrl) QueryPerformanceCounter((LARGE_INTEGER *)&lastRequest); lastActivity = lastRequest; CBrowserEvents::BeforeNavigate QueryPerformanceCounter((LARGE_INTEGER *)&lastRequest); lastActivity = lastRequest; void LineVert(HDC hDC, int x, int y0, int y1) { POINT line[2] = {{x,y0},{x,y1}}; Polyline(hDC, line, 2); }
/*----------------------------------------------------------------------------- See if the provided IP address belongs to a CDN -----------------------------------------------------------------------------*/ bool CPagetestReporting::IsCDN(CString host) { bool ret = false; if( !host.IsEmpty() ) { // make sure we haven't already identified it bool found = false; POSITION pos = cdnLookups.GetHeadPosition(); while( pos && !found ) { CCDNEntry &entry = cdnLookups.GetNext(pos); if( entry.name == host ) { found = true; ret = entry.isCDN; } } if( !found ) { // look it up and look at the cname entries for the host hostent * dnsinfo = gethostbyname(CT2A(host)); if( dnsinfo && !WSAGetLastError() ) { // check the official name CStringA name = dnsinfo->h_name; name.MakeLower(); if( name.Find(&quot;.akamai.net&quot;) > -1 || // Akamai name.Find(&quot;.llnwd.net&quot;) > -1 || // Limelight name.Find(&quot;edgecastcdn.net&quot;) > -1 || // Edgecast name.Find(&quot;hwcdn.net&quot;) > -1 || // Highwinds name.Find(&quot;.panthercdn.com&quot;) > -1 || // Panther name.Find(&quot;.nyucd.net&quot;) > -1 // Coral Cache ) ret = true; } // add it to the list of resolved names CCDNEntry entry; entry.name = host; entry.isCDN = ret; cdnLookups.AddHead(entry); } } return ret; }
these factors and their related tradeoffs: Number, size, and complexity of items Number of connections Number of servers accessed Use of white space Load sequences Data security