网站的性能[转]

http://iamlze.cn/archive/dont-forget-FrontEnd-performance/

网址分享一下的，关于缓存的http://www.mnot.net/cache_docs/

YSlow里面的指标确实也不少，paperen不打算全部都解析一遍，毕竟没有那个水平而且还没有研究到那么深~paperen打算就解析一下以下这些，而且这些是最值得我们去改善的方面。

1.MakefewerHTTPrequests——减少HTTP请求数量

2.AddExpiresheaders——添加缓存头

3.Compresscomponents——压缩组件

4.PutCSSattop——将css放在头部

5.PutJavaScriptatbottom——将javascript放在底部

6.AvoidCSSexpressions——避免css表达式

7.MakeJavaScriptandCSSexternal——javascript与css使用外链的方式

8.MinifyJavaScriptandCSS——javascript与css最小化

9.RemoveduplicateJavaScriptandCSS——移除重复的javascript与css

10.Configureentitytags(ETags)——配置ETags

11.MakeAJAXcacheable——使AJAX可缓存

1.对于第一点减少HTTP请求数量，之前paperen的关于网站打开速度那点事也提及到一点点，主要是有关图片的。

如果将图片都单独出来的话那么这里三张图片就是三次HTTP请求，但是如果将图片集在一起那么只有一次HTTP请求，减少了两次，我们可以使用CSSSprite这种技巧去同时使用同一张图片但显示不同区域的内容。

CSSSprite简单来说就是类似于下面这样：

.icon{background:url(image/icons.gif);display:block;position:absolute}

.brainstorm_icon{background-position:-404px-32px;width:27px;height:32px;left:3px;top:7px}

.script_icon{background-position:00;width:32px;height:30px;left:0;top:7px}

.apple_icon{background-position:-32px0;width:26px;height:32px;left:3px;top:5px}

改变backgroun-position就能显示不同区域的内容，当然要限定宽度与高度，在PS或fireworks里面度量时尺寸多大就设定为多大。

2.添加缓存头，这个或者可以说对于第一次浏览者来说没太大作用，这个技巧重要在浏览者之后的重复访问，可以大大地减少数据传送，加快速度。有大部分组件其实是不要时刻重新下载的，例如图片，css，js这些文件其实在第一次下载后，后面若网站没有对这些文件产生改变时其内容是不变的，那没有必要在以后访问时再重新下载一次，影响速度也浪费流量。

如果您服务器提供使用.htaccess文件的话可以在里面加上

<IfModulemod_expires.c>

ExpiresActiveon

<FilesMatch".(gif|jpg|jpeg|png|ico|js|css|ico)$">

加上了关于缓存的配置后在第一次请求回应时，服务器会告诉浏览器该文件的过时日期，如果这个文件在这段时间内没有修改过那么完全可以使用本地缓存的文件而不用重新请求下载该文件，减少重复而无用的工作。注意查看响应头信息的Expires与Last-Modified，还有Cache-Control。建议最好自己动手试试，您会对结果感到满意的，但是有一点需要注意的是，不要为变动大的文件加上缓存配置，可能会得不偿失。

使用缓存后，你可以看到总共215.4KB的数据里面有194.8KB被缓存的，那代表什么，我想您应该明白的！又减轻服务器压力又减少客户流量！

3.关于压缩组件，要确认服务器是否有使用压缩，您可以查看响应头信息是否存在Content-Encoding，一般浏览器请求头部也会声明自己支持哪种压缩，Accept-Encodinggzip,deflate。可以查看上上张图片，不过paperen并没有开启压缩，YSlow也已经提示了，大家想要实现gzip压缩可以在.htaccess文件中加上

HeadersetContent-Encodinggzip

但使用压缩后的js与css需要进行一些特殊的处理，可以查看一下这篇文章，要对js与css在传送前重定向一下到一个php文件进行一下处理，paperen觉得第一个评论就已经很值得思考，而博主回复得也很到位。

4.将Css放到头部，或者您只需要记住这是一个规则，如果要解析为什么的话，可以查阅一下paperen提到的那本书的规则5，因为这归根于浏览器解析页面的原理。

5.将javascript放到底部，将javascript放在body标记结束之前是最好的做法，正如书中说的“脚本会阻塞对其后面内容的呈现，脚本会阻塞对其后面组件的下载”，如果您将大量的javascript放在头部，这样可能会让浏览者处于一个白屏状态（如果js文件下载得不是很快的话），会让他们觉得慢。

不妨可以看看paperen的关于页面，调用了google地图来显示paperen的位置，结果有时候会让边栏无法显示，因为google的js加载不过去……如果将google地图的js放到body标签结束之前就不会这样了。

6.避免在css中使用表达式，paperen很久之前就有一篇东西用到这个css表达式完美的弹出层，现在paperen倒觉得有点疑问为啥当时会使用完美这个形容词……里面有一条css是这样写的。

_top:expression(eval(document.compatMode&&document.compatMode=='CSS1Compat')?documentElement.scrollTop+(document.documentElement.clientHeight-this.offsetHeight)/2:document.body.scrollTop+(document.body.clientHeight-this.clientHeight)/2);

OMG！真可够长的，而这样的东西就是css的表达式，要避免或者尽量少用吧。

7.对javascript与css使用外链的方式调用，paperen觉得应该要加上尽量这个形容词吧，因为有些js不能避免的会写到页面上，如果针对一些独特的页面的话，但是总体来说还是建议使用外链的方式，如果是大的项目要将哪些是基本的js分离出来，因为这些基本的js是不会变动频繁的，固能更好地被缓存，而css的话如果实在不是太大，全部写到一个文件好了，如果网站有很多不同的频道而且风格也不是相同，那么就要对css进行一些调整了，把最基本的样式挑离出来单独一个文件，正如处理刚才说的处理js的方法差不多，不同频道就再载入相应的css文件，基本的css再第一次加载后就不会变了，这样还是可以接受的。

8.javascript与css最小化，这里直接放出两个工具吧。JSmin与csscompressor，css那个没什么可提的了，JSmin的使用在网页上已经说得很清楚，只是是英文的。顺便也提一下怎用吧~~为了英文不是很懂的朋友们。

最下面有个GetMinified，点击那个zipfilecontaininganMS-DOS.exefile就可以下载到一个压缩包了，解压后有个exe的（还有个源文件，有兴趣可以看看代码）将jsmin.exe与一个未最小化的js放到您自己觉得方便的目录下，然后打开cmd（就是那个黑屏的控制台），切换到jsmin.exe路径下然后使用以下的命令。

jsmin<fulljslint.js>jslint.js"(c)2002DouglasCrockford"

这是个原文的例子，fulljslint.js文件就是未最小化之前的js文件，jslint.js则是最小化后的文件，后面双引号的是加入一些注释什么的。（您当然可以配置系统的环境变量来实现不用次次都切换到具体目录就能使用这个命令，在Path中加上您存放jsmin.exe的那个路径就可以了）

9.移除重复的javascript与css，这个其实很明了啦，一个js函数不要同时写两遍，css属性不要有多余的。比如：

h1{font-size:14px;}

h2{font-size:14px;color:#C00;}

h3{font-size:14px;padding-top:10px;}

完全可以写成这样

h1,h2,h3{font-size:14px;}

h2{color:#C00;}

h3{fpadding-top:10px;}

10.配置ETags，运用书中的描述就是：“ETag——实体标签（EntityTag）是Web服务器与浏览器用于确认缓存组件的有效性的一种机制”。如果使用了ETags会在响应头加入一个ETag标记，而下次请求时浏览器会在请求头加入一个if-none-match标记，将ETag重新返回供服务器判断请求文件是否过期，但引用书中的描述是“ETag不会匹配，对于使用服务器集群来处理请求的网站来说，这是很常见的一种情况”，而且if-none-match比if-modified-since具有更高优先级，也就是说即使你配置了缓存策略而且确实文件没有处于需要更新的状态ETag值变了还是要重新下载文件，故paperen的建议是去掉ETag，而书中也提议到调整，但是如何调整就没说。

在.htaccess文件将缓存策略加上两行

<IfModulemod_expires.c>

ExpiresActiveon

<FilesMatch".(gif|jpg|jpeg|png|ico|js|css)$">

HeaderunsetETag

FileETagNone

ExpiresDefault"accessplus2weeks"

</FilesMatch>

</IfModule>

11.AJAX可缓存，ajax的优化其实都可以运用上述说的一些步骤的，压缩啦，精简js啦，ETag啦~而从ajax的运用上您可以考虑使用的是被动的方式还是主动的方式，比如有些ajax请求是可以在未发生之前就发动的，这些是为了将来而预先发起的，当用户点击某个按钮或者链接时就不需要太多等待就能获取到信息，预加载总是好的，但是得要分清楚哪些需要预加载而哪些不用，不能顾此失彼，做到平衡就很好了。