高性能网站建设指南（yahoo！14条）

序言

压缩：Accept-Encoding <-> Content-Encoding

 

Browser利用本地缓存：

Last-Modified <-> If-Modified-Since （-> 304）：每次均会进行http请求确认

Expire: 在有效期内不会进行任何http请求

 

Keep-Alive: 基于单个socket，可以进行多个http请求

http1.1 管道：性能优于Keep-Alive，但不是所有浏览器都支持（具体待查？）

 

 

 

减少Http请求

Image Map: 只能是矩形区域

 

Css Sprites

 

Inline images：

基于data:[<mediatype>][;base64],<data>，实质就是讲图片进行编码，直接以字符串格式写入html或者css中。注意：data:[<mediatype>][;base64],<data>可以支持a、script等所有url。

缺点：不被IE支持（IE7-，IE8+待查？）；编码大小受限制

 

合并脚本和样式表

 

 

 

使用Content Delivery Network

 

 

 

使用Expires头

Expires缺点：

使用一个具体的特定时间，要求服务器时间和客户端时间严格同步；

服务器端过期时间需要经常检查并且更新。

 

Cache max-age: 需要支持Http1.1的浏览器

哪些浏览器默认用的还是http1.0？

 

 

 

压缩组件

原理：

Request Header: Accept-Encoding：gzip, deflate -> Response: Content-Encoding: gzip

(注意：gzip是标准，更通用)

 

代理缓存：

给服务器的Vary响应头包含上：Accept-Encoding

 

 

 

将样式表放在顶部

 

 

 

将脚本放在底部

Http1.1规范建议浏览器从每个主机名并行下载2个组件，IE默认设置为2个，FF默认设置为8个；

下载Js时，为了保证js按照正常顺序加载执行，禁用并行下载。

 

 

 

避免CSS表达式

所谓的css表达式， 即在css中通过expression方法接受一个javascript表达式来动态设置css样式。如：background-color:expression(new Date().getHours() % 2 ? “#ccc” : “#fff”); ；

注意：css expression只被IE识别，被其他浏览器所忽略；

表达式功能强大，但性能低下。

 

避免方法：

一次性表达式（js定义方法，css引用），如：width：expression(setWidth(this));

事件处理；

 

 

 

使用外部CSS和Javascript

内联 VS 外部

 

加载后下载：

将不公用的css、js内联，将公用的通过js在onload事件中基于setTimeout延迟加载（可以将该操作独立到一个隐藏的iframe中，这样不会影响页面正常显示）。

 

动态内联：

检查cookie是否存在，存在则直接引用外部css&js（cookie存在，正常情况下css&js均在缓存中，即使被清楚，也不过是真正去请求下载）；不存在，则先内联css&js，减少http请求数，尽快加载渲染页面，然后基于加载后下载技术下载外部css&js，并且写入cookie（当cookie不存在但css&js已在缓存中时，浏览器不会真正去下载css&js）

 

 

 

减少DNS查找

减少站点唯一主机名 & 使用Keep-Alive；

 

权衡组件并行下载数 和 DNS查找数建议： 组件分布到2~4个主机名.

 

 

 

精简Javascript

精简工具：

Jsmin：http://crockford.com/javascript/jsmin

Shinksafe: http://shrinksafe.dojotoolkit.org/

 

 

 

避免重定向

301 VS 302

 

Baidu搜索结果列表通过onmousedown来做流量统计；

Yahoo通过动态建立一个img，然后设置src路径为后端统计程序。

 

 

 

移除重复脚本

 

 

 

配置或者移除ETag (Entity Tag)

完整过程：

Request -> Response: ETag: “***…” -> Re Request: If-None-Match: “***…” -> Response: 304 Not Modified

 

缺点：

默认情况下，ETag通常根据服务器某些属性来产生，同已组件在IIS、Appache集群不同机器上产生的ETag可能不一样。而If-None-Match优先级高于If-Modified-Since，导致服务器集群时缓存利用率极低。

 

建议：

重写或者移除ETag

 

 

 

使Ajax可缓存

如果业务许可，可以增加长久的Expires头