博客要长草了，PS：日和是部很好看的无码小短片。

在CSS3中新增了几个很好玩的东东：CSS Animation，CSS Transition 和 CSS Transform，顾名思义就是通过CSS来实现动画，过渡和变形。

它们的出现足以让我很兴奋了，我不必要在去写那些复杂的JS代码，运用它们我能更简单的创建自己的想要的动画。

应用前景

伴随着CSS3的普及，这些特性被各大浏览器支持也只是时间上的问题。有消息称在Internet Explorer 9 中将更好的支持HTML5和CSS3 从IE9预览版上看已经支持了。所以各位围观群众不必担心这只是昙花一现。以下是我就目前的浏览器支持状态统计的一个表格：

备注

• (1): IE可以通过滤镜来实现部分变形
• (2): 目前Windows下的webkit因不能调用GPU而不能支持部分3D Transform。
• (3): firefox3.7称将支持更多CSS3特性，不过最终是否支持Animation和3D Transform还不是很确定
• (4): oprea已经在表示在Presto2.3(opera内核)中将支持Transtion。可查看wiki

接下来要开始了，各位看官准备好chrome或safair，演示和代码使用webkit的私有属性，let’s 干吧。

CSS Transition

这个能实现很舒服的过度效果，先看CSS代码片段：

你可以在这里看到这个演示，务必请用基于webkit的chrome或safair（以下同）。看完演示是不是很有兴趣想去学如何去使用了？

transiton属性有这几个值：

• transition-property :* //指定过度的性质，比如transition-property：backgrond 就是只指定backgound参与这个过渡
• transition-duration:*//指定这个过渡的持续时间
• transition-delay:* //延迟过渡时间
• transition-timing-function:*//指定过度类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

小贴士

• linear   //线性过度
• ease-in   //由慢到快
• ease-out  //由快到慢
• ease-in-out //由慢到快在到慢

timing-funciton的几种过度类型都是基于cubic-bezier的某些特定数值。比如ease-in-out的类型它也可以写成cubic-bezier(0.42, 0, 0.58, 1.0)。你可以在这里看到 cubic-bezier曲线图

Transiton和下面的Animation都是支持CSS伪类

同样的，这些我们可以简写，拿上面的代码  -webkit-transition: all 1s ease-in-out; 包含了property , duration ,timing-fuction。

参考资料：
CSS Transitions Module Level 3 （这个是w3c的官方文档，英语好的可以详细看看）
http://webkit.org/blog/138/css-animation/ （这个webkit官方博客上的讲解，也有例子）

怎么样，赶紧打开编辑器自己写写吧

CSS Animation

顾名思义，这个就能实现元素的动画效果，那时我就被震惊了，无数次那尼感叹。可以先看下演示，代码如下


@-webkit-keyframes title {
0% { text-shadow:0px 0px 15px #000; }
50% {
text-shadow: 0px 0px 30px #3995bd;
color: #aac7d4;
margin-top:200px;
}
100% { text-shadow: 0px 0px 15px #000; }
}
h1 { -webkit-animation: title infinite ease-in-out 3s; }


animation有这几个属性：

• animation-name//属性名，就是我们定义的keyframes
• animation-duration //持续时间
• animation-timing-function //同上面的transition-timing-function
• animation-delay // 设置动画延迟
• animation-iteration-count //定义循环次数，infinite为无限
• animation-direction //定义动画方式

这些同样是可以简写的。但真正让我觉的很爽的是keyframes 这个似乎有点象js里面的function，它能定义一个动画的转变过程供调用，过程为0%到100%或from(0%)到to(100%)，简单点说，只要你有想法，你想让元素在这个过程中以什么样的方式改变都是很简单的。

你是不是已经开始蠢蠢欲动了？

参考资料：http://www.w3.org/TR/2009/WD-css3-animations-20090320/

Transform

transform就是实现元素的变形，为什么放到最后？如果跟上面的CSS Animation结合起来是不是更酷呢？先看看这样一个演示，相信你不敢相信这只用CSS写出来的效果吧。

transform有几种类型：

• scale(num,num) //尺寸，scale(2,3)即x轴方向放大两倍，y轴方向放大3被，同样的可单独写scaleX(2),scaleY(3)
• rotate(*deg) //旋转的角度
  

  在2d  transform中 旋转角度俺当前的平面顺时针或逆时针旋转 。在3d transform中新增了 rotateX 和rotateY它们分别以y轴或x轴为中心进行旋转，同样可以简写称rotate(*,*)。目前已被chrome和safair支持

• skew（*deg）//倾斜角度，同样的有skewX和skewY 可简写为skew（*,*）
• translate //移动
  

  在2d transform中 分为translateX 和translateY 简而言之就是元素网x轴或y轴的移动距离，而在3dtransform中新增了一个translateZ 及实现Z轴的移动，实现透视效果。目前在Windows系统上还没有浏览器支持，同样的这些可以简写。

了解完这些用法后在去看看那个演示的源码，相信你肯定会惊叹transform和animation配合的动画效果了吧

参考资料：

• http://www.w3.org/TR/2009/WD-css3-2d-transforms-20090320/ （w3c文档）
• 3D Transforms （webkit博客上的文章，所以在Windows下没法看到，不过那里有截图过过瘾，并有一个很酷在Windows下打了折扣的demo哦）
• http://www.zachstronaut.com/lab/isocube.html(这个就是用transfrom实现的立方体)

结语

看到这些，你是否跟我一样期待HTML5和CSS3的快点普及呢？在运用这些新特性能快速而简单的创建原本需要复杂js来实现的动画效果，这是多么让人兴奋的。

不过这些还是有那么些缺点的，CSS Animation的确很酷，但不得不提及它的资源占用问题，CSS transform的确很神奇，但不得不提及它的锯齿问题，当然了这些问题相信浏览器的开发者会逐渐改善的。

那什么是语义化呢？

首先抽象的说下语义（Semantic）的概念：“语义可以简单地看作是数据所对应的现实世界中的事物所代表的概念的含义，以及这些含义之间的关系，是数据在某个领域上的解释和逻辑表示。”娘的，太抽象了。其实在那个用4000W打造的超级防猥琐的绿坝就有个叫语义分析的功能，如果发现不健康信息，立马对其进行关闭，哼哼。

通过强大的拆字我们可以简单的理解它为：用特定的语言来定义特定的事物。在web前端中语义化标记也可以这样理解。

绿坝它全家靓照

你是不是特别特别喜欢div标签？

在刚开始学习web前端时想必你肯定听说div+css布局，说的那是如此好如此妙如此呱呱叫，于是乎你就div+css了，div套div，div何其多，去w3c验证发现还能通过，仰天长呼，so easy，so easy。

然而堂堂的(X)HTML就一个div标签？答案肯定不是，那其他的标签是不是没有用？答案更不是。任何事物存在亦有它的价值所在滴。在初学XHTML时，我曾经犯了一个很傻的错误，在定义几个行列表项时我是这样写的：

<div id="list">

虫下米<br />

wlsy<br />

虫下米wlsy合体<br />

</div>

你别笑，我当时真的是这样写的，只不过其中的文字记不清了，写完后发现在浏览器中是我想要的结果也就认为代码是正确的。代码是正确的吗？代码当然是正确的但是不规范。在XHTML中有个专门定义列表的标签ul（无序列表），ol（有序列表），dl（定义列表）。所以更加规范，更加有语义的我们可以这样写：

<ul id="list">

<li>虫下米</li>

<li>wlsy</li>

<li>虫下米wlsy合体</li>

</ul>

在学习XHTML时，应尽量能够熟悉有定义到的标签，并在特定的内容加以应用，比如我们可以用strong(用strong来替代b)标签来强调内容，用Hx(h1,h2…..)来定义标题等等。我可以吐血奉献我搜刮到一些资源：XHTML Cheat Sheet（这是常用的XHTML标签表格，可以下下来看，不过是英文的），HTML 4.01 / XHTML 1.0 参考手册（这里面有标签的详细用而且还配有实例），在早些时候我有写过一篇：几个不太常见的(X)HTML标签。

另外关于语义化标签蓝色理想上有篇帖子很不错：http://bbs.blueidea.com/thread-2658231-1-1.html

所以呢相对于叫div+CSS布局，我更喜欢叫做(X)HTML+CSS布局。

结构命名中的语义化

这里说的结构就是就是我们平常编写的XHTML代码，而命名就是我们为id或class所取的名称。

有个例子是这样的，你是不是有时会类似这样来写代码（代码比较粗糙演示用）：

<div id="left">

<p>今天是个好天气呀</>

</div>

<div id="right">

<p>我的一些照片</p>

</div>

CSS代码：

#left{float:left;display:inline;width:50%;}

#right{float:right;display:inline;width:49%;}

#left{float:right;display:inline;width:50%;}

#right{float:left;display:inline;width:49%;}

结果呈现的效果确实是你想要的，但是为其id命名是不是违背的你的原意？你原本命名id=“left”的div内容的意思就是要在左边显示，而现在却显示在右边了。虽然结果是你想要的，但是命名好像很别扭的跟你做对。所以如果要对其进行语义化的命名我们可以这样来：

<div id="content">

<p>今天是个好天气</p>

</div>

<div id="sidebar">

<p>我的一些照片</p>

</div>

这样命名为content就是内容，命名为sidebar就是边栏，管它上窜下跳，左躲右藏，命名内容块始终为包含内容，命名边栏块也始终包含边栏。这个例子就是语义化命名的实例，很好理解吧。

看看我是怎么给自己的网站结构命名的： 

结构命名为常用的英文单词，多词之前用-来分割。因为是个人博客所以命名也就没什么其他特殊要求了。如果想看看其他的网站的命名推荐各位用firebug，这是在Firefox的一个插件，能很方面的查看，修改和调试代码。

这里有一些有用的文章能够让你更加理解结构命名中的语义化：

CSS类命名的语义化VS结构化方式（这篇文章有很好的配图帮助你理解语义化命名）

语义化有什么优势吗？

当你写完代码后在浏览器调试，如果呈现的结果是你想要的，你是不是就不会再去检查你的代码了呢？访客能看到浏览器解析后的实际页面，但是你想过流量的另一个重要来源：搜索引擎吗？

语义化更有利于SEO

有个很常见的例子是这样的：在初学SEO的时候你是不是经常用h1来突出你的标题，用strong来突出你的关键字，或许你不太在意，但这确实是语义化的体现。就目前的搜索引擎来说并不能想访客那样很直观的去查看网页，它只有分析的你源码来体现或猜测网站要表达的内容。比如你想表达某篇文章的标题，你或许会这样写：

<div id="title">文章的标题</div>

访客或许能理解你的意思，但搜索引擎就要反复揣摩了，更好的讨好搜索引擎我们可以这样来写：

<h1>这是标题</h1>

小提示：h1拥有最高的权值，在一个页面中最好指使用1个h1来突出你的内容，太多的h1会分散其整个页面的权重，对搜索引擎也是非常的不友好。

当然语义化还有其他优势：

正如上面那个例子，语义化的代码更小，下载也就更快了。另外语义化代码也能够更加快速的帮助新的前端工程师理解你的代码。语义化代码也更能帮助视障的人通过设备来理解你的内容等等。当当然语义化代码也是你能力的体现。

一些资料：semantic code: what? why? how?，

4 Ways CSS Can Improve Your SEO

语义化的更高体现-微格式

什么是微格式呢？维基百科这样给它定义的：

微格式（Microformat），是通过语意相关让内容人机可读。网页上的允许的微格式数据包括事件、人物、地点等，它可以被其他的软件检测到，并提取出相应的信息，以及对信息进行索引、搜索、跨平台的参考，把这些信息以其他形式重复使用或组合。

从技术上来说，这些数据是一些语义标记，用标准的(X)HTML中的class名称设置。他是开放、可用、自由的，可以被任何人使用。

维基百科上还有一个实例我就不贴了，你可以到这里看到。

在往后，当搜索引擎越来越重视微格式，在你的网站上应用微格式肯定会为你加分不少。在应用和推广微格式上面，我觉得wordpress做的非常的好，在之前应用了诸如：rel=”tag”，rel=”nofollow”,rel=”license”后，在升级到wordpress2.8后我发现它在header处新增了这几个：

根据字面意就是帮助搜索引擎理解本页的主页，开始页，上一篇和下一篇。不过目前有些微格式还处于草案当中，并不能确保它在最后时还在。要想关注微格式你可以看看它的官方网站

微格式还有个很经典的例子就是名片的应用，它也就是通过一些很有语义的标记来描述个人信息，如果你想折腾微格式还是有得折腾的，为了避免篇幅过长下面给出写有用的了链接方便有兴趣的继续折腾。

微格式全功略Hcard、hCalendar、hReview、XFN 轻松掌握（这几个微格式也就是主要来体现个人信息，这篇来自ued163）。这里也还有一系列的翻译译文http://www.mijia.org/blog/?p=152能够帮助你很好的理解微格式。

end～

其实在CSS3中有个background-size属性，不过现在基本上没啥浏览器能支持，不过了解下也不错，在W3C中有对它有定义到，可以在这里看详细用法。

当然熟悉AS的朋友也可以用整站flash很容易的实现，本文讨论的是基于css来实现。

其实这也不算是什么技术问题，主要是思路问题。既然不能在CSS里面定义，那么只要在XHTML通过img来插入图片实现“伪背景”。

什么没啥兴趣？来来来看演示（请先用非IE6浏览）这里有演示

怎么样拉拉浏览器是不是很神奇？代码很简单：

   1: <style type="text/css">

   2: * {

   3:     margin:0;

   4:     padding:0;

   5: }

   6: body {

   7:     font:14px/1.6 "Microsoft YaHei";

   8:     background:url(loading.gif) #333 repeat;

   9:     color:#fff;

  10: }

  11: #bj {

  12:     width:100%;

  13:     height:100%;

  14:     position:fixed;

  15:     top:0;

  16:     left:0;

  17:     z-index:1;

  18: }

  19: #main {

  20:     width:100%;

  21:     position:absolute;

  22:     z-index:2;

  23: }

  24: #content {

  25:     width:500px;

  26:     margin:30px auto;

  27:     padding:10px;

  28:     background:#000;

  29:     height:1000px;

  30:     border:1px solid #333;

  31:     -moz-opacity:0.8;

  32:     opacity:0.8;

  33:     filter: Alpha(opacity=80);

  34: }

  35: </style>

  36: <body>

  37: <div id="main">

  38:   <div id="content">

  39:     <h1>CSS背景缩放</h1>

  40:     <p>改变浏览器的窗口看看吧。</p>

  41:   </div>

  42: </div>

  43: <img id="bj" src="bj.jpg" alt="background"/>

  44: </body>

这里真正的背景是id=“bj“这个，而body里面定义的loading.gif是为了在加载背景给访客提示的，因为css里面的会先被读取。

那为什么不能用IE6来浏览呢？因为万恶的IE6不支持position:fixed;解决的方法除了用那个IE7.js，当然你也可以自己些js来让他支持，除此之外还有什么办法呢？答案是有的，比较复杂，需要用到table，你可以在这里看到这个演示，代码如下：

   1: <style type="text/css">

   2: * {

   3:     margin:0;

   4:     padding:0;

   5: }

   6: html, body, #bg, #bg table, #bg td, #main {

   7:     width:100%;

   8:     height:100%;

   9:     overflow:hidden

  10: }

  11: body {

  12:     font:14px/1.6 "Microsoft YaHei";

  13:     background:url(loading.gif) #333 repeat;

  14:     color:#fff;

  15: }

  16: #bg div {

  17:     position:absolute;

  18:     width:200%;

  19:     height:200%;

  20:     top:-50%;

  21:     left:-50%

  22: }

  23: #bg td {

  24:     vertical-align:middle;

  25:     text-align:center

  26: }

  27: #bg img {

  28:     min-height:50%;

  29:     min-width:50%;

  30:     margin:0 auto

  31: }

  32: #main {

  33:     position:absolute;

  34:     top:0;

  35:     left:0;

  36:     z-index:70;

  37:     overflow:auto;

  38: }

  39: #content {

  40:     width:500px;

  41:     margin:30px auto;

  42:     padding:10px;

  43:     background:#000;

  44:     height:1000px;

  45:     border:1px solid #333;

  46:     -moz-opacity:0.8;

  47:     opacity:0.8;

  48:     filter: Alpha(opacity=80);

  49: }

  50: </style>

  51: <body>

  52: <div id="main">

  53:   <div id="content">

  54:     <h1>CSS背景缩放</h1>

  55:     <p>改变浏览器的窗口看看吧。</p>

  56:   </div>

  57: </div>

  58: <div id="bg">

  59:   <div>

  60:     <table cellpadding="0" cellspacing="0">

  61:       <tr>

  62:         <td><img alt="background" src="bj.jpg" /></td>

  63:       </tr>

  64:     </table>

  65:   </div>

  66: </div>

  67: </body>

上面的这个代码参考GOTOCHINA的源码这个代码有个弊端，就是必须很严格的控制背景图片的比例否则在现在各大主流的分辨率下会有留空，经过的调试后推荐比例最好为宽：高=1：0.5。虽然这样可以解决留空问题，但是有时候图片会显示不全。所有各位要用什么方法就自己看了。还是推荐用第一种方法配合ie7.js来解决问题，当然你也可以完成不用管IE6～

比如导航栏的XHTML代码是这样的：

<ul id="nav">

   <li><a href="#">home</a></li>

   <li><a href="#">about</a></li>

   <li><a href="#">contact</a></li>

</ul>

那么如何才能凸显当前页面的呢？给当前页面的链接加个class，然后通过CSS来控制其显示样式，这样行为和表现分开了，以后更改也方便。

送上javascript代码：

function currentPage(){

    if (!document.getElementById("nav")) return false;/*进行必要的测试，避免没有id为nav时候出错*/

    var nav=document.getElementById("nav");

    var links=nav.getElementsByTagName("a");

    var currenturl=window.location.href;/*获取当前页面的地址*/

    for(i=1;i<links.length;i++){

        var url=links[i].getAttribute("href");/*获取链接的href值*/

        if(currenturl.indexOf(url)!=-1){/*如果链接的href值在当前页面地址中有匹配*/

           links[i].className="current";

        }

    }

}

window.onload=currentPage;/*载入页面时加载*/

好了，接下来你就可在css里面定义current的样式了，以后要修改也只要在css里面修改

友情提示：如果各位想要在wordpress里面凸显当前页，wordpress有个自带的函数如下：

<ul>

<li <?php if (is_home()){echo 'class="current_page_item"';}?>>

<a href="<?php bloginfo('url'); ?>/">首页</a></li>

<?php wp_list_pages('&title_li='); ?>

</ul>

你可以在css定义.current_page_item的样式就可以了

首先要补充解释下一个叫“性能黄金法则”的东东：

只有10%～20%的最终用户响应时间花在了下载HTML文档上。其余的80%～90%时间花在了下载页面中的所有组件上。

这里说的组件就是网站中的图片，CSS和脚本等等。所有着重优化的地方就在这些组件上面了。

第8点：把JavaScript和CSS放到外部

把JavaScript和CSS放到外部的优势我就不用讲了，不过我确看到在诸如像腾讯，淘宝，网易等这样的访问量巨大的网站中的首页使用了内联，并非把脚本和样式外置，而令我疑惑不解的是这种现象只在首页上出现，在查找和翻页相关资料后我找到了答案。

在这些网站中，首页的布局和内页有着很大的区别，也就是首页上的组件重用率很低，而且也有很大一部分的访客只访问了首页。首页的访问量是巨大的，很多企业都希望能有更快的访问速度，使用内联的会比外置来的快些，毕竟减少了HTTP请求次数，当然这也要考虑到缓存的影响，拥有缓存的访客和空缓存的访客（也包括喜欢关闭浏览器清楚缓存的人）这个也比较难以量化。

到底是用外置还是内联这个也没有明确的答案，还有挺多门户网站使用了外置，所有这个主要还是要看企业的决策，但是对于访问量不是很大很大的网站我还建议使用外置。

第7点：避免使用CSS表达式（Expression）

现在大部分的人都会说使用使用CSS表达式会影响性能问题，不过有个和简单的方法解决了这个性能问题，在这里查看（需要*代*理，可恶的文×字@狱），简单的引用：

因为我发现，第一个缺点是可以解决的。方法就是，在 expression 语句体里面，将触发该 expression 的 css 属性重置。比如 body{ zoom: expression(function(ele){ele.style.zoom = "1"; alert("xx");}(this));}，执行这段 CSS 会发现，alert 只跑了一次。

没有了性能问题，那么就能解决了很多IE6的bug，但是我还是建议不要用，首页微软已经在IE8取消了对CSS表示的支持，这也表明了微软也打算放弃这个了，另外如果要修复IE6的一些BUG或增加功能等，推荐使用IE7.js。在早些文章你能找到。

第10点：压缩和削减JavaScript和CSS

目前压缩JavaScript主要有混淆和精简。混淆能比精简多压缩些，不过这样得不偿失，特别是在通过了Gzip压缩后效果都是差不多。

在早些时候我也有过这样的疑问，如果启用了gzip压缩，是否要对脚本进行精简。这里简单的说下，如果你启用了gzip压缩后在对脚本进行精简的话还是能减小大小。

最后跟新下：推荐使用YAHOO的Yslow

好吧，折磨开始。栅格设计有嘛好的？维基百科中给栅格设计的定义特征和原则为：

栅格设计的特点是重视比例、秩序、连续感和现代感。 以及对存在于版面上的元素进行规划、组合、保持平衡或者打破平衡，以便让信息可以更快速、更便捷、更系统和更有效率的读取；另外最重要的一点是，负空间的规划（即：留白）也是栅格系统设计当中非常重要的部分。

我个人认为栅格设计主要有这几个特征：

既然是以“格子”来设计，那么就要有一定的规范和比例性，也就是能够快速的对页面进行重组而不失比例。比如你有好几个方块，你向别人介绍的时候说的是这个宽有5个方块的宽而不会在精确的说我的宽是540px，这在团队合作的时候优势的很明显的，界面设计师不必要想前端工程师说具体的数值，他们在这个栅格系统下就好比如有共同语言，而且在保持页面的规范也很有帮助，当然栅格设计的优势不仅仅这些。

不过我不认为栅格设计都适用与所有网站，对于诸如没有重复设计的个人网站博客或者其他网站来说根本没必要把简单的问题复杂化，可以很直观的设计比如主体宽多少，边栏宽多少，但是对于大型门户网站来说应用栅格设计效率的提升是明显的。

好吧，说的我都想睡觉了，看例子。

在第一张图中我们看到这个网站的界面设计并没有什么特别的，普通的三栏设计。在第二张图中很清晰的看到的，网站三栏设计都是很规则的按照比例来，也就是它具有很明显的栅格设计特征。横向有12栏，每个栏宽度60px，栏之间的间距（可以叫槽Gutter）为20px，实际上是每个栏的左右空白边为10px。

这样算下来Full Width=12×（60+10+10）=960px，而实际的Content Width:为940px，因为扣掉左右两边各10的空白边。为了能够更直白的理解可以看这张图：

如果曾经有稍微研究过的童鞋应该会发现这个貌似应用了960GS。是的确实是这样的。960GS是我比较喜欢的一个栅格系统设计框架，主要是代码清晰易懂，而且在第一行和最后一行不需要进行特别的处理。960GS官方给出的演示有12栏和16栏，栏数越多也就是代表着在同样的宽度下栏宽越小，灵活性也就越大，能够组合数也就越多。

好的现在来看看960GS这个栅格系统框架的主要代码：

   1: <div class="container_12">

   2:     <div class="grid_8">

   3:             ...

   4:     </div>

   5:     <div class="grid_4">

   6:             ...

   7:     </div>

   8: </div>

container_12代表为主体为12个栏，grid_n这个代表有几个栏宽的宽度。从上面的代码可以看出这个是个两栏的布局，左边有8个栏（注意这些栏的宽度是包含空白边的），右边有4个栏。根据上面知道在12栏中每个栏的实际宽度为：80px=60px+10px+10px，这样我们就很容易的算出演示代码中左边的宽度为640px，右边的宽度为320px。

我想有人会问了不就是两个栏的布局吗，何必弄的这么复杂呢？在上面我就说了，对于小型网站确实没必要这样，但是对于大型网站的前端工作者来说可以大大提升他们的效率，在团队合作中亦是这样。在代码中我们看到在传递宽度的大小的时候已经从精确多少px转变成了是几个栏的问题，而且在以后想改变某个布局的宽度的时候也很简单，比如左边可以变为grid_9,右边为grid_3。如果说当时css的出现并取代table布局大大的方便的前端工作者，那么栅格的出现也就是更进一步的方便了前端工作者。

当然960GS不止这么简单，想进一步了解的话可以访问官方网站http://960.gs/

好了，我们现在返回去理解栅格系统设计。

1：在上面那个例子中的第二张图我们可以通俗的讲网站的设计是基于某个宽度的“格子”来设计。

2：在基于这种“格子”来设计，它看起来很规范和易读的。

3：在基于这种“格子”来设计，它看起来是相当的灵活，在想改变布局的时候也是很简单的。

从CSS框架上理解栅格是个好方法，另外目前大部分的栅格系统布局都是定宽的，如果需要流体布局可以参考960GS的衍生版本Fluid 960 Grid System。类似960GS这样的框架还有：blueprintcss，YUI Grids CSS，等等，而在进行画图是如果需要配合栅格来画图可以在这里下载到psd分层模板。

当然这篇文章只是初步的介绍栅格系统设计，如果有兴趣可以继续阅读我整理的资料：

栅格：1）从混乱到秩序2）一以贯之3）灵活应变（这个系列文章能帮你初步了解栅格，并劝告你在设计栅格系统时应该让栅格去适应元素的混合，而不是要强制元素去适应栅格）

网页的栅格系统设计 （这一篇更加深入的讲解栅格系统设计）

网页栅格系统研究：960的秘密， 蛋糕的切法 ，粒度问题，技术实现 （这是淘宝玉伯对栅格的研究）

如果英文比较好的可以看这些：

Five simple steps to designing grid systems：Subdividing ratios，Ratios and complex grid systems，Grid systems for web design: Part 1，Part 2 Fixed，Part 3 Fluid。

或者其实你完全可以自己在Google输入栅格或grid system，看看国内外的人们对栅格的理解。

你可以在这里看到源码，解决方法：定义white-space属性。

语法：
white-space : normal | pre | nowrap
参数：
normal : 默认处理方式
pre : 用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。参阅pre对象
nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。参阅td，div等对象的nowrap属性（特性）

案例中的解决方法是采用white-space:nowrap的方法，即只要在列表项相应的CSS加入white-space:nowrap即可。

什么是图像替换？简单的说我们可以把文本照常添加到文档中，然后通过CSS来用特定的图片来替换文本，这样做的好处是搜索引擎仍然可以搜索到文本，而禁用到CSS文本也可以看到，现在应用最广泛的莫过于网站的Logo了。

1：先来说说我之前最常用的方法：XHTML代码：

<h1>虫下米</h1>

CSS代码：

   1: h1{text-indent:-5000px;background:(a.jpg) no-repeat; width:50px; height:50px}

这种方法被称做Phark，这种方法有个情况是，加入浏览者关闭了图像功能而且有启用CSS那么他就不会看到任何东西，当然这种情况很少，不过要考虑的还是要尽量考虑，而且我自己感觉流量器在渲染的时候可能会有稍稍的性能问题，没验证过，无从考证，囧兴:::

2：现在我在用的方法是有人提到过的，灵感来源于Google.cn。比如你打开这个：搜索虫下米 ，来了重点在左上角的logo，它用的方法我用图简单概述下： 这个还要上代码吗？图都画出来了，本人实在懒，要看代码自己去Google上看。囧。

3：还有中不太好的，大家就当了解下。代码：

   1: <h1><span>虫下米</span></h1>

CSS:

   1: h1{background:url(*.jpg) no-repeat;width:*;height:*;}

   2: span{display:none}

其实这种方法思想也不错，就是考虑的稍微欠缺点。比如很多阅读器会忽略display：none/hidden；所以会照常比较大的访问性问题。

总结：其实图像替换的方法还有很多，各有优缺点，比如IFR方法，各位就自己看着办，我想挺常用第二种就是稍稍复杂点，不过第一种其实也不错，而且也比较方便。

而本文只是用一种比较通俗的语言来阐述那几种方式，以及如何来优化自己的博客或网站。

1：减少自己网站的http请求次数

在现在的网站已经不是简单的文字，这其中还包括更多更为丰富的元素。这样理所当然的增加了服务端与客户端之间的请求数，现在要做的就是尽可能的减少这些响应时间，这是网站优化的第一步，在原文提到：Tenni Theurer在他的博客中所说，HTTP请求在无缓存情况下占去了40%到60%的响应时间，如何优化呢？

合并文件（Combined files）。比如在你的网站很多不同的css文件或script文件，我们尽可能把它们合并到一个文件，合并css一般不会出现什么错误，合并script就要注意了。

图片拼合技术（CSS Sprites）。这个在我早些文章有提到，在这里你可以了解到详情。

图片地图（Image maps）。比如我们要做一个比较华丽的导航栏，这其中也包括每个栏目的字体，然后通过map和area元素来确定坐标来进行事件处理，这样就不想切图后很有小图片那样。确定图片的坐标可能会比较繁琐且容易出错，不具有可读性，所以尽量还是不要实用这个。

尽量少使用内联图像（Inline images）。即一般我们在(X)THML会使用img的src来插入图片。这样做不太好，尽量把它放在样式表（stylesheets）里面写。

2：使用CDN（Content Delivery Network）内容分布网络

这个可能退普通的个人用户来说有些可望不可即了。因为现在的每个地域的网络状态都不一样，比如网站的服务器在成都，那么每个地区的访问的速度都会不同，而CDN的作用在于由一系列分散到各个不同地理位置上的Web服务器组成的，它提高了网站内容的传输速度。用于向用户传输内容的服务器主要是根据和用户在网络上的靠近程度来指定的。目前国内这种服务都比较贵，而且听说对动态网站效果不是太好，我没用过无从考证。不过向是新浪，搜狐，腾讯这些大型门户网站都用到这种服务。

3：在http头部加一个Expires或Cache-Control

浏览器（和代理）使用缓存来减少HTTP请求的大小和次数以加快页面访问速度。Web服务器在HTTP响应中使用Expires文件头来告诉客户端内容需要缓存多长时间。下面这个例子是一个较长时间的Expires文件头，它告诉浏览器这个响应直到2010年4月15日才过期。
Expires: Thu, 15 Apr 2010 20:00:00 GMT
如果你使用的是Apache服务器，可以使用ExpiresDefault来设定相对当前日期的过期时间。下面这个例子是使用ExpiresDefault来设定请求时间后10年过期的文件头：
ExpiresDefault “access plus 10 years”
要切记，如果使用了Expires文件头，当页面内容改变时就必须改变内容的文件名。依Yahoo!来说我们经常使用这样的步骤：在内容的文件名中加上版本号，如yahoo_2.0.6.js。

这个是需要在服务器端进行设置。

4：使用Gzip压缩文件内容。

这个也是需要服务器端支持的。说一下Gzip:

Gzip是目前最流行也是最有效的压缩方式。这是由GNU项目开发并通过RFC 1952来标准化的。另外仅有的一个压缩格式是deflate，但是它的使用范围有限效果也稍稍逊色。
Gzip大概可以减少70%的响应规模。目前大约有90%通过浏览器传输的互联网交换支持gzip格式。如果你使用的是Apache，gzip模块配置和你的版本有关：Apache 1.3使用mod_zip，而Apache 2.x使用moflate。

这里有个网站可以检查你的网站是不否启用了Gzip，而且也可以看到压缩率等信息，如果没有你可以自自己通过搜索，开启相应环境下的Gzip。

5：把样式表放到头部

在研究Yahoo!的性能表现时，我们发现把样式表放到文档的<head />内部似乎会加快页面的下载速度。这是因为把样式表放到<head />内会使页面有步骤的加载显示。简单的说你css文件放到<head/>之前。

6：尽量把Scripts放到底部

这点我个人感觉很实用而且很有效，特效在现在的注重于用户交互的网站，其中的javascript好几个加起了也至少有好几十K。浏览器的解析顺序是由上到下，而网站的主要的就是内容，把Scripts放到底部能够保证访客最先看到的是内容。这里有个我优化的例子：用css的position属性控制div顺序。不过有时候把所有的Scripts放到底部可能会导致部分功能失效，这点要特别注意，及时进行调试。

7：避免使用CSS表达式（Expression）

CSS表达式是动态设置CSS属性的强大（但危险）方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中，使用CSS表达式可以实现隔一个小时切换一次背景颜色：
background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00″ );
如上所示，expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。expression 方法在其它浏览器中不起作用，因此在跨浏览器的设计中单独针对Internet Explorer设置时会比较有用。
表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

8：把JavaScript和CSS放到外部

这点也好容易理解。在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。在浏览不同页面，但是都用同一CSS或JavaScript是就不必反复下载。

内置在HTML文档中的JavaScript和CSS则会在每次请求中随HTML文档重新下载。这虽然减少了HTTP请求的次数，却增加了HTML文档的大小。从另一方面来说，如果外部文件中的JavaScript和CSS被浏览器缓存，在没有增加HTTP请求次数的同时可以减少HTML文档的大小。

9：减少DNS的查找次数

这个怎么理解呢？什么是DNS呢？DNS（Domain Name System）中文可以叫域名系统，它提供的是从主机名到IP地址转换的一段计算机程序，在很早以后人们是通过特定的IP来访问某个网站，但是这样很难记，而DNS就是用一些比较好记的词组作为域名，当访客输入域名DNS就把它转化为相应的ip地址。一般情况下返回给定域名对应的IP地址会花费20到120毫秒的时间。而且在这个过程中浏览器什么都不会做直到DNS查找完毕。引用原文的翻译：

缓存DNS查找可以改善页面性能。这种缓存需要一个特定的缓存服务器，这种服务器一般属于用户的ISP提供商或者本地局域网控制，但是它同样会在用户使用的计算机上产生缓存。DNS信息会保留在操作系统的DNS缓存中（微软Windows系统中DNS Client Service）。大多数浏览器有独立于操作系统以外的自己的缓存。由于浏览器有自己的缓存记录，因此在一次请求中它不会受到操作系统的影响。
Internet Explorer默认情况下对DNS查找记录的缓存时间为30分钟，它在注册表中的键值为DnsCacheTimeout。Firefox对DNS的查找记录缓存时间为1分钟，它在配置文件中的选项为network.dnsCacheExpiration（Fasterfox把这个选项改为了1小时）。
当客户端中的DNS缓存都为空时（浏览器和操作系统都为空），DNS查找的次数和页面中主机名的数量相同。这其中包括页面中URL、图片、脚本文件、样式表、Flash对象等包含的主机名。减少主机名的数量可以减少DNS查找次数。
减少主机名的数量还可以减少页面中并行下载的数量。减少DNS查找次数可以节省响应时间，但是减少并行下载却会增加响应时间。我的指导原则是把这些页面中的内容分割成至少两部分但不超过四部分。这种结果就是在减少DNS查找次数和保持较高程度并行下载两者之间的权衡了。

10：压缩和削减JavaScript和CSS

精简是指从去除代码不必要的字符减少文件大小从而节省下载时间。消减代码时，所有的注释、不需要的空白字符（空格、换行、tab缩进）等都要去掉。在 JavaScript中，由于需要下载的文件体积变小了从而节省了响应时间。精简JavaScript中目前用到的最广泛的两个工具是JSMin和YUI Compressor。YUI Compressor还可用于精简CSS。
混淆是另外一种可用于源代码优化的方法。这种方法要比精简复杂一些并且在混淆的过程更易产生问题。在对美国前10大网站的调查中发现，精简也可以缩小原来代码体积的21%，而混淆可以达到25%。尽管混淆法可以更好地缩减代码，但是对于JavaScript来说精简的风险更小。
除消减外部的脚本和样式表文件外，<script>和<style>代码块也可以并且应该进行消减。即使你用Gzip压缩过脚本和样式表，精简这些文件仍然可以节省5%以上的空间。由于JavaScript和CSS的功能和体积的增加，消减代码将会获得益处。

11:避免使用跳转

使用跳转会降低用户体验，而且在用户和HTML中增加一个跳转，会拖延页面中的所有元素的现实。

有一种经常被网页开发者忽略却往往十分浪费响应时间的跳转现象。这种现象发生在当URL本该有斜杠（/）却被忽略掉时。例如，当我们要访问http://astrology.yahoo.com/astrology 时，实际上返回的是一个包含301代码的跳转，它指向的是http://astrology.yahoo.com/astrology/  （注意末尾的斜杠）。在Apache服务器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash来避免。

12：去掉重复的Scripts

重复引用脚本的情况在Internet Explorer中会产生不必要的HTTP请求，而在Firefox却不会。在Internet Explorer中，如果一个脚本被引用两次而且它又不可缓存，它就会在页面加载过程中产生两次HTTP请求。即时脚本可以缓存，当用户重载页面时也会产生额外的HTTP请求。

一个避免偶尔发生的两次引用同一脚本的方法是在模板中使用脚本管理模块引用脚本。在HTML页面中使用<script />标签引用脚本的最常见方法就是：
<script type=”text/javascript” src=”menu_1.0.17.js”></script>
在PHP中可以通过创建名为insertScript的方法来替代：
<?php insertScript(“menu.js”) ?>
为了防止多次重复引用脚本，这个方法中还应该使用其它机制来处理脚本，如检查所属目录和为脚本文件名中增加版本号以用于Expire文件头等。

特别提醒下喜欢玩各种插件的wordpress朋友。很多时候我都发现同样是一个Jquery框架在一个页面就被多次加载。注意检查页面代码。

13：配置ETag

这个同样是需要在服务器端进行操作

Entity tags（ETags）（实体标签）是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制（“实体”就是所说的“内容”，包括图片、脚本、样式表等）。

ETag的问题在于，它是根据可以辨别网站所在的服务器的具有唯一性的属性来生成的。当浏览器从一台服务器上获得页面内容后到另外一台服务器上进行验证时 ETag就会不匹配，这种情况对于使用服务器组和处理请求的网站来说是非常常见的。默认情况下，Apache和IIS都会把数据嵌入ETag中，这会显著减少多服务器间的文件验证冲突。
Apache 1.3和2.x中的ETag格式为inode-size-timestamp。即使某个文件在不同的服务器上会处于相同的目录下，文件大小、权限、时间戳等都完全相同，但是在不同服务器上他们的内码也是不同的。
IIS 5.0和IIS 6.0处理ETag的机制相似。IIS中的ETag格式为Filetimestamp:ChangeNumber。用ChangeNumber来跟踪 IIS配置的改变。网站所用的不同IIS服务器间ChangeNumber也不相同。不同的服务器上的Apache和IIS即使对于完全相同的内容产生的ETag在也不相同，用户并不会接收到一个小而快的304响应；相反他们会接收一个正常的200响应并下载全部内容。如果你的网站只放在一台服务器上，就不会存在这个问题。但是如果你的网站是架设在多个服务器上，并且使用Apache和 IIS产生默认的ETag配置，你的用户获得页面就会相对慢一点，服务器会传输更多的内容，占用更多的带宽，代理也不会有效地缓存你的网站内容。即使你的内容拥有Expires文件头，无论用户什么时候点击“刷新”或者“重载”按钮都会发送相应的GET请求。
如果你没有使用ETag提供的灵活的验证模式，那么干脆把所有的ETag都去掉会更好。Last-Modified文件头验证是基于内容的时间戳的。去掉ETag文件头会减少响应和下次请求中文件的大小。微软的这篇支持文稿讲述了如何去掉ETag。在Apache中，只需要在配置文件中简单添加下面一行代码就可以了：
FileETag none

14：让AJAX能够缓存

Ajax经常被提及的一个好处就是由于其从后台服务器传输信息的异步性而为用户带来的反馈的即时性。但是，使用Ajax并不能保证用户不会在等待异步的 JavaScript和XML响应上花费时间。在很多应用中，用户是否需要等待响应取决于Ajax如何来使用。例如，在一个基于Web的Email客户端中，用户必须等待Ajax返回符合他们条件的邮件查询结果。记住一点，“异步”并不异味着“即时”，这很重要。

为了提高性能，优化Ajax响应是很重要的。提高Ajxa性能的措施中最重要的方法就是使响应具有可缓存性，具体的讨论可以查看Add an Expires or a Cache-Control Header。其它的几条规则也同样适用于Ajax：
Gizp压缩文件， 减少DNS查找次数，  精简JavaScript， 避免跳转，  配置ETags

让我们来看一个例子：一个Web2.0的Email客户端会使用Ajax来自动完成对用户地址薄的下载。如果用户在上次使用过Email web应用程序后没有对地址薄作任何的修改，而且Ajax响应通过Expire或者Cacke-Control头来实现缓存，那么就可以直接从上一次的缓存中读取地址薄了。必须告知浏览器是使用缓存中的地址薄还是发送一个新的请求。这可以通过为读取地址薄的Ajax URL增加一个含有上次编辑时间的时间戳来实现，例如，&t=11900241612等。如果地址薄在上次下载后没有被编辑过，时间戳就不变，则从浏览器的缓存中加载从而减少了一次HTTP请求过程。如果用户修改过地址薄，时间戳就会用来确定新的URL和缓存响应并不匹配，浏览器就会重要请求更新地址薄。
即使你的Ajxa响应是动态生成的，哪怕它只适用于一个用户，那么它也应该被缓存起来。这样做可以使你的Web2.0应用程序更加快捷。

15、尽早刷新输出缓冲

当用户请求一个页面时，无论如何都会花费200到500毫秒用于后台组织HTML文件。在这期间，浏览器会一直空闲等待数据返回。在PHP中，你可以使用 flush()方法，它允许你把已经编译的好的部分HTML响应文件先发送给浏览器，这时浏览器就会可以下载文件中的内容（脚本等）而后台同时处理剩余的 HTML页面。这样做的效果会在后台烦恼或者前台较空闲时更加明显。
输出缓冲应用最好的一个地方就是紧跟在<head />之后，因为HTML的头部分容易生成而且头部往往包含CSS和JavaScript文件，这样浏览器就可以在后台编译剩余HTML的同时并行下载它们。 例子：
… <!– css, js –>
</head>
<?php flush(); ?>
<body>
… <!– content –>
为了证明使用这项技术的好处，Yahoo!搜索率先研究并完成了用户测试。

16、使用GET来完成AJAX请求

Yahoo!Mail团队发现，当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。因此使用GET最为恰当，因为它只需发送一个TCP包（除非你有很多cookie）。IE中URL的最大长度为2K，因此如果你要发送一个超过2K的数据时就不能使用GET了。
一个有趣的不同就是POST并不像GET那样实际发送数据。根据HTTP规范，GET意味着“获取”数据，因此当你仅仅获取数据时使用GET更加有意义（从语意上讲也是如此），相反，发送并在服务端保存数据时使用POST。

17. 延迟载入组件 (Post-load Components)和18. 预载入组件 (Preload Components)

简单的说就有些你不必要的东西可以稍后在加载它们，而欲载入说的说的是

预先利用在浏览器空档时，载入一些使用者接下来可能会用到的文件等

19：减少DOM元素数量(Reduce the Number of DOM Elements)

一个复杂的页面意味着需要下载更多数据，同时也意味着JavaScript遍历DOM的效率越慢。比如当你增加一个事件句柄时在500和5000个DOM元素中循环效果肯定是不一样的。
大量的DOM元素的存在意味着页面中有可以不用移除内容只需要替换元素标签就可以精简的部分。你在页面布局中使用表格了吗？你有没有仅仅为了布局而引入更多的<div>元素呢？也许会存在一个适合或者在语意是更贴切的标签可以供你使用。

20：将元件放到不同的域名目录

原因是这样的，在同一个域名在同一时间只能接受两个请求并进行，如果用不同域名就可以实现平行下载。比如我可以用img.g9net.com这个链接来存放图片并进行链接。比如腾讯QQ，域名是www.QQ.com。而它用来存放的图片域名地址大致为img1.qq.com，而不是类似www.qq.com/img 这样的目录。

21：减少Iframe的数量

ifrmae元素可以在父文档中插入一个新的HTML文档。了解iframe的工作理然后才能更加有效地使用它，这一点很重要。
<iframe>优点：解决加载缓慢的第三方内容如图标和广告等的加载问题 ；Security sandbox ；并行加载脚本

<iframe>的缺点：即时内容为空，加载也需要时间 ；会阻止页面加载 ；没有语意

22：不要有404错误页面

这个也好理解除了会破坏使用者体验外，还会停止平行下载，此外，有些浏览器还会花时间去解析传回来的404文件。

23：减小Cookie体积

HTTP coockie可以用于权限验证和个性化身份等多种用途。coockie内的有关信息是通过HTTP文件头来在web服务器和浏览器之间进行交流的。因此保持coockie尽可能的小以减少用户的响应时间十分重要。具体可以这样做：

• 去除不必要的coockie 。

1. 使coockie体积尽量小以减少对用户响应的影响 。
2. 注意在适应级别的域名上设置coockie以便使子域名不受影响 。
3. 设置合理的过期时间。较早地Expire时间和不要过早去清除coockie，都会改善用户的响应时间。
4. 24：对于页面内容使用无coockie域名
   

   当浏览器在请求中同时请求一张静态的图片和发送coockie时，服务器对于这些coockie不会做任何地使用。因此他们只是因为某些负面因素而创建的网络传输。所有你应该确定对于静态内容的请求是无coockie的请求。创建一个子域名并用他来存放所有静态内容。
   如果你的域名是www.example.org，你可以在static.example.org上存在静态内容。但是，如果你不是在 www.example.org上而是在顶级域名example.org设置了coockie，那么所有对于static.example.org的请求都包含coockie。在这种情况下，你可以再重新购买一个新的域名来存在静态内容，并且要保持这个域名是无coockie的。Yahoo!使用的是 ymig.com，YouTube使用的是ytimg.com，Amazon使用的是images-anazon.com等等。
   使用无coockie域名存在静态内容的另外一个好处就是一些代理（服务器）可能会拒绝对coockie的内容请求进行缓存。一个相关的建议就是，如果你想确定应该使用example.org还是www.example.org作为你的一主页，你要考虑到coockie带来的影响。忽略掉www会使你除了把coockie设置到*.example.org外没有其它选择，因此出于性能方面的考虑最好是使用带有www的子域名并且在它上面设置coockie。

25：减少DOM访问
使用JavaScript访问DOM元素比较慢，因此为了获得更多的应该页面，应该做到：

• 缓存已经访问过的有关元素 。
• 线下更新完节点之后再将它们添加到文档树中 。
• 避免使用JavaScript来修改页面布局 。

有关此方面的更多信息请查看Julien Lecomte在YUI专题中的文章“高性能Ajax应该程序”。

26、开发智能事件处理程序

有时候我们会感觉到页面反应迟钝，这是因为DOM树元素中附加了过多的事件句柄并且些事件句病被频繁地触发。这就是为什么说使用event delegation（事件代理）是一种好方法了。如果你在一个div中有10个按钮，你只需要在div上附加一次事件句柄就可以了，而不用去为每一个按钮增加一个句柄。事件冒泡时你可以捕捉到事件并判断出是哪个事件发出的。
你同样也不用为了操作DOM树而等待onload事件的发生。你需要做的就是等待树结构中你要访问的元素出现。你也不用等待所有图像都加载完毕。
你可能会希望用DOMContentLoaded事件来代替onload，但是在所有浏览器都支持它之前你可使用YUI 事件应用程序中的onAvailable方法。

27：使用<link>代替@import

前面的最佳实现中提到CSS应该放置在顶端以利于有序加载呈现。 在IE中，用@import把<link>当到底部的作用是一样的，因此最好不要使用它。

28：避免使用滤镜

IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支，因此它的问题是多方面的。
完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替，这种格式能在IE中很好地工作。如果你确实需要使用 AlphaImageLoader，请使用下划线_filter又使之对IE7以上版本的用户无效。

29：优化图像

这个简单的说设计好后图片不要急于直接用，最好用图片压缩工具压缩。我本人很喜欢png这种格式，所用的工具为PNGOUTWin，效果相当不错。

30：优化CSS Spirite

• 1：在Spirite中水平排列你的图片，垂直排列会稍稍增加文件大小；
• 2：Spirite中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以便适用PNG8格式；
• 3：便于移动，不要在Spirite的图像中间留有较大空隙。这虽然不大会增加文件大小但对于用户代理来说它需要更少的内存来把图片解压为像素地图。100×100的图片为1万像素，而1000×1000就是100万像素。

31：不要在HTML中缩放图像

不要为了在HTML中设置长宽而使用比实际需要大的图片。如果你需要：
<img width=”100″ height=”100″ src=”mycat.jpg” alt=”My Cat” />
那么你的图片（mycat.jpg）就应该是100×100像素而不是把一个500×500像素的图片缩小使用。

32：favicon.ico要小且可缓存

favicon.ico是位于服务器根目录下的一个图片文件，也就是在浏览器旁边的那个网站小图标。它是必定存在的，因为即使你不关心它是否有用，浏览器也会对它发出请求，因此最好不要返回一个404 Not Found的响应。由于是在同一台服务器上，它每被请求一次coockie就会被发送一次。这个图片文件还会影响下载顺序，例如在IE中当你在 onload中请求额外的文件时，favicon会在这些额外内容被加载前下载。为了减少favicon.ico带来的弊端，要做到

1：文件尽量地小，最好小于1K

2：在适当的时候（也就是你不要打算再换favicon.ico的时候，因为更换新文件时不能对它进行重命名）为它设置Expires文件头。你可以很安全地把Expires文件头设置为未来的几个月。你可以通过核对当前favicon.ico的上次编辑时间来作出判断。

Imagemagick可以帮你创建小巧的favicon。

33：保持单个内容小于25K

这条限制主要是因为iPhone不能缓存大于25K的文件。注意这里指的是解压缩后的大小。由于单纯gizp压缩可能达不要求，因此精简文件就显得十分重要。

34：打包组成复合文本

这条限制主要是因为iPhone不能缓存大于25K的文件。注意这里指的是解压缩后的大小。由于单纯gizp压缩可能达不要求，因此精简文件就显得十分重要。

总结一下：

对于普通的前端工作者，最重要的就是关心CSS和Javascript等，比较好下手

对于CSS：把样式表置于顶部：避免使用CSS表达式（Expression）；使用外部JavaScript和CSS；削减JavaScript和CSS；削减JavaScript和CSS

对于Javascript：把脚本置于页面底部；使用外部JavaScript和CSS；削减JavaScript和CSS；剔除重复脚本；减少DOM访问

如果文中有什么地方错误的欢迎留言。