1.尽量减少HTTP请求数

合并文件(css,js文件)
使用雪碧图
行内图片(dataURL模式)

2.减少DNS查找
把组件分散在2到4个主机名下，这是同时减少DNS查找和允许高并发下载的这种方案。
3.避免重定向
4.让ajax可缓存
5.延迟加载组件
6.预加载组件

无条件预加载——尽快加载
条件性预加载——预判用户即将进行的操作，进行加载
提前预加载——在推出新设计之前加载一些组件

7.减少DOM元素的数量

语义化标记
DOM元素的数量很容易测试，只需要在Firebug的控制台里输入：document.getElementsByTagName('*').length

8.跨域分离组件

分离组件可以最大化并行下载，但要确保只用不超过2-4个域，因为存在DNS查找的代价。例如，可以把HTML和动态内容部署在www.example.org，而把静态组件分离到static1.example.org和static2.example.org。

9.尽量少用iframe

用iframe可以把一个HTML文档插到父文档里，重要的是明白iframe是如何工作的并高效使用它。
<iframe>的优点:

• 引入缓慢的第三方内容，比如标志和广告。
• 安全沙箱
• 并行下载脚本
  <iframe>的缺点
• 代价昂贵，即使是空白的iframe
• 阻塞页面加载
• 非语义

10.杜绝404

HTTP请求代价高昂，完全没有必要用一个HTTP请求去获取一个无用的响应（比如404 Not Found），只会拖慢用户体验而没有任何好处。

css

11.避免使用CSS表达式

用CSS表达式动态设置CSS属性，是一种强大又危险的方式。从IE5开始支持，但从IE8起就不推荐使用了。例如，可以用CSS表达式把背景颜色设置成按小时交替的：
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

12.选择<link>舍弃@import

13.避免使用滤镜
14.把样式表放在顶部

js

15.去除重复脚本

重复脚本会创建不必要的HTTP请求，执行无用的JavaScript代码，从而影响页面性能。

16.尽量减少DOM访问

用js去访问DOM元素是很慢的，所以，为了让页面反应更迅速，应该：

• 缓存已经访问过的元素的索引
• 先“离线”更新节点，再把它们添到DOM树上
• 避免使用JavaScript修复布局问题

17.用智能的事件处理器

有时候感觉页面反应不够灵敏，是因为有太多频繁执行的时间处理器被添加到了DOM树的不同元素上，这就是推荐使用事件委托的原因。

18.把脚本放在底部

javaScript,css

19.把javaScript和css放到外面

html文档中的行内javaScript和css在每次请求该html文档的时候都会重新下载。

20.压缩javaScript和css文件

图片

21.优化图片
22.优化css Sprite

• 在Sprite图片中横向排列一般都比纵向排列的最终文件小
• 组合Sprite图片中的相似颜色可以保持低色数，最理想的是256色以下PNG8格式
• “对移动端友好”，不要在Sprite图片中留下太大的空隙。虽然不会在很大程度上影响图片文件的大小，但这样做可以节省用户代理把图片解压成像素映射时消耗的内存。100×100的图片是1万个像素，而1000×1000的图片就是100万个像素了。

23.不要用HTML缩放图爿

不要因为在HTML中可以设置宽高而使用本不需要的大图。如果需要<img width="100" height="100" src="mycat.jpg" alt="My Cat" />，那么图片本身(mycat.jpg)应该是100100px的，而不是去缩小500500px图片。

24.用小的可以缓存的favicon.ico（收藏夹图标）

favicon.ico是放在服务器根目录的图片，它会带来一堆麻烦，因为你即使不管它，浏览器也会自动请求它，所以最好不要给一个404 Not Found相应。而且只要在同一个服务器上，每次请求它时都会发送cookie，此外这个图片还会干扰下载顺序，例如在IE中，当你在onload中请求额外组件时，将会先下载favicon。
所以为了缓解favicon.ico的缺点，应该确保:

• 足够小，最好在1K以下
• 设置合适的有效期HTTP头（以后如果想换的化就不能重命名了），把偶小气设置为几个月后一般比较安全，可以通过检查当前favicon.ico的最后修改日期来确保变更能让浏览器知道。

cookie

25.给Cookie减肥

使用cookie的原因有很多，比如授权和个性化。HTTP头中cookie信息在web服务器和浏览器之间交换。重要的是保证cookie尽可能的小，以最小化对用户响应时间的影响。

• 清除不必要的cookie
• 保证cookie尽可能小，以最小化对用户响应时间的影响
• 注意给cookie设置合适的域级别，以免影响其它子域
• 设置合适的有效期，更早的有效期或者none可以更快的删除cookie，提高用户响应时间

26.把组件放在不含cookie的域下

当浏览器发送对静态图像的请求时，cookie也会一起发送，而服务器根本不需要这些cookie。所以它们只会造成没有意义的网络通信量，应该确保对静态组件的请求不含cookie。可以创建一个子域，把所有的静态组件都部署在那儿。

如果域名是www.example.org，可以把静态组件部署到static.example.org。然而，如果已经在顶级域example.org或者www.example.org设置了cookie，那么所有对static.example.org的请求都会含有这些cookie。这时候可以再买一个新域名，把所有的静态组件部署上去，并保持这个新域名不含cookie。Yahoo!用的是yimg.com，YouTube是ytimg.com，Amazon是images-amazon.com等等。

把静态组件部署在不含cookie的域下还有一个好处是有些代理可能会拒绝缓存带cookie的组件。有一点需要注意：如果不知道应该用example.org还是www.example.org作为主页，可以考虑一下cookie的影响。省略www的话，就只能把cookie写到*.example.org，所以因为性能原因最好用www子域，并且把cookie写到这个子域下。

移动端

27.保证所有组件都小于25K
28.把组件打包到一个复合文档里

服务器

29.Gzip组件

前端工程师可以想办法明显地缩短通过网络传输HTTP请求和响应的时间。毫无疑问，终端用户的带宽速度，网络服务商，对等交换点的距离等等，都是开发团队所无法控制的。但还有别的能够影响响应时间的因素，压缩可以通过减少HTTP响应的大小来缩短响应时间。

从HTTP/1.1开始，web客户端就有了支持压缩的Accept-Encoding HTTP请求头。
Accept-Encoding: gzip, deflate
　　如果web服务器看到这个请求头，它就会用客户端列出的一种方式来压缩响应。web服务器通过Content-Encoding相应头来通知客户端。
Content-Encoding: gzip
　　尽可能多地用gzip压缩能够给页面减肥，这也是提升用户体验最简单的方法。

30.避免图片src属性为空

Image with empty string src属性是空字符串的图片很常见，主要以两种形式出现：

straight HTML
<img src=””>
JavaScript
var img = new Image();
img.src = “”;

这两种形式都会引起相同的问题：浏览器会向服务器发送另一个请求。

31.设置Etags

32.对ajax使用GET请求

浏览器的POST请求是通过一个两步的过程来实现的：先发送HTTP头，在发送数据。所以最好用GET请求，它只需要发送一个TCP报文（除非cookie特别多）。IE的URL长度最大值是2K，所以如果要发送的数据超过2K就无法使用GET了。

POST请求的一个有趣的副作用是实际上没有发送任何数据，就像GET请求一样。正如HTTP说明文档中描述的，GET请求是用来检索信息的。所以它的语义只是用GET请求来请求数据，而不是用来发送需要存储到服务器的数据。

33.尽早清空缓冲区

当用户请求一个页面时，服务器需要用大约200到500毫秒来组装HTML页面，在这期间，浏览器闲等着数据到达。PHP中有一个flush()函数，允许给浏览器发送一部分已经准备完毕的HTML响应，以便浏览器可以在后台准备剩余部分的同时开始获取组件，好处主要体现在很忙的后台或者很“轻”的前端页面上（P.S. 也就是说，响应时耗主要在后台方面时最能体现优势）。
　　较理想的清空缓冲区的位置是HEAD后面，因为HTML的HEAD部分通常更容易生成，并且允许引入任何CSS和JavaScript文件，这样就可以让浏览器在后台还在处理的时候就开始并行获取组件。
例如：

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: &quot;Courier New&quot; !important; font-size: 12px !important;"> ... <!-- css, js -->
    </head>
    <?php flush(); ?>
    <body>
      ... <!-- content --></pre>

34.使用CDN（内容分发网络）
35.添上Expires或者Cache-Control HTTP头

这条规则有两个方面：
对于静态组件：通过设置一个遥远的将来时间作为Expires来实现永不失效
多余动态组件：用合适的Cache-ControlHTTP头来让浏览器进行条件性的请求
　　网页设计越来越丰富，这意味着页面里有更多的脚本，图片和Flash。站点的新访客可能还是不得不提交几个HTTP请求，但通过使用有效期能让组件变得可缓存，这避免了在接下来的浏览过程中不必要的HTTP请求。有效期HTTP头通常被用在图片上，但它们应该用在所有组件上，包括脚本、样式和Flash组件。
　　浏览器（和代理）用缓存来减少HTTP请求的数目和大小，让页面能够更快加载。web服务器通过有效期HTTP响应头来告诉客户端，页面的各个组件应该被缓存多久。用一个遥远的将来时间做有效期，告诉浏览器这个响应在2010年4月15日前不会改变。Expires: Thu, 15 Apr 2010 20:00:00 GMT
　　如果你用的是Apache服务器，用ExpiresDefault指令来设置相对于当前日期的有效期。下面的例子设置了从请求时间起10年的有效期：ExpiresDefault "access plus 10 years"