追踪网页性能
netwok图分析
1、network图上空白为html,javascript或者css的解析时间；
2、Http请求是并行的；
3、当在请求script时，并行请求不发生；当在下载script时，浏览器阻塞附加的http请求；
性能黄金法则
终端10%-20%的时间花费在HTML文档的下载上，另外80%-90%花费在下载页面的部件上(css,javascript,img等)
Http
A GET request and response
请求信息
GET /us.js.yimg.com/lib/common/utils/2/yahoo_2.2.0-b2.js
HTTP/1.1
Host: us.js2.yimg.com
User-Agent:Mozilla/5.0(...)Gecko/20061206 Firefox/1.5.0.9
响应信息
HTTP/1.1 200 OK
Content-Type: application/x-javascript
Last-Modified: Wed, 22 Feb 2006 04:15:54 GMT
Content-Length:355
var YAHOO=...
压缩
减少响应信息大小通过压缩，需要浏览器和服务器都支持它；浏览器需要通过在请求中添加Accept-Encoding头来申明支持压缩，服务器通过添加Content-Encoding头来标识压缩响应；
GET /us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b2.js
HTTP/1.1
Host:us.js2.yimg.com
User-Agent:Mozilla/5.0(...) Gecko/20061206 Firefox/1.5.0.9
Accept-Encoding:gzip,deflate
-------------------------------------------------------------
HTTP/1.1 200 OK
Content-Type:application/x-javascript
Last-Modified: Web, 22 Feb 2006 04:15L54 GMT
Content-Length:255
Content-Encoding:gzip
有条件的GET请求
浏览器缓存中有部件的缓存，但不能确定缓存还是否有效；发送一个查询的GET请求，这个请求用If-Modified-Since头发送最后修改时间给服务器，如果缓存有效，服务器发送一个简短的304响应，浏览器直接使用缓存就好了；
GET /us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b2.js
HTTP/1.1
Host:us.js2.yimg.com
User-Agent:Mozilla/5.0(...) Gecko/20061206 Firefox/1.5.0.9
Accept-Encoding:gzip,deflate
If-Modified-Since: Wed, 22 Feb 2006 04:15:54 GMT
-------------------------------------------------------------
HTTP/1.1 304 Not Modified
Content-Type:application/x-javascript
Last-Modified:Web, 22 Feb 2006 04:15:54 MT
如果部件从指定的日期到现在都没有修改，服务器返回"304 Not Modified"状态码并且跳过发送响应体，这是一个又小又快的响应；
在HTTP/1.1中，ETag和If-None-Match头是另一种查询缓存请求的方式；
Expires
有条件的GET请求和304响应帮助页面加载得更快，但在浏览器和服务器之间依然需要一个来回的请求来验证缓存有效性，Expires头消除了这个必要，只要服务端清楚地告诉浏览器是否使用缓存；
HTTP/1.1 200 OK
Content-Type:application/x-javascript
Last-Modified: Web, 22 Fed 2006 04:15:54 GMT
Expires: Web, 05 Oct 2016 19:16:20 GMT
Keep-Alive
在Http早期的实现中，每一次Http请求都要求打开一个新的socket连接；这个是比较低效的，因为在一个页面上很多的http请求的是相同的服务器，比如在一个页面上的所有图片都请求的是公共的图片服务器。
持久化连接(Persistent Connection)是用来解决打开和关闭连接同一个服务器的多个socket连接的低效问题；浏览器和服务器都使用Connection头来表示对Keep-Alive的支持；
GET /us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b2.js
Host: us.js2.yimg.com
User-Agent: Mozilla/5.0 (...) Gecko/20061206 Firefox/1.5.0.9
Accept-Encoding:gzip,deflate
Connection:keep-alive
-------------------------------------------------------------
HTTP/1.1 200 OK
Content-Type: application/x-javascript
Last-Modified: Web, 22 Feb 2006 04:15:54 GMT
Connection:keep-alive
浏览器和服务器能够通过Connection:close来关闭连接；
流水线技术(Pipelining)在HTTP/1.1中定义，允许很多的请求通过单个Socket来发送，并且每个连接不需要等待响应；
网友评论