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 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. 184.108.40.206). 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
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
The Importance of Front-End PerformanceBack- Front-end=5% end=95% Even Primed Cache, front-end= 88%
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%
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
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
性能分析工具小结 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
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.— 全部数据已解析完客户 端可用的格式
PageTest 源码调试 Microsoft Visual Studio c++ 2008 Win32 Debug IDE BHO 调试参数 : iexplore.exe
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;
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.