前端性能优化笔记

1.减少http请求

2.如果需要在页面中为背景，按钮，导航栏提供大量背图片，CSS Sprites可以缩短响应时间

3.合并脚本和样式表

4.对于地理上分散的用户群来说,CDN（内容发布网络）能轻易的得到响应速度的提高
(注：CDN用于发布静态内容，如图片，脚本，flash.动态HTML会对存储有特殊需求–数据库连接，状态管理，验证等，这种超出CDN能力范围内。)

5.浏览器（和代理）使用缓存来减少HTTP请求的数量，并减小HTTP响应的大小。Expires头告诉Web客户端“在这一日期之后，响应是无效的”。静态的html页面想要设置使用缓存,通过HTTP的META设置expires和cache-control ，max-age（s）

• 一个资源文件设置了expires过期时间并且在浏览器端缓存后，在过期时间前，浏览器再次访问该资源时不会再请求(连接)服务器（按F5强制刷新除外），直接使用浏览器上的本地缓存，哪怕服务器里的资源版本已经改变了。如果不设置expires，浏览器会请求(连接)服务器，判断本地缓存中的资源与服务器里的资源是否一样，如果一样，服务器返回304状态到浏览器，浏览器不再下载服务器的版本，直接使用本地缓存;
  如果不一样，浏览器会下载服务器上新的资源替换本地缓存中的旧资源。

 -  <meta http-equiv="Cache-Control" content="max-age=7200" /> -  <meta http-equiv="Expires" content="Mon, 20 Jul 2013 23:00:00 GMT" />

6.压缩组件(服务器端完成，gzip)，压缩通常能将响应的数据量减少近70%， 缺点是服务器会花费额外的CPU周期来完成压缩，客户端要对压缩文件进行解压缩，要检测收益是否大于开销。

7.将样式表放在顶部，脚本放在底部，避免css表达式
8.使用外联JS+CSS，好处是可以被浏览器缓存。
9.精简.

• 精简javascript —– 混淆 和精简一样，它也会移除精简和空白，同时它还会改写代码，作为改写的部分，函数和变量将被简化为更短的字符串，这时的代码更加精炼也更难阅读。通常这样做是为了增加对代码进行反向工程的难度，但这对提高性能也有帮助。
• 精简css —–移除注释和空白，使用缩写#fff代替#ffffff，用0代替0px等。

10.避免重定向
11.移除重复脚本
12.当网站被宿主在多于一台服务器上时,ETag头可能会阻碍缓存。
13.使ajax可缓存