<收藏>提高Web性能的14条法则（详细版）
2008-08-27 22:45 sun@live 阅读(721) 评论(0) 编辑 收藏 举报
Steve Souders这个家伙写了一本书叫做：High Performance Web Sites: Essential Knowledge for Front-End Engineers
这本书里定义了14条让你的网页加速的方法，分别如下：
1. Make fewer HTTP requests
2. Use a CDN
3. Add an Expires header
4. Gzip components
5. Put CSS at the top
6. Move JS to the bottom
7. Avoid CSS expressions
8. Make JS and CSS external
9. Reduce DNS lookups
10. Minify JS
11. Avoid redirects
12. Remove duplicate scripts
13. Turn off ETags
14. Make AJAX cacheable and small
1. Make fewer HTTP requests
-减少Image的Request次数
-使用CSS Sprites技巧http://alistapart.com/articles/sprites
-使用Image Map技巧
-使用Inline Image技巧( data: ) http://tools.ietf.org/html/rfc2397
P.S.可以开发一个Inline Image产生器！
PS建议将Inline Image快取在CSS档案中，这样可避免HTML太大
-减少CSS / JavaScript的Request次数
-整合多个分开的CSS / JavaScript
2. Use a CDN
N/A
3. Add an Expires header
-加入Expires Header到Image, CSS, JavaScript档案里
4. Gzip components
-压缩HTML, JavaScript, StyleSheet, XML, JSON，但切记「不要压缩Images, PDF档案」！
-设定方法
Apache 2.x:使用mod_deflate：
AddOutputFilterByType DEFLATE text/html text/css application/x-javascript
IIS 6.0
Enabling HTTP Compression (IIS 6.0)
Using HTTP Compression for Faster Downloads (IIS 6.0)
Enabling HTTP Compression in IIS 6.0
http://dotnetjunkies.com/Article/16267D49-4C6E-4063-AB12-853761D31E66.dcik
IIS Compression in IIS6.0
http://weblogs.asp.net/owscott/archive/2004/01/12/57916.aspx
IIS 5.0
HOW TO：启用IIS中的ASPX压缩
http://support.microsoft.com/kb/322603
- HTTP Header Style
HTTP request
Accept-Encoding: gzip, deflate
HTTP response
Content-Encoding: gzip
Vary: Accept-Encoding (这行是给Proxy Server看的)
-其他注意事项
-个人化的页面要加上==> Cache-Control: Private
-移除ETags (Rule 13)
5. Put CSS at the top
-一定要将CSS放在<head>区段载入!
-使用<LINK>标签，不要使用@import语法
- Avoid Flash of Unstyled Content (FOUC) in IE
http://www.bluerobot.com/web/css/fouc.asp/
<!-- Hack to avoid flash of unstyled content in IE -->
<script type="text/javascript"> </script>
6. Move JS to the bottom
-一定要将所有JavaScript都摆在页面最下方</body>之前
所有在JavaScript Include以下的HTML在JS还没读完前，都不会显示画面
-把JavaScript的Code都放在onload执行！ ！
7. Avoid CSS expressions
-不要使用CSS expressions
可能这段expression会在每一次mouse move, resize, scroll, key press时执行!
-要使用EventHandler去执行这些Expression (JS Code)
8. Make JS and CSS external
-反正JS跟CSS拉到外面成独立档案就是好的，但「首页」可以例外！
-使用Post-onload download技巧
download external files after onload
window.onload = downloadComponents;
function downloadComponents() {
var elem = document.createElement("script");
elem.src = "http://.../file1.js";
document.body.appendChild(elem);
...
}
范例：http://stevesouders.com/hpws/dynamic-inlining.php
作法：
1.在Server-side判断使用者Browser有设定Cookie["hasPostOnloadDownload"]
1.1.若没有，就使用post-onload download动态下载CSS & JS
1.2.若有用，就直接用<script src="xxxx.js"></script>下载，Browser会抓取Cache的版本
P.S. cookie expiration date is key
9. Reduce DNS lookups
-在一个页面中，不要超过2 - 4个Hostname，不然会降低页面载入速度
-开启Keep-Alive支援
10. Minify JS
- jsmin : http://crockford.com/javascript/jsmin
下载后更名成jsmin.zip解压缩出jsmin.exe即可执行,jsmin.exe < input.js > output.js (注意：所有UTF-8编码的js档会变成ANSI as UTF-8编码)
- dojo compressor : http://dojotoolkit.org/docs/shrinksafe
11. Avoid redirects
-参考资料：http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
-避免Redirect产生的方式
*网址若省略档名时，最后面一定要加上/结尾
*追查Log档
-查看Log Referer
12. Remove duplicate scripts
-这一点虽然很呆，不过连MSN Space, Yahoo都有类似的情况！
-在ASP.NET的元件中(UserControls, WebControls)，请多使用Page.ClientScript.RegisterScriptInclude的方式！
13. Turn off ETags
-基本格式
* unique identifier returned in response
ETag: "c8897e-aee-4165acf0"
Last-Modified: Thu, 07 Oct 2004 20:54:08 GMT
* used in conditional GET requests
If-None-Match: "c8897e-aee-4165acf0"
If-Modified-Since: Thu, 07 Oct 2004 20:54:08 GMT
- if ETag doesn't match, can't send 304
- ETag format
Apache: ETag: inode-size-timestamp
IIS: ETag: Filetimestamp:ChangeNumber
- IIS设定方式
自动设定方式
ETagFix - keep IIS eTags from changing http://www.snapfiles.com/get/etagfix.html
原创公司：ISAPILab http://www.isapilabs.com/
安装http://www.isapilabs.com/downloads/ETagFix-setup.exe之后会重新启动IIS之后就没问题了！
Related: http://www.snapfiles.com/Freeware/server/fwiis.html
Note:
在IIS 5.0可以正常运作
在IIS 6.0必须要执行在Isolate Mode才可以使用ISAPI，预设是不能用的！
手动设定方式
*如果不是用Windows Server 2003 SP1要先安装Hotfix 900245 http://support.microsoft.com/kb/900245/
*先安装IIS 6.0 Resource Kit
*使用Metabase Explorer开启LM " W3SVC新增DWORD to 2039其Value="0" (每一台WebFarm底下的电脑都要这样设定)
*重新启动IIS
net stop iisadmin /y
net start w3svc
net start smtpsvc
参考资料
*您可能会当您使用Internet Explorer 6，试着存取Web应用程式所装载在Internet Information Services 6.0 Web效能非常低
http://support.microsoft.com/kb/922703/
- Apache设定方式
FileETag none
14. Make AJAX cacheable and small
- XHR, JSON, iframe, dynamic scripts都一样可以被快取(Cached)、最小化(minified)和压缩(gzipped)
-个人化的页面回应时，一样要做快取，但是针对「该使用者」做快取(Cache-Control: private)
-在使用XHR时，URL可以加上「最近的修改时间」在QueryString里。
GET /yab/[...]&r=0.5289571053069156 HTTP/1.1
-回传资料时的Header可以用Cache-Control: private + Last-Modified，使用者就不会一直连到网站抓网站了!!
设定Cache Header注意事项:
*个人化的页面一定要设定Response.Cache.SetCacheability(HttpCacheability.Private);
*如果要Cache页面或External Reference档案(CSS/JS)一定要加上Response.Cache.SetLastModified(DateTime.Now);
*如果不加上MaxAge的话，将会无限时间的Cache直到下次Reload或开新Browser手动输入网址进入网页
*如果要指定Cache的时间要加上
Response.Cache.SetMaxAge(new TimeSpan(0, 0, 0, 10));
Response.Cache.SetExpires(DateTime.Now.AddSeconds(10));
*如果不要页面被Cache的话
Response.Cache.SetMaxAge(TimeSpan.Zero);
Response.Cache.SetExpires(DateTime.MinValue);
