<收藏>提高Web性能的14条法则(详细版)

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

-减少ImageRequest次数

-使用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 / JavaScriptRequest次数

-整合多个分开的CSS / JavaScript

 

2. Use a CDN

         http://www.cnblogs.com/ret00100/archive/2010/02/21/1670667.html

3. Add an Expires header

-加入Expires HeaderImage, 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)

http://www.microsoft.com/technet/prodtechnol/WindowsServer2003/Library/IIS/502ef631-3695-4616-b268-cbe7cf1351ce.mspx?mfr=true

 

             Using HTTP Compression for Faster Downloads (IIS 6.0)

http://www.microsoft.com/technet/prodtechnol/WindowsServer2003/Library/IIS/25d2170b-09c0-45fd-8da4-898cf9a7d568.mspx?mfr=true

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以下的HTMLJS还没读完前,都不会显示画面

 

-JavaScriptCode都放在onload执行!

 

7. Avoid CSS expressions

-不要使用CSS expressions

可能这段expression会在每一次mouse move, resize, scroll, key press时执行!

 

-要使用EventHandler去执行这些Expression (JS Code)

 

8. Make JS and CSS external

-反正JSCSS拉到外面成独立档案就是好的,但「首页」可以例外!

-使用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 - 4Hostname,不然会降低页面载入速度

-开启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

http://www.microsoft.com/downloads/details.aspx?FamilyId=56FC92EE-A71A-4C73-B628-ADE629C89499&displaylang=en        

*使用Metabase Explorer开启LM " W3SVC新增DWORD to 2039Value="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);

你可能感兴趣的:(Web)