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

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

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)

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以下的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

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

*使用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);

转载于:https://www.cnblogs.com/ret00100/archive/2009/12/07/1618612.html

收藏提高Web性能的14条法则（详细版）相关推荐

  1. 提高Web性能的14条法则（详细版）

    Steve Souders这个家伙写了一本书叫做:High Performance Web Sites: Essential Knowledge for Front-End Engineers 这本书 ...

  2. YaHoo Web优化的14条法则

    2019独角兽企业重金招聘Python工程师标准>>> Web应用性能优化黄金法则:先优化前端程序(front-end)的性能,因为这是80%或以上的最终用户响应时间的花费所在. 法 ...

  3. 构建高性能网站的14条法则：减少HTTP请求

    1.减少HTTP请求 80%的终端用户响应时间花在了前台.其中,大部分时间都用于下载页面中的各种组件--图像.样式表.脚本.Flash等等.因此,减少组件的数量就能够减少呈现页面所需的HTTP请求数量 ...

  4. 快读学习提高web性能2——Next.js中的路由预取

    Next.js中的路由预取 Next.js如何通过路由预取以及如何对其进行自定义来加快导航速度. 你会学什么? 在本文中,您将学习Next.js中的路由如何工作,如何针对速度进行优化以及如何对其进行自 ...

  5. 提高Web性能的前端优化技巧总结

    转载于:https://www.cnblogs.com/wangyayun/p/6472253.html

  6. i7 3960x支持服务器内存吗,i7 3960x 性能如何？—前所未有的详细版测评

    从目前Intel公布的资料来看,SNB-E首发将会有三款新产品诞生,他们分别是:4核心8线程倍频部分解锁的i7-3820,它的定位类似与LGA 1366接口的i7-980类似;然后是不锁倍频的i7-3 ...

  7. 优化网站性能 提高网站速度访问速度的14条实践

    相信互联网已经越来越成为人们生活中不可或缺的一部分.ajax,flex等等富客户端的应用使得人们越加"幸福"地体验着许多原先只能在C/S实现的功能.比如Google机会已经把最基本 ...

  8. 优化网站性能 提高网站速度访问速度的14条实践(转)

    相信互联网已经越来越成为人们生活中不可或缺的一部分.ajax,flex等等富客户端的应用使得人们越加"幸福"地体验着许多原先只能在C/S实现的功能.比如Google机会已经把最基本 ...

  9. Web性能优化：What? Why? How?

    为什么要提升web性能? Web性能黄金准则:只有10%~20%的最终用户响应时间花在了下载html文档上,其余的80%~90%时间花在了下载页面组件上. web性能对于用户体验有及其重要的影响,根据 ...

最新文章

  1. Ubuntu 14.04系统托盘图标问题，skype托盘图标显示
  2. Java报错解决：org.apache.http.ConnectionClosedException: Premature end of chunk coded message body: closi
  3. C++ Primer 5th笔记（7）chapter7 类：编译相关
  4. 干货 | BBR及其在实时音视频领域的应用
  5. SQL Server的数据导入MySQL数据库方法简介
  6. 【MATLAB技巧】——求解符号方程
  7. 思维导图很难做？MindManager教你一招致胜！
  8. python中换行的转义字符_Python语言中表示换行的转义字符是____________。(2.5分)_学小易找答案...
  9. 网络图片嗅探工具driftnet
  10. win11开机数字小键盘失灵不能使用问题
  11. HTML5期末大作业：海美食网站设计——上海美食(8页) 酒水网页设计作业,甜品美食网页制作作业, 学生零食网页作业
  12. java使用jacob给word添加水印
  13. JavaScript之DOM对象
  14. 抖音小店VS淘宝店铺，哪个更有优势？
  15. jsp 页面传值 到后台 中文乱码解决方法
  16. VFP 二维数组声明和ALEN() ASCAN() AFIELD() ADEL()函数
  17. 2021面试第二弹来袭
  18. matlab三个自变量一个因变量拟合
  19. 本周总结 卡迈克尔数，缩系与剩余系的重排与构造
  20. Java数据对象（JDO）的应用

热门文章

  1. 转：从明天起，做一个会听的人，移情、理解、再沟通
  2. python 遍历是什么意思_python for语句的执行过程是什么
  3. 生活再幸福网名没你也是空
  4. 前端小白实战过程----制作在线购物类网页
  5. 中国主要信息咨询领域机构公司经营指数规模
  6. 改变python对象的黑魔法metaclass
  7. ProcessDB实时/时序数据库——C/C++操作数据库对象
  8. 美国服务器Ping值多少算正常
  9. ExcelVba 选区遍历
  10. alter在MySQL中是什么意思_MySql之ALTER命令用法详细解读（转）