产品感看似是个比较感性的词，其实这是一个产品从业人员的职业技能的体现。产品感的建立，我理解可以从以下四个维度来培养：

1、用户需求分析和理解

其实每个产品经理在做产品设计的时候，都会对用户的需求进行分析，但常常上线的产品得不到好的反馈。这里的关键是，分析的过程是否客观和全面。有的产品经理会“偷懒”，问一圈周围的朋友和同事，就以为了解了用户的需求，这就有可能造成理解上的偏差。任何产品的用户群，都可能是复杂的群体，不同年龄、性别、地域、文化结构的用户在需求上会存在差异，产品经理需要对其进行分解，并圈定主流目标用户和高端用户，制定产品策略，打造核心亮点体验。

这里也提一下关于创新：创新是产品经理的基本素质，但不要为了创新而创新，创新是基于正确理解的用户需求，是要让用户体验更爽，而不是闭门造车，然后强迫用户改变使用习惯。

2、技术理解

产品经理是否需要技术功底，在我看来，是需要的，尤其是对搜索产品经理。搜索是典型的表现简单但后台技术复杂的产品，对于后台架构和引擎工作原理的理解，对做好搜索类产品会有比较大的帮助。在做搜索产品设计时，很多时候也要考虑技术的实现代价，毕竟资源是有限的，要有取舍。

3、交互设计

虽然有专业的交互、视觉工程师，但交互设计的能力和感觉，是产品经理的基本素质。

搜索产品的交互，要求视觉简洁清爽，在细节上精细打磨，比如怎么样可以让用户多看到一点内容，怎样减少用户操作时鼠标滑动的距离，怎样让用户看到这个button就能预期到会产生的结果、怎样可以使页面展现速度更快。产品亮点功能要考虑高端用户，而交互设计上，要重点关注最普通的用户，复杂的交互会造成困惑，用户的流失率和用户发呆的时间是成正比的，而这个时间是用秒甚至零点几秒来衡量的。

4、产品数据分析

数据分析是积累和验证产品感觉的重要手段。除了规模性数据，去细致分析用户在产品页面上每一个位置的操作，对比产品上线前后对用户行为的改变，会有很多意想不到的收获。对于搜索来讲，用户query的分析是很有意思的事情，尤其是从多个维度，考虑关联多个因素，会经常有很多启发。

个人觉得，产品感不是天生的，高智商、情商都带不来产品感觉，只有更多的体验产品、了解用户、数据分析和持续的学习，才能逐步积累感觉。培训和读书最多可以带给你20%的经验，而工作和实践是最好的学习方法。至于评判产品感觉是否到位，不能迷信专家或权威，再牛的人，也不可能对所有类型的产品都有感觉，只有用户体验才是真理。

具备良好产品感的产品经理，并不一定能做出好的产品。产品从规划到上线，可能涉及前后台开发、UI设计、市场推广、编辑、运营支撑等各方面的资源协调，在项目实施过程中，通常也会“麻烦”不断，比如需求变更、进度延迟、资源不足、突发风险等，这就要求产品经理要具备良好的项目管理和协调沟通能力。

产品上线之后，需要持续的进行运营，分析数据、收集用户反馈，发现问题，进行持续优化。这又要求产品经理具备产品运营的能力。

关于项目管理和产品运营，后续有机会再详细分享和讨论。总之，产品经理是对综合素质要求很高的职业，而腾讯公司具备很强的产品文化以及很好的用户平台，非常适合产品经理的成长，这里欢迎诸位喜欢挑战自我的人才加入腾讯，加入soso，一起用好的产品改变人们的生活。

作者简介：

赵世勇，soso平台部产品总监。1999年毕业于清华大学自动化系，十年以上互联网产品策划、研发和项目管理经验，2006年进入腾讯。

文章来源：腾讯soso团队博客

更改编辑器默认视图为HTML

大家都知道，在后台新建文章后，编辑器就自动跳转到“可视化”视图，对于一些经常要插入代码或者WEB设计者们来说（我就是^_^），可能更习惯使用HTML视图手动编辑。而且，像CKEditor在可视化视图下编辑本来没有<p>或<div>标签，但切换到HTML视图之后就会自动添加，当然这是CKEditor的自动设置无可厚非，但是在日后想要重新编辑一篇发表过的文章时就会头疼了，因为CKEditor会自作多情的生成很多冗杂或混乱的代码，保持代码的干净整洁非常不便（当然你要想凑合着用也不会对实际显示效果有很大改变，但会对网页结构减分）。

设置方法：将以下代码添加到主题的functions.php文件里即可：

[php]add_filter(‘wp_default_editor’, create_function(”, ‘return "html";’));[/php]

添加编辑器默认内容（编辑器内可见）

新建文章后编辑器里的内容默认是空的，有些朋友做的是WordPress主题站、插件站或单纯的下载站，一些标准的格式化的文章每次都会输入“主题名称”、“主题作者”、“下载地址”等内容，添加默认内容之后，这些重复性的工作以后再也不用了，一切都预定义好了。而且如果发表文章不需要这些预定义的内容，只需要全选-Delete就ok了，并不会很麻烦。

设置方法：在主题functions.php文件添加以下代码即可：

[php]function insertPreContent($content) {
if (!is_feed() && !is_home()) {
$content.= "</pre>
<div class="wpohome">";
$content.= "
<h4>WordPress网站优化之家</h4>
";
$content.= "这里的预定义内容在编辑器可见<a href="http://www.***.com">WordPress网站优化之家</a>";
$content.= "</div>
<pre>
";
}
return $content;
}

add_filter(‘default_content’, ‘insertPreContent’);[/php]

添加编辑器默认内容（编辑时不可见）

此方法添加的内容在发布文章时自动添加在内容的最后，在编辑的时候是看不见的，用于添加订阅、文章版权信息等等。

设置方法：在主题functions.php文件添加以下代码即可：

[php]
function insertFootNote($content) {
if (!is_feed() && !is_home()) {
$content.= "</pre>
<div class="wpohome">";
$content.= "
<h4>WordPress网站优化之家</h4>
";
$content.= "这里的预定义内容在编辑器可见<a href="http://www.***.com">WordPress网站优化之家</a>";
$content.= "</div>
<pre>
";
}
return $content;
}

add_filter(‘the_content’, ‘insertFootNote’);
[/php]

添加更多的HTML标签（慎用）

此功能请慎用，因为WordPress自带的TinyMCE编辑器会默认过滤掉不符合XHTML 1.0中的html标签，如<br />、<iframe>等。但不排除某些情况下也可能会用到这些标签，所以把方法放出来供大家参考吧。

添加方法：将以下代码粘贴到主题的functions.php文件里即可：

[php]function fb_change_mce_options($initArray) {
$ext = ‘pre[id|name|class|style],iframe[align|longdesc|
name|width|height|frameborder|scrolling|marginheight|
marginwidth|src]‘; //注意：格式为“标签一[属性一|属性二],标签二[属性一|属性二|属性三]”
if (isset($initArray['extended_valid_elements'])) {
$initArray['extended_valid_elements'] .= ‘,’ . $ext;
} else {
$initArray['extended_valid_elements'] = $ext;
}
return $initArray;
}

add_filter(‘tiny_mce_before_init’, ‘fb_change_mce_options’);[/php]

显示编辑器中的隐藏按钮

WordPress自带编辑器的强大往往被人忽略，很大程度上就是其隐藏的编辑按钮默认情况下没有被显示出来而已。完整的编辑器其实包含这些功能：加粗（bold）、斜体（italic）、下划线（underline）、删除线（strikethrough）、左对齐（justifyleft）、居中（justifycenter）、右对齐（justfyright）、两端对齐（justfyfull）、无序列表（bullist）、编号列表（numlist）、减少缩进（outdent）、缩进（indent）、剪切（cut）、复制（copy）、粘贴（paste）、撤销（undo）、重做（redo）、插入超链接（link）、取消超链接（unlink）、插入图片（image）、清除格式（removeformat）、帮助（wp_help）、打开HTML代码编辑器（code）、水平线（hr）、清除冗余代码（cleanup）、格式选择（formmatselect）、字体选择（fontselect）、字号选择（fontsizeselect）、样式选择（styleselect）、上标（sub）、下标（sup）、字体颜色（forecolor）、字体背景色（backcolor）、特殊符号（charmap）、隐藏按钮显示开关（wp_adv）、隐藏按钮区起始部分（wp_adv_start）、隐藏按钮区结束部分（wp_adv_end）、锚文本（anchor）、新建文本（类似于清空文本）（newdocument）、插入more标签（wp_more）、插入分页标签（wp_page）、拼写检查（spellchecker）。下面就把这些功能掉出来吧！效果图：

调用方式：将以下代码添加到主题functions.php文件里即可：

[php]function enable_more_buttons($buttons) {
$buttons[] = ‘hr’;
$buttons[] = ‘fontselect’;
$buttons[] = ‘sup’;
$buttons[] = ‘del’;
$buttons[] = ‘fontselect’;
$buttons[] = ‘cleanup’;
$buttons[] = ‘styleselect’;

// 更多按钮自行添加吧…

return $buttons;
}

add_filter("mce_buttons", "enable_more_buttons"); //默认将新添加的按钮追加在工具栏的第一行
//add_filter("mce_buttons_2", "enable_more_buttons"); //添加到工具栏的第二行
//add_filter("mce_buttons_3", "enable_more_buttons"); //添加到工具栏的第三行[/php]

让编辑器支持中文拼写检查

WordPress自带TinyMCE编辑器默认对英文拼写进行检查，怎么样才能让其支持中文拼写检查呢？

设置方法：在主题的functions.php文件里添加如下代码即可：

[php]function fb_mce_external_languages($initArray) {
$initArray['spellchecker_languages'] = ‘+Chinese=zh,English=en’;
return $initArray;
}

add_filter(‘tiny_mce_before_init’, ‘fb_mce_external_languages’);[/php]

简单添加自定义按钮

如果你使用了WordPress3.3.0最新版，可以用以下方法快捷方便的在后台HTML编辑器中加入自定义按钮。效果图：

步骤一：首先创建一个js文件，粘贴如下代码并保存为my_quicktags.js文件：

[code language="js"]QTags.addButton( 'QTags.addButton( 'hr', 'hr', "\n</pre>

<hr />

<pre>
\n", '' ); //快捷输入一个hr横线，点一下即可
QTags.addButton( 'h1', 'h1', "\n</pre>
<h1>", "</h1>
<pre>
\n" ); //快捷输入h1标签
QTags.addButton( '1', '【php】', "\n【php】\n\n【/php】", "" );//我就是将SyntaxHighlighter Evolved插件的简码集成到工具栏，这样就方便多了^_^，不过记得将【】换成[]。
QTags.addButton( '【css】', '【css】', "\n【css】\n\n【/css】", "" );//当然你也可以集成其他代码高亮或插件的简码^_^
//QTags.addButton( 'my_id', 'my button', '\n', '\n' );
//这儿共有四对引号，分别是按钮的ID、显示名、点一下输入内容、再点一下关闭内容（此为空则一次输入全部内容），\n表示换行。[/code]

步骤二：把刚才写好的my_quicktags.js放在主题文件夹，再在主题 functions.php 中加入代码：

[code language="php"]
add_action('admin_print_scripts', 'my_quicktags');

function my_quicktags() {
wp_enqueue_script(
'my_quicktags', get_stylesheet_directory_uri() . '/my-quicktags.js', array('quicktags')
);
}[/code]

好了，再去HTML编辑器看看吧，是不是很方便呢？

你还有其他好的WordPress自带TinyMCE编辑器的使用技巧吗？欢迎留言交流！

作者：启晗

文章来源：wpohome.com

本人爱看电影，周边人皆知。在刚刚过去的2011年里，欣赏了无数部精彩电影（具体多少部，至少有200+吧）。时光网Mtime是每天必到之地，看看新闻、预告、评论、海报、八卦等等~怎么选片子呢？一是众所皆盼的大片儿，二是时光网友的推荐+评分机制，三就是看电影的预告和海报是否能吸引到我。最近时光有个专题，小编从数千记的海报中淘出了几个设计手法和趋势，细看究竟如何设计才是最潮的选择。话说设计是相通的，设计的“潮”与“不潮”关键还是在于设计的理念。从这篇专题以及最近优秀网页的欣赏当中，发现近期以致未来一段时间内，网页设计还是有以下几个趋势手法可循可用的。

一 复古潮流

近几年来，服饰设计以及工业设计几乎都在走复古风潮，典型如legging的崛起，垫肩西装的返潮，哈雷眼镜的热销，以及家电产品简洁风格回暖等等，也带动了其他设计门类的复古倾向。以下两张为电影“父亲”以及“昂山素季”的海报。“父亲”的海报采用八十年代的手绘效果，透露着儿时的连环画效果；“昂山素季”的海报则让我们联想到了五六十年代的招贴画。

下面的几个网页也是近期的欣赏中选出的，老式的颜色搭配，年代图案的使用，蒸汽朋克感的造型等等，都透显着浓浓的复古风潮。

二 超出边缘制造立体感

简单的平面如何凸显立体感和速度感？将需要做成效果的部分图案超出边框即可实现！

忙命驾驶和星球大战前传一的两幅海报四周留白营造出相框感，略微溢出边缘的粉色的片名和新型的飞行器是点睛之笔，立体感立刻呈现。

下面的几个网页也是采用了这种设计手法，图片超出了边缘之后，立刻有了从边框中跳脱出来的感觉，增加了生动性和立体感。

三 密集感

密集营造的是一种氛围，会带来一种超酷的或者是压抑的感觉。密集的设计很容易有填充效果以及凸显主题的作用，所以电影海报中经常使用这种手法。网页中使用密集的设计方法是通过简单的图形或者文字的推积营造出恢弘大气充满力量感，不至于一些网页由于简洁留白太多而显得薄弱。欣赏下图：

四 卖卖萌

地球人已经抵挡不住卖萌了，从japan到china再到崇尚力量感的USA，卖萌降住所有人。卖萌的一般理解是：装可爱，刻意出现一些可爱的动作、言语等，类似于俗语“装可爱”。日本人发现增加卡通效果中人或者动物的头部比例，脸部以及身材圆润，眼睛大且圆的形象有治愈的效果，会让人很容易心生喜爱。所以现在卖萌到处可见，卡通形象的卖萌不在话下，妹子卖萌也是老生常谈，熟女熟男卖萌也见怪不怪啦！

五 色块拼贴

大面积的纯色块拼贴是设计中基本手法，电影海报中常见。由于前一段时间人们追求的是华丽的繁复的夸张的效果，所以这一基本手法使用的很少。随着复古潮的来临，色块拼贴又重出江湖，以少见的颜色对比效果来增加设计的张力以及饱和感。

在电影海报设计中运用这一手法，不仅色彩鲜明，使人眼前一亮，同时还能表现出电影的戏剧冲突，使在观影前就能明白角色的性质以及之间的一种或紧张或缓和等等的关系。网页中使用不规则的色块拼贴，建立立体感以及增强区域间的差别，重点非重点一目了然。

六 小清新

“小清新”最初指的是一种以清新唯美、随意创作风格见长的音乐类型，也就是人们常说的Indie Pop，即独立流行，之后逐渐扩散到文学、电影、摄影等各种文化艺术领域。如今，这种起初颇为小众的风格，现在已逐步形成一种亚文化现象，受到众多年轻人的追捧。无论是作为一种理想的生活方式，还是个人憧憬的美好意境，小清新都是秉承淡雅、自然、朴实、超脱、静谧的特点而存在着。“小清新”的颜色主要是淡色系为主，多运用一些天然的纹理和简单的图案，营造是一种清新、自然、简单却唯美的氛围。

还是那句老话，设计都是相通的，如何通过其他设计门类来挖掘网页设计的手法和趋势，眼睛的锐利我还需要慢慢修炼。以上，给爱设计爱电影的人们~

作者：文击每耳

文章来源：365ucd.com

最近看到不少人都来分享自己做专题的一些好方法。专题页做了很久了多少也有点技巧我也来分享下我的方法吧。

需求部门的定位

1、主题体现观点PK的意味

2、专题元素及创意取自第一格斗类游戏—拳皇

3、主要人物在八神庵和草薙京之间展开，有交锋的招式

题图元素设定

经过一轮的思维拓展，扩大词汇面积去搜索相关素材

见证过程

1、背景制作，做出围观的效果

2、将找到的电影海报做相对应的效果。扣除原有人物，修复缺失背景，多层效果叠加让背景能更加深动。

3、置入主要人物，再对其做效果修饰，增加气势和动感。

4、魔兽世界的标题板把字去掉，把自己的标题加入，做样式效果。跟界面达到最大匹配度

PS：拿到专题框架就要开始自己虚构一个大概效果出来，根据设定的这些元素去找相对应的素材应该会事倍功半了。其实很多电影的海报融合到题图里去效果还是很不错的。

最终效果

点击图片查看大图

作者：麻小烦

文章来源：365ucd.com

1. 一定要闭合HTML标签

在以往的页面源代码里，经常看到这样的语句：

<li>Some text here.
<li>Some new text here.
<li>You get the idea. 

也许过去我们可以容忍这样的非闭合HTML标签，但在今天的标准来看，这是非常不可取的，是必须百分百避免的。一定要注意闭合你的HTML标签，否则将无法通过验证，并且容易出现一些难以预见的问题。

最好使用这样的形式：

<ul>
  <li>Some text here. </li>
  <li>Some new text here. </li>
  <li>You get the idea. </li>
</ul> 

2. 声明正确的文档类型( DocType )

笔者早先曾加入过许多CSS论坛，在那里，如果有用户遇到问题，我们会建议他首先做两件事：

1. 验证CSS文件，解决所有可见的错误

2. 加上文档类型 Doctype

DOCTYPE 定义在HTML标签出现之前，它告诉浏览器这个页面包含的是HTML，XHTML，还是两者混合出现，这样浏览器才能正确的解析标记。

通常有四种文档类型可供选择：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

关于该使用什么样的文档类型声明，一直有不同的说法。通常认为使用最严格的声明是最佳选择，但研究表明，大部分浏览器会使用普通的方式解析这种声明，所以很多人选择使用HTML4.01标准。选择声明的底线是，它是不是真的适合你，所以你要综合考虑来选择适合你得项目的声明。

3. 不要使用嵌入式CSS样式

当你在埋头写代码时，可能会经常顺手或偷懒的加上一点嵌入式css代码，就象这样：

<p style="color: red;">帕兰映像</p> 

这样看起来即方便又没有问题，但是它会在你得代码中产生问题。

在你开始写代码时，最好是在内容结构完成之后再开始加入样式代码。

这样的编码方式就像打游击，是一种很山寨的做法。——Chris Coyier

更好的做法是，把这个P的样式定义在样式表文件里：

4. 在页面head标签中引入所有的样式表文件

理论上讲，你可以在任何位置引入CSS样式表，但HTML规范建议在网页的head标记中引入，这样可以加快页面的渲染速度。

在雅虎的开发过程中，我们发现，在head标签中引入样式表，会加快网页加载速度，因为这样可以使页面逐步渲染。 —— ySlow团队

<head> 

<title>My Favorites Kinds of Corn</title> 

<link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" /> 

<link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" /> 

</head> 

5. 在页面底部引入javascript文件

要记住一个原则，就是让页面以最快的速度呈现在用户面前。当加载一个脚本时，页面会暂停加载，直到脚本完全载入。所以会浪费用户更多的时间。

如果你的JS文件只是要实现某些功能，(比如点击按钮事件)，那就放心的在body底部引入它，这绝对是最佳的方法。

举例：

<p>And now you know my favorite kinds of corn. </p> 

<script type="text/javascript" src="path/to/file.js"></script> 

<script type="text/javascript" src="path/to/anotherFile.js"></script> 

</body> 

</html> 

6. 不要使用嵌入式JavaScript，这都21世纪了!

许多年以前，还存在一种这样的方式，就是直接将JS代码加入到HTML标签中。尤其是在简单的图片相册中非常常见。本质上讲，一个“onclick”事件是附加在 标签上的，其效果等同于一些JS代码。不需要讨论太多，非常不应该使用这样的方式，应该把代码转移到一个外部JS文件中，然后使用“ addEventListener / attachEvent ”加入时间侦听器。或者使用jquery等框架，之需要使用其“clock”方法。

$('a#moreCornInfoLink').click(function() {
    alert('Want to learn more about corn?');
}); 

7. 开发中随时进行标准验证

很多人并不真正理解标准验证的意义和价值，笔者在一篇博客中详细分析了这个问题。一句话，标准验证是为你服务的，不是给你找麻烦的。

如果你刚开始从事网页制作，那强烈建议你下载这个网页开发工具条 ，并在编码过程中随时使用”HTML标准验证”和“CSS标准验证”。如果你认为CSS是一种非常好学的语言，那么它会把你整的死去活来。你的不严谨的代码会让你的页面漏洞百出，问题不断，一个好的方法就是—— 验证，验证，再验证。

8. 下载Firebug

Firebug是当之无愧的网页开发最佳插件，它不但可以调试JavaScript，还可以直观的让你了解页面标记的属性和位置。不用多说， 下载它!

9. 使用Firebug!

据笔者观察，大部分的使用者仅仅使用了Firebug 20%的功能，那真是太浪费了，你不妨花几个小时的时间来系统学习这个工具，相信会让你事半功倍。

Firebug教程：

Overview of Firebug

Debug Javascript With Firebug – video tutorial

10. 使用小写的标记

理论上讲，你可以像这样随性的书写标记：

<DIV> 

<P>Here's an interesting fact about corn. </P> 

</DIV> 

最好不要这样写，费力气输入大些字母没有任何用处，并且会让代码很难看，这样子就很好：

<div> 

<p>Here's an interesting fact about corn. </p> 

</div> 

业务

任何技术都离不开业务需求，所以，要说明性能问题，首先还是想先说说业务问题。

其一，有人可能把这个东西和QQ或是网游相比。但我觉得这两者是不一样的，网游和QQ在线或是登录时访问的更多的是用户自己的数据，而订票系统访问的是中心的票量数据，这是不一样的。不要觉得网游或是QQ能行你就以为这是一样的。网游和QQ 的后端负载相对于电子商务的系统还是简单。

其二，有人说春节期间订火车的这个事好像网站的秒杀活动。的确很相似，但是如果你的思考不在表面的话，你会发现这也有些不一样。火车票这个事，还有很多查询操作，查时间，查座位，查铺位，一个车次不 行，又查另一个车次，其伴随着大量的查询操作，下单的时候需要对数据库操作。而秒杀，直接杀就好了。另外，关于秒杀，完全可以做成只接受前N个用户的请求（完全不操作后端的任何数据， 仅仅只是对用户的下单操作log），这种业务，只要把各个服务器的时间精确同步了就可以了，无需在当时操作任何数据库。可以订单数够后，停止秒杀，然后批量写数据库。火车票这个岂止是秒杀那么简单。能不能买到票得当时告诉用户啊。

其三，有人拿这个系统和奥运会的票务系统比较。我觉得还是不一样。虽然奥运会的票务系统当年也一上线就废了。但是奥运会用的是抽奖的方式，也就是说不存在先来先得的抢的方式，而且，是事后抽奖，事前只需要收信息，事前不需要保证数据一致性，没有锁，很容易水平扩展。

其四，订票系统应该和电子商务的订单系统很相似，都是需要对库存进行：1）占住库存，2）支付（可选），3）扣除库存的操作。这个是需要有一致性的检查的，也就是在并发时需要对数据加锁的。B2C的电商基本上都会把这个事干成异步的，也就是说，你下的订单并不是马上处理的，而是延时处理的，只有成功处理了，系统才会给你一封确认邮件说是订单成功。我相信有很多朋友都收到认单不成功的邮件。这就是说，数据一致性在并发下是一个瓶颈。

其五，铁路的票务业务很变态，其采用的是突然放票，而有的票又远远不够大家分，所以，大家才会有抢票这种有中国特色的业务的做法。于是当票放出来的时候，就会有几百万人甚至上千万人杀上去，查询，下单。几十分钟内，一个网站能接受几千万的访问量，这个是很恐怖的事情。据说12306的高峰访问是10亿PV，集中在早8点到10点，每秒PV在高峰时上千万。

多说几句：

库存是B2C的恶梦，库存管理相当的复杂。不信，你可以问问所有传统和电务零售业的企业，看看他们管理库存是多么难的一件事。不然，就不会有那么多人在问凡客的库存问题了。（你还可以看看《乔布斯传》，你就知道为什么Tim会接任Apple的CEO了，因为他搞定了苹果的库存问题）

对于一个网站来说，浏览网页的高负载很容易搞定，查询的负载有一定的难度去处理，不过还是可以通过缓存查询结果来搞定，最难的就是下单的负载。因为要访问库存啊，对于下单，基本上是用异步来搞定的。去年双11节，淘宝的每小时的订单数大约在60万左右，京东一天也才能支持40万（居然比12306还差），亚马逊5年前一小时可支持70万订单量。可见，下订单的操作并没有我们相像的那么性能高。

淘宝要比B2C的网站要简单得多，因为没有仓库，所以，不存在像B2C这样有N个仓库对同一商品库存更新和查询的操作。下单的时候，B2C的 网站要去找一个仓库，又要离用户近，又要有库存，这需要很多计算。试想，你在北京买了一本书，北京的仓库没货了，就要从周边的仓库调，那就要去看看沈阳或 是西安的仓库有没有货，如果没有，又得看看江苏的仓库，等等。淘宝的就没有那么多事了，每个商户有自己的库存，库存分到商户头上了，反而有利于性能。

数据一致性才是真正的性能瓶颈。有 人说nginx可以搞定每秒10万的静态请求，我不怀疑。但这只是静态请求，理论值，只要带宽、I/O够强，服务器计算能力够，并支持的并发连接数顶得住10万TCP链接的建立 的话，那没有问题。但在数据一致性面前，这10万就完完全全成了一个可望不可及的理论值了。

我说那么多，我只是想从业务上告诉大家，我们需要从业务上真正了解春运铁路订票这样业务的变态之处。

前端性能优化技术

要解决性能的问题，有很多种常用的方法，我在下面列举一下，我相信12306这个网站使用下面的这些技术会让其性能有质的飞跃。

一、前端负载均衡

通过DNS的负载均衡器（一般在路由器上根据路由的负载重定向）可以把用户的访问均匀地分散在多个Web服务器上。这样可以减少Web服务器的请求负载。因为http的请求都是短作业，所以，可以通过很简单的负载均衡器来完成这一功能。最好是有CDN网络让用户连接与其最近的服务器（CDN通常伴随着分布式存储）。（关于负载均衡更为详细的说明见“后端的负载均衡”）

二、减少前端链接数

我看了一下12306.cn，打开主页需要建60多个HTTP连接，车票预订页面则有70多个HTTP请求，现在的浏览器都是并发请求的。所以，只要有100万个用户，就会有6000万个链接，太多了。一个登录查询页面就好了。把js打成一个文件，把css也打成一个文件，把图标也打成一个文件，用css分块展示。把链接数减到最低。

三、减少网页大小增加带宽

这个世界不是哪个公司都敢做图片服务的，因为图片太耗带宽了。现在宽带时代很难有人能体会到当拨号时代做个图页都不敢用图片的情形（现在在手机端浏览也是这个情形）。我查看了一下12306首页的需要下载的总文件大小大约在900KB左右，如果你访问过了，浏览器会帮你缓存很多，只需下载10K左右的文件。但是我们可以想像一个极端一点的案例，1百万用户同时访问，且都是第一次访问，每人下载量需要1M，如果需要在120秒内返回，那么就需要，1M * 1M /120 * 8 = 66Gbps的带宽。很惊人吧。所以，我估计在当天，12306的阻塞基本上应该是网络带宽，所以，你可能看到的是没有响应。后面随着浏览器的缓存帮助12306减少很多带宽占用，于是负载一下就到了后端，后端的数据处理瓶颈一下就出来。于是你会看到很多http 500之类的错误。这说明服务器垮了。

四、前端页面静态化

静态化一些不常变的页面和数据，并gzip一下。还有一个并态的方法是把这些静态页面放在/dev/shm下，这个目录就是内存，直接从内存中把文件读出来返回，这样可以减少昂贵的磁盘I/O。

五、优化查询

很多人查询都是在查一样的，完全可以用反向代理合并这些并发的相同的查询。这样的技术主要用查询结果缓存来实现，第一次查询走数据库获得数据，并把数据放到缓存，后面的查询统统直接访问高速缓存。为每个查询做Hash，使用NoSQL的技术可以完成这个优化。（这个技术也可以用做静态页面）

对于火车票量的查询，个人觉得不要显示数字，就显示一个“有”或“无”就好了，这样可以大大简化系统复杂度，并提升性能。

六、缓存的问题

缓存可以用来缓存动态页面，也可以用来缓存查询的数据。缓存通常有那么几个问题：

1）缓存的更新。也叫缓存和数据库的同步。有这么几种方法，一是缓存time out，让缓存失效，重查，二是，由后端通知更新，一量后端发生变化，通知前端更新。前者实现起来比较简单，但实时性不高，后者实现起来比较复杂 ，但实时性高。

2）缓存的换页。内存可能不够，所以，需要把一些不活跃的数据换出内存，这个和操作系统的内存换页和交换内存很相似。FIFO、LRU、LFU都是比较经典的换页算法。相关内容参看Wikipeida的缓存算法。

3）缓存的重建和持久化。缓存在内存，系统总要维护，所以，缓存就会丢失，如果缓存没了，就需要重建，如果数据量很大，缓存重建的过程会很慢，这会影响生产环境，所以，缓存的持久化也是需要考虑的。

诸多强大的NoSQL都很好支持了上述三大缓存的问题。

后端性能优化技术

前面讨论了前端性能的优化技术，于是前端可能就不是瓶颈问题了。那么性能问题就会到后端数据上来了。下面说几个后端常见的性能优化技术。

一、数据冗余

关于数据冗余，也就是说，把我们的数据库的数据冗余处理，也就是减少表连接这样的开销比较大的操作，但这样会牺牲数据的一致性。风险比较大。很多人把NoSQL用做数据，快是快了，因为数据冗余了，但这对数据一致性有大的风险。这需要根据不同的业务进行分析和处理。（注意：用关系型数据库很容易移植到NoSQL上，但是反过来从NoSQL到关系型就难了）

二、数据镜像

几乎所有主流的数据库都支持镜像，也就是replication。数据库的镜像带来的好处就是可以做负载均衡。把一台数据库的负载均分到多台上，同时又保证了数据一致性（Oracle的SCN）。最重要的是，这样还可以有高可用性，一台废了，还有另一台在服务。

数据镜像的数据一致性可能是个复杂的问题，所以我们要在单条数据上进行数据分区，也就是说，把一个畅销商品的库存均分到不同的服务器上，如，一个畅销商品有1万的库存，我们可以设置10台服务器，每台服务器上有1000个库存，这就好像B2C的仓库一样。

三、数据分区

数据镜像不能解决的一个问题就是数据表里的记录太多，导致数据库操作太慢。所以，把数据分区。数据分区有很多种做法，一般来说有下面这几种：

1）把数据把某种逻辑来分类。比如火车票的订票系统可以按各铁路局来分，可按各种车型分，可以按始发站分，可以按目的地分……，反正就是把一张表拆成多张有一样的字段但是不同种类的表，这样，这些表就可以存在不同的机器上以达到分担负载的目的。

2）把数据按字段分，也就是竖着分表。比如把一些不经常改的数据放在一个表里，经常改的数据放在另外多个表里。把一张表变成1对1的关系，这样，你可以减少表的字段个数，同样可以提升一定的性能。另外，字段多会造成一条记录的存储会被放到不同的页表里，这对于读写性能都有问题。但这样一来会有很多复杂的控制。

3）平均分表。因为第一种方法是并不一定平均分均，可能某个种类的数据还是很多。所以，也有采用平均分配的方式，通过主键ID的范围来分表。

4）同一数据分区。这个在上面数据镜像提过。也就是把同一商品的库存值分到不同的服务器上，比如有10000个库存，可以分到10台服务器上，一台上有1000个库存。然后负载均衡。

这三种分区都有好有坏。最常用的还是第一种。数据一旦分区，你就需要有一个或是多个调度来让你的前端程序知道去哪里找数据。把火车票的数据分区，并放在各个省市，会对12306这个系统有非常有意义的质的性能的提高。

四、后端系统负载均衡

前面说了数据分区，数据分区可以在一定程度上减轻负载，但是无法减轻热销商品的负载，对于火车票来说，可以认为是大城市的某些主干线上的车票。这就需要使用数据镜像来减轻负载。使用数据镜像，你必然要使用负载均衡，在后端，我们可能很难使用像路由器上的负载均衡器，因为那是均衡流量的，因为流量并不代表服务器的繁忙程度。因此，我们需要一个任务分配系统，其还能监控各个服务器的负载情况。

任务分配服务器有一些难点：

负载情况比较复杂。什么叫忙？是CPU高？还是磁盘I/O高？还是内存使用高？还是并发高？还是内存换页率高？你可能需要全部都要考虑。这些信息要发送给那个任务分配器上，由任务分配器挑选一台负载最轻的服务器来处理。

任务分配服务器上需要对任务队列，不能丢任务啊，所以还需要持久化。并且可以以批量的方式把任务分配给计算服务器。

任务分配服务器死了怎么办？这里需要一些如Live-Standby或是failover等高可用性的技术。我们还需要注意那些持久化了的任务的队列如何转移到别的服务器上的问题。

我看到有很多系统都用静态的方式来分配，有的用hash，有的就简单地轮流分析。这些都不够好，一个是不能完美地负载均衡，另一个静态的方法的致命缺陷是，如果有一台计算服务器死机了，或是我们需要加入新的服务器，对于我们的分配器来说，都需要知道的。

还有一种方法是使用抢占式的方式进行负载均衡，由下游的计算服务器去任务服务器上拿任务。让这些计算服务器自己决定自己是否要任务。这样的好处是可以简化系统的复杂度，而且还可以任意实时地减少或增加计算服务器。但是唯一不好的就是，如果有一些任务只能在某种服务器上处理，这可能会引入一些复杂度。不过总体来说，这种方法可能是比较好的负载均衡。

五、异步、 throttle 和 批量处理

异步、throttle（节流阀） 和批量处理都需要对并发请求数做队列处理的。

异步在业务上一般来说就是收集请求，然后延时处理。在技术上就是可以把各个处理程序做成并行的，也就可以水平扩展了。但是异步的技术问题大概有这些，a）被调用方的结果返回，会涉及进程线程间通信的问题。b）如果程序需要回滚，回滚会有点复杂。c）异步通常都会伴随多线程多进程，并发的控制也相对麻烦一些。d）很多异步系统都用消息机制，消息的丢失和乱序也会是比较复杂的问题。

throttle 技术其实并不提升性能，这个技术主要是防止系统被超过自己不能处理的流量给搞垮了，这其实是个保护机制。使用throttle技术一般来说是对于一些自己无法控制的系统，比如，和你网站对接的银行系统。

批量处理的技术，是把一堆基本相同的请求批量处理。比如，大家同时购买同一个商品，没有必要你买一个我就写一次数据库，完全可以收集到一定数量的请求，一次操作。这个技术可以用作很多方面。比如节省网络带宽，我们都知道网络上的MTU（最大传输单元），以态网是1500字节，光纤可以达到4000多个字节，如果你的一个网络包没有放满这个MTU，那就是在浪费网络带宽，因为网卡的驱动程序只有一块一块地读效率才会高。因此，网络发包时，我们需要收集到足够多的信息后再做网络I/O，这也是一种批量处理的方式。批量处理的敌人是流量低，所以，批量处理的系统一般都会设置上两个阀值，一个是作业量，另一个是timeout，只要有一个条件满足，就会开始提交处理。

所以，只要是异步，一般都会有throttle机制，一般都会有队列来排队，有队列，就会有持久化，而系统一般都会使用批量的方式来处理。

云风同学设计的“排队系统” 就是这个技术。这和电子商务的订单系统很相似，就是说，我的系统收到了你的购票下单请求，但是我还没有真正处理，我的系统会跟据我自己的处理能力来throttle住这些大量的请求，并一点一点地处理。一旦处理完成，我就可以发邮件或短信告诉用户你来可以真正购票了。

在这里，我想通过业务和用户需求方面讨论一下云风同学的这个排队系统，因为其从技术上看似解决了这个问题，但是从业务和用户需求上来说可能还是有一些值得我们去深入思考的地方：

1）队列的DoS攻击。首先，我们思考一下，这个队是个单纯地排队的吗？这样做还不够好，因为这样我们不能杜绝黄牛，而且单纯的ticket_id很容易发生DoS攻击，比如，我发起N个 ticket_id，进入购票流程后，我不买，我就耗你半个小时，很容易我就可以让想买票的人几天都买不到票。有人说，用户应该要用身份证来排队， 这样在购买里就必需要用这个身份证来买，但这也还不能杜绝黄牛排队或是号贩子。因为他们可以注册N个帐号来排队，但就是不买。黄牛这些人这个时候只需要干一个事，把网站搞得正常人不能访问，让用户只能通过他们来买。

2）对列的一致性？对这个队列的操作是不是需要锁？只要有锁，性能一定上不去。试想，100万个人同时要求你来分配位置号，这个队列将会成为性能瓶颈。你一定没有数据库实现得性能好，所以，可能比现在还差

3）队列的等待时间。购票时间半小时够不够？多不多？要是那时用户正好不能上网呢？如果时间短了，用户不够时间操作也会抱怨，如果时间长了，后面在排队的那些人也会抱怨。这个方法可能在实际操作上会有很多问题。另外，半个小时太长了，这完全不现实，我们用15分钟来举例：有1千万用户，每一个时刻只能放进去1万个，这1万个用户需要15分钟完成所有操作，那么，这1千万用户全部处理完，需要1000*15m = 250小时，10天半，火车早开了。（我并非乱说，根据铁道部专家的说明：这几天，平均一天下单100万，所以，处理1000万的用户需要十天。这个计算可能有点简单了，我只是想说，在这样低负载的系统下用排队可能都不能解决问题）

4）队列的分布式。这个排队系统只有一个队列好吗？还不足够好。因为，如果你放进去的可以购票的人如果在买同一个车次的同样的类型的票（比如某动车卧铺），还是等于在抢票，也就是说系统的负载还是会有可能集中到其中某台服务器上。因此，最好的方法是根据用户的需求——提供出发地和目的地，来对用户进行排队。而这样一来，队列也就可以是多个，只要是多个队列，就可以水平扩展了。

我觉得完全可以向网上购物学习。在排队（下单）的时候，收集好用户的信息和想要买的票，并允许用户设置购票的优先级，比如，A车次卧铺买 不到就买 B车次的卧铺，如果还买不到就买硬座等等，然后用户把所需的钱先充值好，接下来就是系统完全自动地异步处理订单。成功不成功都发短信或邮件通知用户。这样，系统不仅可以省去那半个小时的用户交互时间，自动化加快处理，还可以合并相同购票请求的人，进行批处理（减少数据库的操作次数）。这种方法最妙的事是可以知道这些排队用户的需求，不但可以优化用户的队列，把用户分布到不同的队列，还可以像亚马逊的心愿单一样，让铁道部做车次统筹安排和调整（最后，排队系统（下单系统）还是要保存在数据库里的或做持久化，不能只放在内存中，不然机器一down，就等着被骂吧）。

小结

写了那么多，我小结一下：

0）无论你怎么设计，你的系统一定要能容易地水平扩展。也就是说，你的整个数据流中，所有的环节都要能够水平扩展。这样，当你的系统有性能问题时，“加3倍的服务器”才不会被人讥笑。

1）上述的技术不是一朝一夕能搞定的，没有长期的积累，基本无望。我们可以看到，无论你用哪种都会引发一些复杂性。

2）集中式的卖票很难搞定，使用上述的技术可以让订票系统能有几佰倍的性能提升。而在各个省市建分站，分开卖票，是能让现有系统性能有质的提升的最好方法。

3）春运前夕抢票且票量供远小于求这种业务模式是相当变态的，让几千万甚至上亿的人在某个早晨的8点钟同时登录同时抢票的这种业务模式是变态中的变态。业务形态的变态决定了无论他们怎么办干一定会被骂。

4）为了那么一两个星期而搞那么大的系统，而其它时间都在闲着，有些可惜了，这也就是铁路才干得出来这样的事了。

作者：陈皓

原文地址：CoolShell.cn

“2011年，在网站设计界最令你难忘的是什么？”我曾对业界精英们提出过这样的疑问。其中出现了一个极其高频的词（猜猜？），而每个人都有许多话要说。当然，在看完以下的这些言论，我们非常欢迎你大声的说出在2011年中令你印象深刻的转变。

由衷的感谢各位能抽出时间，回答这个问题。我们收集了来自世界各地的作者、设计师、程序开发员、UI&UX 设计师、演讲人及来自各个专业社区的学者专家。（以下排名不分先后）

“网页的设计形式不再受宽度的局限。响应性设计更好的帮助我们理解网站。”

Steve Fisher——在Yellow Pencil工作室担任用户体验总监。国际知名交互设计师，演讲人以及开源传道者。同时任加拿大平面设计师协会网站副总裁。
对于我来说2011年最明显的特点是互联网行业慢慢走向成熟 。网页的设计形式不再受宽度的局限。响应性设计（Responsive design）不仅有助于提升我们对于网站的理解，同时也能加强客户对其的认识。抽象我们所要表达的内容，使之成为简洁易懂的信息，同时从视觉效果来看网站的设计，这些都很好的告知了我们设计的决定因素。今年的一系列变化，让我感到前所未有的振奋。

twitter: @hellofisher dribbble: hellofisher

“我希望在2012年‘响应性设计’并不只是一个热门关键词，而是成为作为设计人员所需具备的基础能力。”

Sarah Parmenter——创立“You Know Who”设计工作室，专注于网站用户界面设计及iPhone和iPad应用程序开发。
响应性设计和内容策略的崛起，在2011年中最令我难忘，可以说它们是今年两大宝贵的财产。我希望在2012年“响应性设计”并不只是一个热门关键词，而是成为作为设计人员所需具备的基础能力，让更多的人认识到我们网站内容的重要性，并且停止采用“Lorem Ipsum”这种文字排版设计方式。

twitter: @sazzy dribbble: sarah

“核心设计实际上意味着：沟通与问题解决，个人觉得如今我们在这一层面上做的越来越好。”

Vitaly Friedman——Smashingmagazine.com网站联合创始人兼首席主编，在线杂志设计师。
今年，最令我印象深刻的是对于响应性设计的接受程度大幅上升。随着时代的变迁，在2012年我们开始重新思考，细细斟酌我们的网页设计道路，在以各式各样移动设备为王道的今天，对于即将面临的新挑战，我们该如何找到解决方案。

核心设计实际上意味着：沟通与问题解决，而个人觉得如今我们在这一层面上已做的越来越好。我们见证了响应性模式在网页设计各部分中的建立——无论是音频/视频，还是导航、表单、广告等，点滴的进步都那么令人振奋。我坚信，2012年会给我们带来更多新兴技术，而这对于改善web用户体验无疑又是一次浓墨重彩。我非常期待这个时刻的到来！

twitter: @smashingmag google+: vitaly

“2011年打破了常规工具使用的方式。”

Paul Irish——前段开发人员，Google Chrome开发联系员，jQuery开发团队成员，Modernizr、CSS3 Please和HTML5 Boilerplate首席开发人员。
从博客到网页端应用程序，对于如何将我们的最佳成果成功的运用于我们的工作并提高其效率还存有很大的发展空间。对于浏览器的内部运行需要形成一个清晰的概念，这样有助于最佳技术的识别，从而创造出最佳的用户体验。与此同时，诸如：Sass & Compass, CodeKit, LiveReload 和ImageOptim这样的工具还能帮助我们解决网页浏览器支持问题。我对2012年的到来已经迫不及待了，我们将创造出何种更加理想的用户体验。

twitter: @paul_irish google +: paulirish.com/+

“纯CSS logo（yak!）”

Harry Roberts——网页开发者、作家、设计师，Smashing Magazine专家小组成员。
大多数人认为2011年对于网页设计来说，是以适应性网页设计、CSS测试、纯CSS logo（yak!）以及滚动视差为代表的一年。而我认为，2011年的CSS充满活力，兼具实效性与前端高性能。或许有人觉得它以一个沉闷无聊的结尾结束了这一年。但我却看到了web开发中一个更具挑战性，更有趣，同时也更有用的一面。随着用户界面变得更加复杂，我们需要找到一条始终保持简单代码的途径；同时，随着移动设备的多元化发展，我们需要找到一条能让代码始终保持高性能的途径。虽然大部分人仍沉溺于媒体查询（Media Query）和CSS3中，而我却准备从头开始，重新投入到CSS布局模块化、增强其可扩展性以及前端开发中。

twitter: @csswizardry dribbble: csswizardry

“我们都开始在思考一些共同的问题，比如：1024像素宽的桌面。”

Jonathan Snook——知名Web开发与设计师，从事 Web 前端设计，后台开发以及 Adobe AIR 桌面应用的开发。
这一年中，最令我难忘的无疑是我们对于如何建立网站这一问题的思维观念的转变和革新。我们都开始在思考一些共同的问题，比如：1024像素宽的桌面。移动和平板设备的大肆喷井，迫使我们去思索今后的设计之路，以及该以何种更好的方式服务于我们所呈现的内容。

twitter: @snookca flickr: jonathansnooka

“行业中出现的不同发展方向，令我兴奋不已。”

Janna Hagan——从事网页设计与开发。获得2011年.net年度青年设计师称号。
在2011年中最令我难忘的是HTML5与CSS3响应性设计的崛起。行业中出现的不同发展方向以及在这一年中科技的迅速发展带来的一系列变化，都令我们兴奋不已。变化与发展是不可避免的，我们必须用创意性的姿态去拥抱它。

twitter: @_jannalynn dribbble: jannalynn

“2011是移动之年。”

Paul Boag ——网站设计公司Headscape创始人之一。从1994年起就迈入网站制作行当。经常于.net magazine，smashing magazine和web designer depot上发表观点文章。
回顾2011年，在移动互联网的热潮冲击下，响应式网页设计的出现解决了由此带来的诸多挑战。现在不用额外付费就能在各种移动终端上访问各类网页了。最棒的是，新建的网页几乎可以兼容所有移动终端（无论是旧版或者升级版），其成本运比原先的方法低。就个人而言，这可是一大进步。

twitter: @boagworld podcast: boagworld.com/podcast

“2011颠覆了我一贯的网页设计思路。”

Veerle Pieters ——比利时平面及网页设计师。Duoh! n.v.的创始者之一。
某种程度上而言，2011年由于移动网络的兴起，颠覆了我一贯的网页设计思路。当我在设计的时候，我会尽可能的考虑到移动这个概念。根据每个网站或者项目的类型以及其他元素，是可以做出完整的响应式网页的。当然这就对我的思维定势带来的一定的挑战，我要打破常规贵，把那些条条框框的禁忌抛到脑后，创新就应该是这样，成功的作品就是这样炼出来的。

当然在创作过程中，还是要谨记一些基本标准，会遇到像CSS代码这样的小障碍。这就促使我在编码时，要更大胆创新，我拒绝墨守成规。要设计出一个完全响应式网页，我必须尽可能地丢弃那些禁忌要点，这才是我的作风。其中的挑战就是，需要在基本标准与个性发挥间保持平衡。我们可以在设计中加入动画效果，这就是一种新思路。

twitter: @vpieters dribbble: veerlepieters

“···你不可避免···”

Aaron Weyenberg ——网页设计师、移动应用程序开发者。现作为TED大会演讲人之一。
2011年网页设计里让我印象深刻的是，响应式设计逐步火起来了。过去几年，相比其他主题，有关响应式网页设计的工具、插件、资源、教学课程、研讨会个人觉得是最多的。虽然我现在无法确认这项技术的长期实效性会如何，但是它就是必需的——作为设计师就更加需要它了，你必须学会且精通这项技术，这样当接到项目时才能快速反应是不是适合用这个技术。

twitter: @aweyenberg dribbble: aaronweyenberg

“越来越多的网页设计师选择了滑动式布局而摒弃了固定排版式布局。”

Eivind Uggedal ——wasitup.com及mediaqueri.es网站的创建者。
去年1月当我创建的mediaqueri.es网站上线时，我还没想过响应式网页设计会在2011年如此大热。不仅仅是我建议的一些网站都使用了这项技术，越来越多的网页设计师选择了滑动式布局而摒弃了固定排版式布局。我们也发现了像The Botson Globe和Barack Obama这样高端的网站都改成了响应式或自适应式版本重新上线了。

twitter: @uggedal github: uggedal

“如果你是网页创建团队的一分子，你不可能不为这些大事件欣喜若狂。”

Peter Gasston ——从事于Top 10网站的开发。出版《The Book of CSS3: A Developer’s Guide to the Future of Web Design》一书。经常于.Net杂志、CSS3.info网站上发表文章。
我想说微软发布IE10是2011年一桩大事件，不仅因为它随着IE9接踵而来，更是因为IE10预览版在测试阶段就已经显现出快速、标准规格的性能了。而且，IE10是配备了Windows 8 tablet OS 操作系统——这标志着微软对开放网页技术的信心，同时也是在向外界表明微软不服输。我坚信对于开放标准的强烈竞争，最大的受益者是用户，因此2011年我个人觉得印象最深刻的就是这件事。

2011年，对我们这个行业而言应该是很值得纪念：未来的应用软件从桌面到浏览器的网页迁移，HTML5正在向世人证明它是跨平台应用开发的最佳选择，重整旗鼓的微软又发布了好的浏览器等等。如果你是网页创建团队的一分子，你不可能不为这些大事件欣喜若狂。我有挖掘新浏览器特征的爱好，通过很多运用尖端及试验性的CSS,HTML和JavaScript的演示，绝对可以满足我们的好奇心。

失望还是有的，比如互联网相关行业的爆发，致使浏览器语言出现越来越多新的规范和特征， 使得一些人变得越发浮躁，缺乏耐心，喜欢走捷径：他们表示不再支持旧的浏览器，或者对不支持相关性能的浏览器不再做过多的演示和范例（当这些浏览器不能执行相关特征时也不会保修）。所以还是期待2012年网站创建的会更好吧。

twitter: @stopsatgreen book: The Book of CSS3

“2011年是设计年。”

Aarron Walter ——《Designing for Emotion》一书作者，MailChimp首席用户体验设计师。
谷歌重新设计了Gmail，阅读器Reader, 谷歌地图Maps, 谷歌搜索Search及其他门户网站，也是第一次看上去是谷歌的设计师而不是工程师影响着这些网站界面的发展。Facebook喜获很多设计人才，在F8研讨会上预先展示了他们以故事为基础的新页面。随着他们收购地理位置共享服务商Gowalla，新的一年Facebook的设计方向无疑会发生潜移默化的改变。去年10月乔布斯的离世对整个设计界影响颇大，让设计师这一角色重新回归世人的视线，重燃了设计师们的创作热情。2011我们铭记设计，2012我们必将大展身手。

twitter: @aarron book: Designing for Emotion

“甚至，还能更好。”

Lea Verou
 ——网页前端技术开发人员，热衷于JavaScript、CSS3技术的开发。同时创立了Fresset公司。
2011年，业界发展不错。响应式网页设计从一个新鲜的酷炫玩意发展到每个网站的必需，CSS大热，CSS和JavaScript预处理变成了主流，新的页面技术最终得以可行，新的应用程序界面使很多不可能成为了可能，过去需要插件或者端代码，现在都不需要了。

然而，令我印象最深刻的还不是个别的技术，而是整个行业的发展蓝图。我们总会开发出新的工具，让我们工作的更好，我认为过去几年特别是2011年，应该是历史上第一次浏览器的激烈竞争吸引了网页开发者的注意，很欣慰的是我们发现竞争的目标不是互相厮杀，而是都在支持开放网页标准。

如果要向网页设计师描述过去二十几年我们的生活，他们应该很难相信。那就让我们停止抱怨，让他们知道我们已经走在了很前端，我们已经做的很好了。甚至，还能更好。请系好安全带，跟着我们一起，因为进步的列车马上就要开动了。

twitter: @leaverou github: LeaVeroue

来源：webdesign
翻译：Viking Wong & Antonia Huang@DamnDigital

我将会从下面几个方面来进行说明：

1.text-indent应用于块级元素

2.text-indent应用于行内元素

3.text-indent应用于替换元素

4.text-indent应用于inline-block元素

5.继承

6.总结

一、text-indent应用于块级元素

text-indent常用于段落首行2字符的缩进。我们先来看一下demo1（所有demo文章最后会提供下载地址）。

各浏览器都可以正常的显示。如图：

我们也可以通过负的text-indent来制作一些效果，各浏览器表现相同（demo2）：

二、text-indent应用于行内元素

这里分两部分来说，一是text-indent应用于块级元素，块级元素里面有inline元素（通过继承或者指定text-indent），直接上demo3。

可见行内元素，虽然继承了text-indent的值（或者指定），却没有任何作用。

二是inline元素直接指定text-indent的值，或者块级元素不指定text-indent，而里面的inline元素指定。请看demo4。

chrome14、firefox7、opera10.6、safari5、ie8、ie9表现如下：

ie6/7表现如下：

比较一下，chrome14、firefox7、opera10.6、safari5、ie8没有作用于inline元素，但ie6/7却作用于inline元素，而且用于inline元素上，不同的条件表现也不同。

直接用于inline元素上：前面有32px的空白

块级元素不设置text-indent，而inline元素设置（inline前有文字）：text-indent不会作用于inline元素。

块级元素不设置text-indent，而inline元素设置（inline前木有文字）：text-indent会作用于inline元素，且与demo中设置的相同2em（24px，文字大小为12px）。

三、text-indent应用于替换元素

这里以应用到image与input元素为例进行说明，请看demo5。

chrome14、firefox7、opera10.6、safari5中的表现：没有作用于image，但却作用于了input，且中英文没有区别。

ie6/7中的表现：作用于image，且在input中，当为中文与英文时有不同的表现，从这点真不得不佩服ie6/7。还有更加有趣的，当你在全英文的输入框中改它的值时，又会有新的表现。

改变英文输入框的值后：

ie8、ie9中，没有作用于image，但却作用于了input，而且与ie6/7一样，英文与中文有上述的小bug。

改变英文的输入框的值后：

四、text-indent应用于inline-block元素

直接看demo6吧，结果说明一切（chrome14、firefox7、opera10.6、safari5、ie8、ie9中的表现）。

text-indent作用于inline元素

ie6/7的表现（作用于inline-block元素，而且前面多了32px）：

五、继承

text-indent这个属性是可以继承的，引用权威指南上的一句话“在css2.1之前，text-indent总是继承计算值，而不是声明值。”。请看demo7。

非ie系列浏览器继承的均是计算值。

ie系列继承的却是声明值。

如果将父元素中的text-indent:2em;改成text-indent:28px，就不会有这个问题。

六、总结

看到这么多的不同点，您是不是感觉到很乱？如果你觉得不乱，那好，你是一牛人。不管你乱不乱，反正我是乱了。

所以，我给自己总结了一下：

1.text-indent只用于div，p这样的元素上，像image、input、inline-block、inline元素绝对不用。

2.text-indent的值如果子元素也要用到父元素的值，用px单位，而绝不用em。

最后，还是要说一下，本人水平有限，如有什么不当之处还请多指正。

最后附上所有demo下载地址：text-indent

本文作者：火柴

文章来源：携程UED

Firebug：

Firebug 是firefox中最为经典的开发工具，可以监控请求头，响应头，显示资源加载瀑布图：

HttpWatch ：

httpwatch 功能类似firebug，可以监控请求头，响应头，显示资源加载瀑布图。但是httpwatch还能显示GZIP压缩信息，DNS查询，TCP链接信息，个人在监控http请求比较喜欢使用httpwatch，httpwatch包含IE和firefox插件。不过httpwatch专业版本是收费的，免费版本有些功能限制。

DynaTrace‘s Ajax Edition：

dynaTrace 是本人常使用的1个免费工具，该工具不但可以检测资源加载瀑布图，而且还能监控页面呈现时间，CPU花销，JS分析和执行时间，CSS解析时间的等。

Speed Tracer：

speed trace 是google chrome的1个插件，speed trace的优势点是用于监控JS的解析执行时间，还可以监控页面的重绘、回流，这个还是很强的（dynaTrace也能有这个功能）。 注：安装这个插件，需要安装 Google Chrome Developer Channel 版本，但是这个链接的地址在国内好像打不开，如果打不开，请大家直接到这个地址去下载：

http://www.google.com/chrome/eula.html？extra=devchannel

Page Speed ：

Page speed 是基于firebug的1个工具，主要可以对页面进行评分，总分100分，而且会显示对各项的改进意见，Page Speed也能检测到JS的解析时间。

yslow ：

yslow跟pge speed一样是基于 firefox\firebug的插件，功能与page speed类似，对各种影响网站性能的因素进行评分，yslow是yahoo的工具，本人也一直在使用，推荐一下。

webpagetest ：

webpagetest 是1个在线进行性能测试的网站，在该网站输入你的url，就会生成1个url加载的时间瀑布图，对所有加载的资源（css，js，image等等）列出优化的清单，也是非常好用的工具。

文章来源：www.blogjava.net/bearrui/

$_SERVER['PHP_SELF'] #当前正在执行脚本的文件名，与 document root相关。

$_SERVER['argv'] #传递给该脚本的参数。

$_SERVER['argc'] #包含传递给程序的命令行参数的个数（如果运行在命令行模式）。

$_SERVER['GATEWAY_INTERFACE'] #服务器使用的 CGI 规范的版本。例如，”CGI/1.1″。

$_SERVER['SERVER_NAME'] #当前运行脚本所在服务器主机的名称。

$_SERVER['SERVER_SOFTWARE'] #服务器标识的字串，在响应请求时的头部中给出。

$_SERVER['SERVER_PROTOCOL'] #请求页面时通信协议的名称和版本。例如，”HTTP/1.0″。

$_SERVER['REQUEST_METHOD'] #访问页面时的请求方法。例如：”GET”、”HEAD”，”POST”，”PUT”。

$_SERVER['QUERY_STRING'] #查询（query）的字符串。

$_SERVER['DOCUMENT_ROOT'] #当前运行脚本所在的文档根目录。在服务器配置文件中定义。

$_SERVER['HTTP_ACCEPT'] #当前请求的 Accept： 头部的内容。

$_SERVER['HTTP_ACCEPT_CHARSET'] #当前请求的 Accept-Charset： 头部的内容。例如：”iso-8859-1，*，utf-8″。

$_SERVER['HTTP_ACCEPT_ENCODING'] #当前请求的 Accept-Encoding： 头部的内容。例如：”gzip”。

$_SERVER['HTTP_ACCEPT_LANGUAGE']#当前请求的 Accept-Language： 头部的内容。例如：”en”。

$_SERVER['HTTP_CONNECTION'] #当前请求的 Connection： 头部的内容。例如：”Keep-Alive”。

$_SERVER['HTTP_HOST'] #当前请求的 Host： 头部的内容。

$_SERVER['HTTP_REFERER'] #链接到当前页面的前一页面的 URL 地址。

$_SERVER['HTTP_USER_AGENT'] #当前请求的 User_Agent： 头部的内容。

$_SERVER['HTTPS'] ― 如果通过https访问，则被设为一个非空的值（on），否则返回off

$_SERVER['REMOTE_ADDR'] #正在浏览当前页面用户的 IP 地址。

$_SERVER['REMOTE_HOST'] #正在浏览当前页面用户的主机名。

$_SERVER['REMOTE_PORT'] #用户连接到服务器时所使用的端口。

$_SERVER['SCRIPT_FILENAME'] #当前执行脚本的绝对路径名。

$_SERVER['SERVER_ADMIN'] #管理员信息

$_SERVER['SERVER_PORT'] #服务器所使用的端口

$_SERVER['SERVER_SIGNATURE'] #包含服务器版本和虚拟主机名的字符串。

$_SERVER['PATH_TRANSLATED'] #当前脚本所在文件系统（不是文档根目录）的基本路径。

$_SERVER['SCRIPT_NAME'] #包含当前脚本的路径。这在页面需要指向自己时非常有用。

$_SERVER['REQUEST_URI'] #访问此页面所需的 URI。例如，”/index.html”。

$_SERVER['PHP_AUTH_USER'] #当 PHP 运行在 Apache 模块方式下，并且正在使用 HTTP 认证功能，这个变量便是用户输入的用户名。

$_SERVER['PHP_AUTH_PW'] #当 PHP 运行在 Apache 模块方式下，并且正在使用 HTTP 认证功能，这个变量便是用户输入的密码。

$_SERVER['AUTH_TYPE'] #当 PHP 运行在 Apache 模块方式下，并且正在使用 HTTP 认证功能，这个变量便是认证的类型。