随网之舞

HTML5@电子商务.com

秦歌 — Sat, 18 Jun 2011 19:50:52 +0000

经过2009到2010年全球领先的互联网企业Google、Apple、Facebook等等在HTML5上的大力推进和应用，今年在国内业界开始真正地热起来，4.10 QConBeijing2011的12个专题之一就是HTML5开发平台，4.18 由W3CTech主办的“拥抱HTML5” 又是国内业界另一个顶级的HTML5大会，这次的HTML5 in China是今年第3个关于HTML5的国内业界顶级会议，还有即将到来的7.9 D2前端技术论坛也将会有部分HTML5相关的内容。在这么短的时间内国内组织了这多次和HTML5相关的大规模顶级会议，几乎涉及到国内所有最领先的互联网企业，从中可以看出HTML5的热度。

HTML5引起业界如此重视这是好事，但短时间内过热反而说明了业界对于HTML5的理解程度不够，这点和2005年言必称标准和ajax非常类似，等大家真正对标准和ajax深刻理解并应用到生产实践的时候反而在谈论的是利用标准和ajax成就了某项产品而不仅仅是技术本身，HTML5也正经历这样一个过程。现在最热的讨论之一就是在移动平台上使用原生开发还是使用HTML5，如果只是讨论两者的技术优势这个问题估计永远没有答案，因为我们的目标真的不是那种技术更好，而是哪种技术更能适合我们用来快速的解决用户的需求，一个复杂游戏比如极品飞车当然用HTML5来做当然不是最佳的方案，但类似Google Reader之类数据展现性和简单交互的应用当然用HTML5开发比较好，其实如果你稍加留意就连Apple自己的App Store这个应用的本身就是用HTML5开发的。本次会议前面有两位同学介绍使用phoneGap + HTML5来重构新浪微博的iPad客户端，两个人利用一周的业余时间大致实现了这个iPad客户端的全平台覆盖（Web、Mobile Web、Android、iPhone和iPad），我想新浪微博的同学看到这个应该会有一些不一样的感触吧。

我把这次每张幻灯片要讲的内容都写到幻灯片的注释中，有兴趣的同学可以对照看会更明白一些，同时也在blog中列出每张幻灯片要讲的内容。另外，几乎每张幻灯片的后面都了一两个链接，这些链接很多都非常精彩，强烈推荐大家看看。

HTML5@电子商务.com是我在这次HTML5 in China大会上讲的主题，之前有大量的业界同仁介绍了HTML5的意义和HTML5能够实现的各种很Cool的应用，特别是Mozilla的米嘉代讲的《HTML5 in the wild》让很多人都惊讶于HTML5所能实现的一切，但是可能也有不少人会感觉到这些玩意太炫了，不知道怎么才能和我们的实际结合上，所以会有人说那些酷酷的游戏是浮云，我发现大部分人留下来听非游戏部分也说明了HTML5在非游戏领域的应用是我们更多人面临的问题。我会把口碑和淘宝在HTML5上一些应用案例拿出来和大家交流，基于这些案例来聊聊我们对HTML5的认识和应用，最重要的如何思考落地的然后实现，当然这些经验不是只适合电子商务网站，也适合任何使用HTML5来解决业务问题的场景。
这页就是个人信息，欢迎就任何问题联系我。
HTML5的应用的程度和浏览器的支持程度密切相关的，这个表列出目前主流浏览器各个版本在HTML5 Test得分，全球的占有率和淘宝的占有率。HTML5 Test的满分是400分，而目前得分最高的293，可见实现HTML5已定义的所有标准还需要较长的路要走。
从表中我们还可以从中看出更多很有意思的东西：
1. IE6、IE7、IE8在HTML5标准上的支持的确太差劲了，是大规模应用HTML5的障碍，我们是应该主动推动用户升级了。全球范围内IE6低于3%，IE7低于9%，在美国和欧洲这个值应该更低，这就是为什么Google可以宣布在它的很多新兴业务不支持或有限支持IE6和IE7的原因，利用HTML5开发出优秀的产品，然后适时引导用户升级浏览器的最好方法。
2. 我们更应该看到虽然HTML5是在2004由WHATWG开始孕育，2006年W3C正式启动，但2001年推出的IE6已经支持部分HTML5，这告诉我们HTML5并不是全部是所谓的新技术，它更考虑对现有HTML技术的继承和改进，而很多HTML5技术规范我们早已经在使用，比如HTML5的DTD声明，所以我们很多人很早就在使用HTML5。
3. 淘宝的IE6、IE7、IE8占有率超过80%，整个IE份额接近90%，这主要有两个原因导致淘宝IE份额非常高：
  1. XP操作系统在中国份额依旧80%以上
  2. 电子商务网站最重要的一个环节是支付，而现在的网银绝大部分是只支持IE的，包括和淘宝密切相关的支付宝，虽然已经支持了各大平台的，但其最重要的安全措施电子证书主要还是在IE上使用最多。
4. 淘宝的IE6占有率已经低于40%，这绝对是一个好迹象，从我私下打听的几个数据判断国内IE6平均占有率应该在50%以上，后面会解释为什么会这样。
整个阿里的电子商务交易支付部分主要依赖支付宝，支付宝在不支持浏览器、安装证书等操作上会引导用户升级最新的版本，这非常值得国内的大站点学习。
支付宝在其教显著位置推荐使用IE、Firefox、Chrome、Safari等浏览器最新版本，并提示用户升级浏览器，这是一件非常有意义的事情，好的产品引导用户升级利企利民。不过，这里支付宝可以有一个小改进，那就是不要对XP平台的同学也推荐IE9浏览器，幸好下载链接那边的微软做了判断。
开始学习和应用HTML5，首先会注意到新增了大量的语义化元素，比如
，这些元素的添加正是HTML5务实一种体现，它们都是来自对现实HTML组织形式的抽象提取，但遗憾的是IE6、IE7、IE8不支持这些标签，但开发者是很聪明的，于是有了两种解决方案：
1. John Resig公布了利用JavaScript来实现让IE6-8支持的方法，这种方案比较简单，唯一的缺陷就是必须使用JavaScript，但浏览器可能不支持JavaScript
2. 利用双层标签进行嵌套，这样就不需要考虑是否支持JavaScript了，但代码臃肿，基本上开发人员不太喜欢，所以大部分都使用上一种方案
但我们不能不面对一种现实，那就还是有大量的用户代理禁用JavaScript，当有上亿用户时，这个数量其实是我们无法忽视的。
为什么还有这么多用户禁用JavaScript呢？除了用户通过安全级别进行禁用、杀毒软件禁用之外，还有一个Firefox插件NoScript也需要值得我们注意，一方面它的下载量接近9000万，可见用户数量之大，另外一方面我们在百度上搜索NoScript时，你会发现第一页很多地方介绍NoScript时都提及安全，也就是说用户对JavaScript的恐惧和对安全的担忧才是我们存在大量禁用JavaScript的情况。
淘宝首页在年初升级时引入了HTML5的语义元素，当用户在IE6-8下禁用JavaScript会出现幻灯片上的提示，建议用户开启JavaScript或者访问一个专门定制的不使用HTML5新语义元素的页面，这个看起来是一个不错的解决方案，但就是成本太高。
所以为了避免成本太高，淘宝彩票首页前不久也引入了HTML5语义化元素，就直接告诉禁用JavaScript的用户启用JavaScript，否则没法使用。
我们当然可以把不支持JavaScript的用户看成某个低版本的浏览器用户，比如是IE5.5的用户，我们也可以像强制用户升级一样去强制用户开启JavaScript，这是不同场景的不同选择，所以前面淘宝的选择也是一个可行的方案。在口碑的实践中，尽可能地让用户先用起来是我们的设计原则，所以口碑看重的是：
1. 重点是语义的本身而不仅仅是语义元素，我们不会仅仅为了使用语义元素而引入JavaScript或嵌套标签，采用语义本身的含义来组织我们的代码是关键，所以我们可以更多的去参考HTML5的语义元素和http://schema.org/ 来规划我们的代码结构和命名，这样如果有一天你想转换成HTML5的也是非常简单的。
2. 对JavaScript依赖性很强的项目，可以大胆的使用HTML5语义元素，同时需要对用户进行友好的提示，特别是在安全方面的提示。
3. 不考虑NoScript并不能靠优雅降级一言蔽之，前端工程师有责任和义务去深入思考可访问性问题，虽然两者并不是同一件事。
电子商务网站经过多年的实践总结出主要的用户路径，这些路径的完成率直接关系到整个网站的交易额，所以提升每步的转化率对于电子商务网站来讲至关重要，实现每步之间的转化率就是要想办法提升用户的购买效率。这里面有很多事情可以做，比如按照应用购买力的因素来设计页面信息和购买步骤，尽量减少每两步之间的页面数、提升两步之间的速度、减少两步之间的干扰，在完成购买时形成新的购买循环。
在很多情况下，List页到Detail页有很多相似的地方，比如共同的头尾、侧边栏、购物车，如果我们用ajax来替换中间不一样的部分，会减少从List到Detail的时间，提升页面性能，从而提升交易额。Amazon的实践曾表明网站慢100毫秒有1%的人放弃交易。但采用ajax这样做的时候会遇到三个障碍：
1. ajax请求的页面，比如detail页面，怎样定位这个页面的URL
2. 浏览器前进后退的问题
3. 传统页面的和可访问性和SEO问题
应用ajax的这些问题早已经有了比较完美的跨浏览器解决方案，很多JavaScript库或框架都有解决这些问题的组件，twitter就是这方面是个非常好的案例
1. 利用url的hash标签来作为独立的URL，这样可以定位到每个具体页面
2. 利用window.history.hash + iframe来实现浏览器的前进后退
3. 提供强大的API，不存在传统的SEO问题
但twitter的方案并不完全适合传统的页面的渐进增强，传统页面很多时候必须在页面本身考虑SEO问题，以及URL标准问题。比如访问 https://twitter.com/#!/kavenyan 你会看到loading，这是因为需要JavaScript要获取hash值之后才能再次获取对应数据，然后更新到页面上，如果是页面的核心主体内容采用这种方式一直看到loading并不是太友好的事情。

HTML5对history提供了强大的API：histroy.pushState和histroy.replaceState，它们非常简单自然优雅地解决ajax应用遇到的前面两个问题。更重要的是URL不需要借助于URL的hash部分，是一个真正意义上完整的URL，这样就可以很自然地实现对可访问性和传统SEO的保留。所以，当你直接访问从List通过ajax生成的Detail的URL http://waimai.koubei.com/web/takeoutgoodsdetail.html?city=99&offerId=10211200000000191 时会直接出现Detail的主体部份，不会出现任何loading。

这个API的缺点在于只有Chrome、Safari和Firefox4支持，这恰好形成了一个天然的ABTest，我们可以通过统计埋点看看这样做是不是实现了我们的目标增加了转化率。必须牢记，我们的目标不是为了使用某个HTML5技术，而是使用HTML5技术来解决用户的需求。最早使用这个API的知名网站是 http://github.com，在QConBeijing2011上hax提到了这个API，我们看到这个API恰好能解决我们的面临的问题就立即应用了。这个事情告诉我们，我们今天不仅仅是了解HTML5的那些最Cool的应用，还要找到那些适合我们能学以致用的技术，一旦发现我们应该快速的去实践拿出结果，否则再Cool的技术如果不能解决我们的问题，不能解决用户的需求是没有用的。
这里有一些我们已经使用和正在尝试使用的HTML5技术，每项技术的使用都是奔着能解决我们的问题去的，尽量避免为了技术而使用技术。
HTML5和CSS3能够让我们实现很多很Cool的设计，比如圆角，比如倒影。但是有时候你可能会发现，视觉设计师通过PhotoShop之类软件设计的圆角和倒影你很难用HTML5 + CSS3实现，但HTML5 + CSS3 又能很高效的做出类似的事情，这是一个很尴尬的事情吧，所以让交互、让视觉，甚至让运营和产品了解HTML5能干什么非常重要，HTML5 + CSS3 + JavaScript + 浏览器性能的改进将会很快的改变我们的设计模式，为了让更多的上游理解HTML5和CSS3在设计上能做什么，我的同事开发了Chrome插件Code Cola，用它能够非常方便地通过可视化的方式在现在有的页面上实现各种HTML5效果，并能够方便地得到修改后的代码，或者把修改后的页面发给服务器以便其他人协作使用。这个插件本身就是用HTML5 + CSS3 + JavaScript来实现的，我们正在用HTML5来提高我们的效率。
这句话是Jeremy Keith在《HTML5设计原理》中讲的，4月份他也曾亲临W3CTech主办的拥抱HTML5大会向中国的开发者布道，这是一个我认为每个和HTML5应用相关的开发者都应该仔细去品味的演讲，从中我们可以深刻的理解HTML5为什么会变成这样，以后会是什么样，我们应该本着什么样的态度去实践HTML5。我们会使用HTML5不能叫我们创造价值，只有我们用HTML5解决了用户的需求才叫创造价值，这和HTML5的设计原则是一致的。从第1个例子考虑NoScript情况，到第2个例子针对不同浏览器实现不同效果，到第3个例子为设计师开发HTML5 + CSS3的可视化工具，都是在遵循这个原则基础上去实现的，实际上我们可以做的更多。
这些口碑在实践HTML5时的一些心得：
1. 前端技术开发都是在渐进增强和优雅退化间做平衡，这不仅仅体现在某个具体的技术应用上，也体现在整个设计的思想和开发流程上，我所举的例子也都是在做这两者的平衡。
2. HTML5并不是新兴的技术，但是由于各个浏览器支持的不同，我们必须面对残酷的现实，针对某个具体的问题的跨浏览器解决方案都很多种，比如探测浏览器是否支持HTML5某个属性的库 Modernizr上有个wiki页就收集了特别多的全球开发者解决HTML5跨浏览器问题的方案。我们完全可以站在全球开发者的肩上高效的使用HTML5来解决用户的需求，同时通过具体业务挖掘出新的解决方案贡献给社区。通常，应用HTML5并不仅仅是前端工程师的事情，需要整个设计和研发团队都所有了解，这样才能把技术利用到极致，为用户创造最大价值。
3. Douglas Crockford曾说过ajax导致web page成为web application，实际上从2005年到现在虽然有这个趋势，但是还是不足够明显，随着HTML5的出现，从元素的规划到API的设计，都标志着Web App时代的带来，这恰好和手机App的时代同步。Web App的出现导致了我们需要更多的思考设计与技术的结合，单纯的先设计页面再开发页面的时代很快要过去了，我们需要把页面的设计和开发结合起来，这将会对我们的交互设计、视觉设计和前端开发带来很大的挑战和机遇，我们应该从现在探索，要知道如果按照运营、产品、交互、视觉、前端、后端、测试这种研发方式是不可能出现Google Maps、Gmail、Facebook、Twitter等等的。
4. 我们面对大量基于HTML5新且Cool的应用，但是有时又会感觉离我们有点远，作为前端开发工程师应该理解业务，对业务的未来有所判断，那么我们就能够用HTML5来解决我们的用户问题，而不是为了使用HTML5来进行某些开发。我们必须用成功的案例来证明HTML5可以做什么？我们不仅仅应该出现的是技术热，更应该出现的是产品热，每个新的产品出现才是真正解决用户需求而具备非常大的意义。利用HTML5做出成功的产品是最好的布道方式。
“一次编写，随处运行”曾经是Java的梦想，也是开发者的梦想，这样开发者可以把更多的时间放在解决用户的需求上，而不是机器和软件的兼容性上，现在HTML + CSS + JavaScript差不多快做到了，如果我们不能用这些技术满足用户的需求，让我们的用户感觉到Cool，那么满足开发者的梦想就会变得意义没有那么大了，这就是HTML5的设计思想，也应该是我们每个程序员的追求。

最后，把这个幻灯片献给口碑网。

正则表达式字面量在ECMAScript5中的变化

秦歌 — Wed, 11 May 2011 15:48:59 +0000

在《JavaScript语言精粹》的第72页有这样一段：

用正则表达式字面量创建的RegExp对象来共享同一个单实例：
function make_a_matcher(  ) {
    return /a/gi;
}

var x = make_a_matcher(  );
var y = make_a_matcher(  );

// 注意：x 和 y 是同一个对象！

x.lastIndex = 10;

document.writeln(y.lastIndex);    // 10

当你在浏览器中运行这段代码时，你会发现IE6-IE9、FireFox4、Chrome10、Safari5输出都是0，Firefox 3.6.16输出是10，原因可以在ECMAScript5规范第24页和第247页找到：

A regular expression literal is an input element that is converted to a RegExp object (see 15.10) each time the literal is evaluated. Two regular expression literals in a program evaluate to regular expression objects that never compare as === to each other even if the two literals’ contents are identical. A RegExp object may also be created at runtime by new RegExp (see 15.10.4) or calling the RegExp constructor as a function (15.10.3).

7.8.5: Regular expression literals now return a unique object each time the literal is evaluated. This change is detectable by any programs that test the object identity of such literal values or that are sensitive to the shared side effects.

也就是说在ECMAScript3规范中，用正则表达式创建的RegExp对象会共享同一个实例，而在ECMAScript5中则是两个独立的实例。《JavaScript语言精粹》出版时ECMAScript5还没有发布，在这个问题上书和ECMAScript3标准保持了一致。FireFox3.6遵循了ECMAScript3标准，所以结果与书中一致，而最新的Firefox4、Chrome和Safari5都遵循ECMAScript5标准，至于IE6-IE8都没有很好的遵循ECMAScript3标准，不过在这个问题上反而处理对了。很明显ECMAScript5的规范更符合开发者的期望，那就是相同的正则表达式字面量创建独立的RegExp对象会有不同的lastIndex，才方便分别处理。

在ECMAScript5规范的第247页还有两条来说明ECMAScript5和ECMAScript3在正则表达式字面量上的改变：

7.8.5: Edition 5 requires early reporting of any possible RegExp constructor errors that would be produced when converting a RegularExpressionLiteral to a RegExp object. Prior to Edition 5 implementations were permitted to defer the reporting of such errors until the actual execution time creation of the object.
7.8.5: In Edition 5 unescaped “/” characters may appear as a CharacterClass in a regular expression literal. In Edition 3 such a character would have been interpreted as the final character of the literal.

第1个是在ECMAScript5中正则表达式字面量转化为RegExp对象时，任何RegExp构造器的错误都会尽早报告，而在之前的规范中是只有对象创建真正执行时才会报错。

第2个是说在ECMAScript5的正则表达式字面量中，未转义的正斜杠“/”可以直接用在正则表达式字符类中。而在ECMAScript3中它只能作为正则表达式字面量的开始和结束字符。从IE6-IE9、Firefox3.6-Firefox4.0、Chrome和Safari都可以直接把未转义的正斜杠“/”用在正则表达式字符类中。如：

var my_regexp = /([8/5+4]*).{3}/g;
var str = '8/5+4 is what!';

var result = my_regexp.exec(str); // the same in IE6-9,FF3.6-4.0,Chrome,Safari

for(var i = 0,n = result.length; i < n; ++i){
  document.writeln(result[i]);
}
result[0] = 8/5+4 is
result[1] = 8/5+4

在《JavaScript语言精粹》第76页也指明在正则表达式的字符类中使用正斜杠“/”需要转义，也是基于ECMAScript3规范。由于正则表达式中需要转义的特殊字符比较多，当心存疑虑时对任何特殊字符都可以使用反斜杠“\”来使其字面化确保安全，不过这个规则不适宜字母和数字。

正则表达式字面量从ECMAScript3到ECMAScript5的改变也蛮符合HTML5设计原理中提到的2条。一条是“一旦遇到冲突，最终用户优先，其次是作者，其次是实现者，其次标准制定者，最后才是理论上的完满”，另一条是“支持已有内容”。

最后推荐一下XRegExp，它是一个非常优秀的正则表达式JavaScript库，兼容多个主流浏览器、ECMAScript3和ECMAScript5。

如何到达深度？

秦歌 — Tue, 19 Apr 2011 16:20:24 +0000

上周末去上海参加w3ctech.com组织的拥抱HTML5大会，图灵教育赞助了这个会议并搞了个作译者聚会，虽然我还不是她的作译者，但很早有缘与谢工老师和刘江老师认识，所以就去蹭饭了。聚会的惊喜是赠送即将发行的由阮一峰老师翻译并亲笔签名的《黑客与画家》。阮一峰老师的翻译和求知的态度一直令我非常钦佩，看看他关于《黑客与画家》的数篇博文你就会懂的。

阮老师是个视野广博且非常勤奋的作者，其博文基本上每篇必读，其中推荐或引用最多的就是《什么是博士？》，这篇文章不仅仅让我明白了什么是博士，更重要的是让我认识到什么是深度，学会如何形象的解释深度。深度蕴涵了广度，地平面上走一万米容易，爬珠峰8848米不容易，到查林杰海渊更不容易。对于我们来讲，每天的工作中会遇到很多难点，解决这些难点的方法有很多种，可以修改需求避开难点，也可以选择方案绕过难点，还可以稀里糊涂蒙混过关，但心中始终会有很多疑惑点。如果每个月我们拿出一个最有兴趣的疑惑点，找到全世界的行业高手是如何解决这个问题的，那么我们在这个点上的视野就可以达到世界顶级水平了；如果我们再总结一下并应用到实践中去解决对应问题，那么我们在这个点上的解决问题能力差不多达到世界顶级水平了；如果我们能在总结和深度理解的基础上创建更合适的新的解决方案，那么我们在这个点上的认知能力可能已经达到领先世界水平了。如果每年解决10个这种疑惑点，3年时间就可以积累30个疑惑点，当这些点逐渐多起来的时候，某一天我们一定能把这些点可以连成线组成面，那么我们应该就是这个领域的深度专家了。

和阮老师闲聊过程中才了解到阮老师是学金融的并在上海某院校教书，当他告诉我在考虑是否专职搞程序开发时，心里有点小小疑虑，因为从我了解的少量信息来看，阮老师是文科老师且老大不小，翻译过一些IT作品，但涉及到动手开发的不多，感觉还是蛮大挑战的。很巧的是，当我从上海返回杭州的路上看到阮老师最新发表的博文《Dan计划：重新定义人生的10000个小时》，我立即释然了心中的那点小小的疑虑。不知道为什么感觉Dan和心中的阮老师有那么蛮多的相似，老大不小但却心怀梦想，愿意长时间高强度且科学地去坚持去追求梦想，我没有理由不相信这会成功。

如果说《什么是博士？》让我理解了什么是深度，那么《Dan计划：重新定义人生的10000个小时》让我坚信了达到深度的方法，那就是长久坚持且在科学的基础上去实现梦想。梦想对于大部分人来讲就是不可能的事，不可能的事其实就意味着不可能在短时间内简单地努力下就能实现，所以当我们去实现梦想时必须理解暂时没有进展和不做放弃还是有区别的，梦想可能只有一个，但是实现梦想的方案可以有很多个，暂时方案可能不合适，但若时刻坚持，这会让时间和更多人来验证梦想的可行性，也会出现更合理的方案和时机去实现梦想，更可能的是攻克一个个小小的难关。梦想往往就是这样搞出来的，这的确很难几乎不可能，但是我们渴望的就是不可能的事。

或许我们有时感觉到自己坚持梦想却没有结果，与某个不努力的人相比大家都混得差不多，公司或他人也不会有明确的认可。可能1年如此，2年也差不多，但3年、4年、5年、6年，你会发现真的就不一样了。这就是为什么同样是同学或一起入职的同事，为什么刚入职时大家都差不多，而3-5年后大家差距会如此之大的原因。《社交网络》中Mark Zuckerberg的同学问他，历史班上的某个女孩是否有男友时， Mark怒不可遏地说没有人会把是否单身写在头上，但他又立即没有礼貌地跑回宿舍去给Facebook加上会员的情感状态，他穿着拖鞋短裤毫不在意地跑过雪地的场景我记忆犹新。表面上看这是一个关于灵感的故事，实际上更应该是Mark的时刻思考和长时间的坚持与改善。再拿一个老掉牙的例子来说，爱迪生发明电灯用了1年多的时间实验了6千种材料，甚至绝望且无聊到用头发和胡须来做实验，最终找到了竹丝和钨丝，今天我们看到的是爱迪生的某一个时刻点的伟大创新，而回顾那段历史其实是长时间的专注、坚持和不断改善，正如他的名言所说“天才是百分之一的灵感，百分之九十九的汗水”。

可能阮老师都认会认为《Dan计划》这事拉上他有点牵强附会，纯粹扯淡，但对于我来讲这种感觉上的巧合非常有趣，有趣到我不得不把它给记下来。

粟米香菇排骨汤

秦歌 — Sun, 16 Jan 2011 18:24:30 +0000

原料

猪排骨1-2斤
玉米2-3颗
香菇5-10颗
食盐

做法

香菇泡软去蒂，玉米切段备用
排骨焯水，即把排骨丢入烧滚的开水中，去血泡和腥臊味
排骨过冷河，即捞出排骨用冷水冲洗之
汤锅中加足量的冷水，然后放入排骨、香菇和玉米，旺火烧之
待汤水沸腾后，转文火炖之
大概1个小时左右，加入适当食盐即可开吃了

注意

这是一道粤式靓汤，做法简单保持食材的原汁原味，而在粤语中把玉米叫粟米，这就是菜名用粟米的原因
干香菇需要泡的时间较长，一般都需要提前泡之
玉米忌和田螺同食，否则会中毒；玉米不宜与牡蛎同食，否则会阻碍锌的吸收。

营养

猪排骨有丰富的钙质可维护骨骼健康；具有滋阴润燥、益精补血的功效，适宜于气血不足，阴虚纳差者。
玉米具有益肺宁心，健脾开胃，防癌，降胆固醇，健脑之功效；玉米中的纤维素含量很高，具有刺激胃肠蠕动、加速粪便排泄的特性，可防治便秘、肠炎、肠癌等。
香菇具有高蛋白、低脂肪、多糖、多种氨基酸和多种维生素的营养特点；香菇中有一种一般蔬菜缺乏的麦淄醇，它可转化为维生素D，促进体内钙的吸收，并可增强人体抵抗疾病的能力。正常人吃香菇能起到防癌作用。香菇中含腺瞟吟、胆碱、酪氨酸、氧化酶以及某些核酸物质，能起到降压、降胆固醇、降血脂的作用，又可预防动脉硬化、肝硬化等疾病。

枸杞猪肝菠菜粥

秦歌 — Sun, 02 Jan 2011 17:06:13 +0000

原料

枸杞，别名红果子
猪肝
菠菜，别名菠棱、赤根菜、波斯草、鹦鹉菜
大米，生姜，香葱，食盐

做法

大米洗净加足量的水开熬
枸杞用水泡开，生姜切成姜丝，香葱切成葱花，
菠菜洗净，切成段，然后用开水过一下捞出
猪肝切薄片，过热水，去血泡
当粥煮滚后，改成小火熬粥
粥差不多好了，放入枸杞、姜丝、葱花和猪肝薄片
等猪肝差不多了，就放入菠菜和适量的盐，微微一熬就可以出锅了。

注意

菠菜中含有的草酸，它不仅具有涩味，还容易导致钙流失产生泌尿系结石。在吃菠菜前，可先用开水烫一下或用水煮一下，然后再凉拌、炒食或做汤，这样既可保全菠菜的营养成分，又除掉了80%以上的草酸。所以菠菜不宜与含钙丰富的豆类，豆制品类及木耳，虾米，海带，紫菜等到食物同时烧。
菠菜，肠胃虚寒腹泻者少食，肾炎和肾结石患者不宜食。
猪肝过开水时，不要用水煮，避免猪肝过老，同样把猪肝放入粥中煮的时间也不宜过长，但也不能过短，至少猪肝变成灰褐色，看不到血丝才好。
猪肝忌与鱼肉、雀肉、荞麦、菜花、黄豆、豆腐、鹌鹑肉、野鸡同食；不宜与豆芽、辣椒、毛豆、山楂等富含维生素C的食物同食；动物肝不宜与维生素C、抗凝血药物、左旋多巴、优降灵和苯乙肼等药物同食。
枸杞，外邪实热，脾虚有湿及泄泻者忌服。

功效：

枸杞：滋补肝肾，益精明目。用于虚劳精亏，腰膝酸痛，眩晕耳鸣，内热消渴，血虚萎黄，目昏不明。
猪肝：补肝明目，养血。用于血虚萎黄、夜盲、目赤、浮肿、脚气等症。
菠菜：补血止血，利五脏，通血脉，止渴润肠，滋阴平肝，助消化。主治高血压，头痛，目眩，风火赤眼，糖尿病，便秘等病症。
生姜：发汗解表，温中止呕，温肺止咳，解毒的功效。

在服务端合并和压缩JavaScript和CSS文件

秦歌 — Mon, 07 Jun 2010 17:50:57 +0000

Web性能优化最佳实践中最重要的一条是减少HTTP请求，它也是YSlow中比重最大的一条规则。减少HTTP请求的方案主要有合并JavaScript和CSS文件、CSS Sprites、图像映射（Image Map）和使用Data URI来编码图片。CSS Sprites和图像映射现在已经随处可见了，但由于IE6和IE7不支持Data URI以及性能问题，这项技术尚未大量使用。目前大部分网页中的JavaScript和CSS文件数量和开发时一致，少量的网页会根据实际情况采取本地合并，这些合并中相当多的是有选择地手动完成，每次新的合并都需要重新在本地完成并上传到服务器，比较的随意和繁琐，同样文件的压缩也有类似的情况。而利用服务端的合并和压缩，我们就可以按照开发的逻辑尽可能让文件的颗粒度变小，利用网页中URL的规则来自动实现文件的合并和压缩，这会相当的灵活和高效。

YUI Combo Handler

2008年7月YUI Team宣布在YAHOO! CDN上对YUI JavaScript组件提供Combo Handler服务。Combo Handler是Yahoo!开发的一个Apache模块，它实现了开发人员简单方便地通过URL来合并JavaScript和CSS文件，从而大大减少文件请求数。比如在页面上使用YUI2的Rich Text Editor组件需要引入多个JavaScript文件，常用方式如下：

而使用Combo Handler服务之后，则上述的代码可以写为：

除了代码的可读性稍稍有一点点降低外，使用Combo Handler服务大大的降低了HTTP请求数，同时也减少了URL代码量，这对于Web性能优化来讲至关重要。所以，随后YUI从2.6.0开始，其核心组件YUI Loader内置了Combo Handling功能，即使用YUI Loader时，通过配置combine属性就可以把要加载的多个JavaScript或CSS文件按照使用Combo Handler服务的形式合并起来，这时只要静态文件的服务器支持Combo Handler就行了。在YUI中当combine配置为true时，CDN默认是使用Yahoo! CDN（http://yui.yahooapis.com），所以没有任何问题。这正是YUI最迷人的地方之一。

遗憾的是http://yui.yahooapis.com在中国的速度并不佳，本来中国雅虎提供了http://cn.yui.yahooapis.com/ ，但尚未提供Combo Handler服务，同时因种种原因，其更新在YUI 2.7.0之后就停滞了。更糟糕的是Yahoo!开发的支持Combo Handler的Apache模块虽然据传有计划开源，但至少现在依旧是私有技术，要使用就需要自己实现类似功能，所以国内类似技术的应用并不太多。

Minify

在Google Code上有一个PHP的开源项目叫Minify，它可以合并、精简、Gzip压缩和缓存JavaScript和CSS文件。其文件合并功能就非常类似Combo Handler，只不过URL的语法稍微有点不同。如果Yahoo! CDN安装了Minify，那么上面Rich Text Editor的代码用Minify的默认格式来写就是：

本地使用Minify很简单，只需要Apache + PHP环境就OK了：

安装好Apache + PHP (Windows、Mac)。
下载Minify源码，解压，然后把min文件夹复制到指定的根目录下，比如localhost。这时URL的写法大概是http://localhost/min/f=...
启用Apache的Mod Rewrite模块，然后在min文件夹下新建.htaccess文件，并添加如下Rewrite规则：
```
RewriteEngine on

# You may need RewriteBase on some servers
# 如果做了所有的开启Mod Rewrite的设置依旧无效，请城市尝试启用下面这句
#RewriteBase /min

# rewrite URLs like "/min/f=..." to "/min/?f=..."
RewriteRule ^([bfg]=.*)  index.php?$1 [L,NE]
```
如果不启用Mod Rewrite功能，则Minify的URL会类似http://localhost/min/index.php?f=…，这对客户端和中间服务器的缓存不利，而启用了Mod Rewrite之后的URL类似http://localhost/min/f=…，不仅解决前面问题且更短。

配置Minify，即编辑min/config.php文件

$min_enableBuilder = true;
//本地使用时可以通过http://dwn/min/builder/来进行配置，外部使用时请设置为false

//$min_cachePath = 'c:\\WINDOWS\\Temp';
//$min_cachePath = '/tmp';
//$min_cachePath = preg_replace('/^\\d+;/', '', session_save_path());
//选择其一，去掉注释设置临时缓存目录，这样可以减少程序运算提高性能

$min_serveOptions['maxAge'] = 1800;
//设置浏览器缓存的时间，为了提升性能建议这个时间设置尽可能的长，比如315360000
//如果需要在不改变URL的情况下更新静态文件，可以采用类似时间戳的方式，
//如http://localhost/min/f=example/example.css&20100601.css
//建议静态文件采用版本号管理，每次修改都需要升级版本号，这样就无需时间戳了，
//如http://localhost/min/f=example/example_1_0_1.css

$min_serveOptions['minApp']['maxFiles'] = 10;
//参数f获取参数的个数，即合并的文件个数，这个数量完全可以增大，比如50，
//当然可能会遇到URL最大值问题，后会有解释

$min_documentRoot = '';
//$min_documentRoot = substr(__FILE__, 0, strlen(__FILE__) - 15);
//$min_documentRoot = $_SERVER['SUBDOMAIN_DOCUMENT_ROOT'];
//当$min_documentRoot为空时，其值就是$_SERVER['DOCUMENT_ROOT']，
//但合并的文件不在$_SERVER['DOCUMENT_ROOT']下，会导致400错误，
//这个时候可以启用第2行或第3行

使用Minify
比如，有两个JavaScript文件，http://localhost/example/a.js,http://localhost/example/b.js，那么使用Minify合并的URL是http://localhost/min/f=/example/a.js,/example/b.js，直接把这个URL放到页面中就可以使用了。

实际上Minify不仅仅实现了合并功能，同时默认在合并的同时还会对文件进行精简压缩，如果你在本地本身就对文件进行压缩了，比如使用YUI Compressor，那么可以在config.php中进行如下设置取消Minify的压缩以提升性能：

$min_serveOptions['minifiers']['application/x-javascript'] = '';
$min_serveOptions['minifiers']['text/css'] = '';

如果服务端支持Java，那么也可以对Minify进行简单配置而实现利用YUI Compressor压缩JavaScript和CSS文件。

直接在服务端进行合并和压缩，这非常的灵活，也极大的减轻了前端开发成果的部署过程，真使事半功倍。更多配置请看Minify CookBook和Wiki

小提示：Minify使用的New BSD License，这就意味着使用者可以几乎自由的使用该代码。BSD协议鼓励代码共享，但需要尊重代码作者的著作权。BSD由于允许使用者修改和重新发布代码，也允许使用或在BSD代码上开发商业软件发布和销售，因此是对商业集成很友好的协议。而很多的公司企业在选用开源产品的时候都首选BSD协议，因为可以完全控制这些第三方的代码，在必要的时候可以修改或者二次开发。更多中文信息请看《BSD协议》。

在YUI3中使用Minify

在YUI2中，合并机制只支持库本身的文件，自定义的文件会单独一一加载。从YUI3开始，模块变得更小，这样就导致使用合并时URL会变长，但在IE下URL的最大值是2083，Apache默认的URL最大值是8192，所以当URL在对应浏览器下超出最大值时，YUI3会自动根据浏览器判断进行拆分成多个合并的URL，并且还提供了maxURLLength来设置最大值。而从YUI3.1.0开始，不仅仅支持自定义文件的合并，还支持可以使用多个提供合并服务的CDN，即可以对YUI组件使用http://yui.yahooapis.com这个CDN，其余文件使用其他支持合并的CDN，这样非常的实用、方便和灵活。示例在YUI3中使用Minify就说明了这点。

由于YUI默认URL的合并形式和Minify的不相同，所以在YUI实例化时需要利用正则替换来实现YUI3支持Minify的URL合并形式，但这种方式既不灵活，且有风险，不友好又效率低。比较简单的方式是直接修改YUI 3的源码，如示例在修改后的YUI3中使用Minify。同时，YUI 3.1.*的版本有一个bug，即同时合并JavaScript和CSS时，较短的那个URL结尾处多一个&符号，如示例在YUI3中使用Minify中：

http://yui.yahooapis.com/combo?3.1.1/build/widget/assets/skins/sam/widget.css&
3.1.1/build/console/assets/skins/sam/console.css&

http://dancewithnet.com/min/b=yui&f=3.1.1/tabview/assets/skins/sam/tabview.css&

这两种都可以使用，虽然在早期的IE浏览器版本（如IE6）中会有无法解析的风险，且影响某些特定情况下的缓存，但当使用修改后的YUI时，合并的URL变成类似/min/b=yui&f=3.1.1/tabview/assets/skins/sam/tabview.css,的样子，就会出现bug了。对于YUI的Combo Handler来说这是一个小bug，所以YUI3把这个bug设置为P5。但当我们改造YUI3来更好的支持Minify时，还要解决这个问题，具体方案请看示例在修改后的YUI3中使用Minify。

在CDN上使用Minify

CDN的全称是Content Delivery Network，即内容分发网络。其最常应用就是通过位于不同地理位置的服务器把静态资源部署到用户最近的边缘，这样能有效解决Web服务中大量静态资源的速度和性能问题。由于实施成本比较高，所以在实际的应用中，大型公司一般会组建自己的CDN，而小型公司只能租借第三方的CDN，但不管怎样这两种方式都不会影响在服务端实施合并和压缩程序。一般情况下，静态资源也并不是直接上传到CDN，而是先传到一台后台服务器，然后各地CDN的前端Cache服务器按需索取。YUI CDN的Combo Handler就是部署在其后台服务器上的，Minify也应如此。简单图示如下：

当一个资源请求到CDN时，CDN会先检查本地是否存在这个资源，如果有则会直接返回该资源，如果没有则会请求其后台服务器，后台服务器会依据资源URL的信息进行相应的处理，然后返回给CDN，CDN就会存储这个资源，再次出现这个资源请求时就无需请求后台服务器了。所以，虽然合并特别是压缩JavaScript和CSS文件是消耗时间的，但是由于只需要第一次，并且第一次基本上由我们自己访问掉（我们可以创建程序自动进行一次访问来保证，实际上图片优化也可以采用这种方式），所以基本上很安全。这正是目前在口碑网实施的JavaScript和CSS合并方案，在第4届D2的《前端性能优化和自动化》中也介绍了它。

启用Mod Rewrite和.htaccess

秦歌 — Sat, 29 May 2010 12:09:43 +0000

Apache的Mode Rewrite模块提供了一个基于正则表达式分析器的重写引擎来实时重写URL请求。在大多数情况下，它和.htaccess文件配合使用。比如本篇文章的URL（http://dancewithnet.com/2010/05/29/making-mod-rewrite-and-htaccess-work-on-mac-os-x）就是Wordpress配合Mod Rewrite模块和.htaccess文件一起实现的，即所谓的固定链接（Permalinks）。

Windows

在Windows下，我们一般使用的是Administrator账号，所以启用这两项非常简单：

在[Apache安装目录]/conf/httpd.conf中找到#LoadModule rewrite_module modules/mod_rewrite.so，去掉前面的注释符号#。如果没有这行，请添加。并确认apache安装目录下的modules文件夹中是否有mod_rewrite.so这个文件。这样就启用了Mod Rewrite功能。
在[Apache安装目录]/conf/httpd.conf中找到
```
    Options FollowSymLinks
    AllowOverride None
    Order deny,allow
    Deny from all
```
把“AllowOverride None”改成“AllowOverride All”，这样所有的文件夹都支持.htaccess了，或者针对指定的文件夹启用.htaccess，可以在[Apache安装目录]/conf/httpd.conf中加入
```
    Options Indexes FollowSymLinks
    AllowOverride All
    Order allow,deny
    Allow from all
```
这种做法一般是和虚拟主机配置在一起的，所以大多数会把上述配置代码写入[Apache安装目录]/conf/extra/httpd-vhost.conf中，这样比较清晰易于管理。
重启Apache后，就ok了。

完成上诉步骤后，在Wordpress的固定链接中使用除默认外的链接设置，Wordpress会直接在其安装目录中生成对应的.htaccess，这样就可以使用设置的链接形式了。

Mac OS X

在Mac OS X中一般不使用root账号，而是通过sudo来获得root相关权限。一般情况下，我们把网站文件放在个人目录下，比如~/Sites，这样就涉及到Mac OS的权限管理，相对于Windows来说复杂不少。

在终端运行sudo vi /etc/apache2/httpd.conf，找到#LoadModule rewrite_module modules/mod_rewrite.so，去掉前面的注释符号#。

运行sudo vi /etc/apache2/extra/httpd-vhost.conf，加入


    Options Indexes FollowSymLinks MultiViews
    AllowOverride All
    Order allow,deny
    Allow from all

这样整个~/Sites都可以支持.htaccess。

运行 sudo vi /Private/etc/apache2/users/[用户名].conf，把其中的AllowOverride None改成AllowOverride All。需要注意的是，以前的Mac OS X版本，路径可能是/private/etc/httpd/users/[用户名].conf
在需要的目录新建.htaccess，并修改其权限为777，此处依旧以使用Wordpress的固定链接为例。
```
cd ~/Sites/Wordpress
touch .htaccess
chmod 777 .htaccess
```
新建文件的权限默认是644，通过ls -l .htaccess就可以看到，此时程序无法自动写入.htaccess，这种情况比较安全，但是需要手动写入。
退出后重启Apache：sudo apachectl restart

完成上述设置之后，就可以使用Wordpress的固定链接功能了。需要注意的是，如果.htaccess是从Windows下直接复制过来，日志中可能会出现 without matching section的报错。简单的解决方案就是新建文件，重新复制粘贴。

在Mac OS X中配置Apache ＋ PHP ＋ MySQL

秦歌 — Sat, 08 May 2010 18:37:27 +0000

Mac OS X 内置了Apache 和 PHP，这样使用起来非常方便。本文以Mac OS X 10.6.3为例。主要内容包括：

启动Apache

有两种方法：

打开“系统设置偏好（System Preferences）” -> “共享（Sharing）” -> “Web共享（Web Sharing）”
打开“终端（terminal）”，然后（注意：sudo需要的密码就是系统的root帐号密码）
1. 运行“sudo apachectl start”，再输入帐号密码，这样Apache就运行了。
2. 运行“sudo apachectl －v”，你会看到Mac OS X 10.6.3中的Apache版本号：
```
Server version: Apache/2.2.14 (Unix)
Server built:   Feb 11 2010 14:40:31
```

这样在浏览器中输入“http://localhost”，就可以看到出现一个内容为“It works!”的页面，它位于“/Library（资源库）/WebServer/Documents/”下，这是Apache的默认根目录。

注意：开启了Apache就是开启了“Web共享”，这时联网的用户就会通过“http://[本地IP]/”来访问“/Library（资源库）/WebServer/Documents/”目录，通过“http://[本地IP]/~[用户名]”来访问“/Users/[用户名]/Sites/”目录，可以通过设置“系统偏好设置”的“安全（Security）”中的“防火墙（Firewall）”来禁止这种访问。

运行PHP

在终端中运行“sudo vi /etc/apache2/httpd.conf”，打开Apache的配置文件。（如果不习惯操作终端和vi的可以设置在Finder中显示所有的系统隐藏文件，记得需要重启Finder，这样就可以找到对应文件，随心所欲编辑了，但需要注意的是某些文件的修改需要开启root帐号，但整体上还是在终端上使用sudo来临时获取root权限比较安全。）
找到“#LoadModule php5_module libexec/apache2/libphp5.so”，把前面的#号去掉，保存（在命令行输入:w）并退出vi（在命令行输入:q）。

运行“sudo cp /etc/php.ini.default /etc/php.ini”，这样就可以通过php.ini来配置各种PHP功能了。比如：

;通过下面两项来调整PHP提交文件的最大值，比如phpMyAdmin中导入数据的最大值
upload_max_filesize = 2M
post_max_size = 8M
;比如通过display_errors来控制是否显示PHP程序的报错
display_errors = Off

运行“sudo apachectl restart”，重启Apache，这样PHP就可以用了。
运行“cp /Library/WebServer/Documents/index.html.en /Library/WebServer/Documents/info.php”，即在Apache的根目录下复制index.html.en文件并重命名为info.php
在终端中运行“vi /Library/WebServer/Document/info.php”，这样就可以在vi中编辑info.php文件了。在“It’s works!”后面加上“”，然后保存之。这样就可以在http://localhost/info.php中看到有关PHP的信息，比如版本号是5.3.1。

安装MySQL

由于Mac OS X中并没有预装MySQL，所以需要自己手动安装，目前MySQL的最稳定版本是5.1。MySQL提供了Mac OS X下的安装说明。

下载MySQL 5.1。选择合适的版本，比如这里选择的是mysql-5.1.46-osx10.6-x86_64.dmg。
运行dmg，会发现里面有4个文件。首先点击安装mysql-5.1.46-osx10.6-x86_64.pkg，这是MySQL的主安装包。一般情况下，安装文件会自动把MySQL安装到/usr/local下的同名文件夹下。比如点击运行“mysql-5.1.46-osx10.6-x86_64.dmg”会把MySQ安装到“/usr/local/mysql-5.1.46-osx10.6-x86_64”中。一路默认安装完毕即可。
点击安装第2个文件MySQLStartupItem.pkg，这样MySQL就会自动在开机时自动启动了。
点击安装第3个文件MySQL.prefPane，这样就会在“系统设置偏好”中看到名为“MySQL”的ICON，通过它就可以设置MySQL开始还是停止，以及是否开机时自动运行。到这里MySQL就基本安装完毕了。
通过运行“sudo vi /etc/bashrc”，在bash的配置文件中加入mysql和mysqladmin的别名
```
#mysql
alias mysql='/usr/local/mysql/bin/mysql'
alias mysqladmin='/usr/local/mysql/bin/mysqladmin'
```
这样就可以在终端中比较简单地通过命令进行相应的操作，比如安装完毕之后MySQL的root默认密码为空，如果要设置密码可以在终端运行“mysqladmin -u root password "mysqlpassword"”来设置，其中mysqlpassword即root的密码。更多相关内容可以参考B.5.4.1. How to Reset the Root Password。

注意：Mac OS X的升级或者其他原因可能会导致ＭySQL启动或者开机自动运行，在ＭySQL的操作面板上会提示“Warning:The /usr/local/mysql/data directory is not owned by the 'mysql' or '_mysql' ”，或者在命令行下提示“Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)”，这应该是某种情况下导致/usr/local/mysql/data的宿主发生了改变，只需要运行“sudo chown -R mysql /usr/local/mysql/data”即可。

另外，使用PHP连接MySQL可能会报错“Can’t connect to local MySQL server through socket ‘/var/mysql/mysql.sock’”，或者使用localhost无法连接MySQL而需要127.0.0.1，原因是连接时候php默认去找/var/mysql/mysql.sock了，但是MAC版本的MYSQL改动了文件的位置，放在/tmp下了。处理办法是按如下修改php.ini：

mysql.default_socket = /tmp/mysql.sock

使用phpMyAdmin

phpMyAdmin是用PHP开发的管理MySQL的程序，非常的流行和实用。能够实用phpMyAdmin管理MySQL是检验前面几步成果的非常有效方式。

下载phpMyAdmin。选择合适的版本，比如我选择的是phpMyAdmin-3.3.2-all-languages.tar.bz2这个版本。
把“下载（downloads）”中的phpMyAdmin-3.32-all-languages文件夹复制到“/Users/[用户名]/Sites”中，名改名为phpmyadmin。
复制“/Users/[用户名]/Sites/phpmyadmin/”中的config.sample.inc.php，并命名为config.inc.php

打开config.inc.php,做如下修改：

用于Cookie加密，随意的长字符串
$cfg['blowfish_secret'] = ''; 

当phpMyAdmin中出现“#2002 无法登录 MySQL 服务器”时，
请把localhost改成127.0.0.1就ok了，
这是因为MySQL守护程序做了IP绑定（bind-address =127.0.0.1）造成的
$cfg['Servers'][$i]['host'] = 'localhost';

把false改成true，这样就可以访问无密码的MySQL了，
即使MySQL设置了密码也可以这样设置，然后在登录phpMyAdmin时输入密码
$cfg['Servers'][$i]['AllowNoPassword'] = false;

这样就可以通过http://localhost/~[用户名]/phpmyadmin访问phpMyAdmin了。这个时候就看到一个提示“无法加载 mcrypt 扩展，请检查您的 PHP 配置。”，这就涉及到下一节安装MCrypt扩展了。

配置PHP的MCrypt扩展

MCrypt是一个功能强大的加密算法扩展库，它包括有22种算法，phpMyAdmin依赖这个PHP扩展库。但是它在Mac OS X下的安装却不那么友善，具体如下：

下载并解压libmcrypt-2.5.8.tar.bz2。

在终端执行如下命令（注意如下命令需要安装xcode支持）：

cd ~/Downloads/libmcrypt-2.5.8/
./configure --disable-posix-threads --enable-static
make
sudo make install

下载并解压PHP源码文件php-5.3.1.tar.bz2。Mac OS X 10.6.3中预装的PHP版本是5.3.1，而现在最新的PHP版本是5.3.2，你需要依据自己的实际情况选择对应的版本。

在终端执行如下命令：

cd ~/Downloads/php-5.3.1/ext/mcrypt
phpize
./configure
make
cd modules
sudo cp mcrypt.so /usr/lib/php/extensions/no-debug-non-zts-20090626/

打开php.ini

sudo vi /etc/php.ini

在php.ini中加入如下代码，并保存后退出，然后重启Apache

extension=/usr/lib/php/extensions/no-debug-non-zts-20090626/mcrypt.so

当你再访问http://localhost/~[用户名]/phpmyadmin时，你会发现“无法加载 mcrypt 扩展，请检查您的 PHP 配置。”的提示没有了，这就表示MCrypt扩展库安装成功了。

设置虚拟主机

在终端运行“sudo vi /etc/apache2/httpd.conf”，打开Apche的配置文件
在httpd.conf中找到“#Include /private/etc/apache2/extra/httpd-vhosts.conf”，去掉前面的“＃”，保存并退出。
运行“sudo apachectl restart”，重启Apache后就开启了它的虚拟主机配置功能。

运行“sudo vi /etc/apache2/extra/httpd-vhosts.conf”，这样就打开了配置虚拟主机的文件httpd-vhost.conf，配置你需要的虚拟主机了。需要注意的是该文件默认开启了两个作为例子的虚拟主机：


    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "/usr/docs/dummy-host.example.com"
    ServerName dummy-host.example.com
    ErrorLog "/private/var/log/apache2/dummy-host.example.com-error_log"
    CustomLog "/private/var/log/apache2/dummy-host.example.com-access_log" common


    ServerAdmin webmaster@dummy-host2.example.com
    DocumentRoot "/usr/docs/dummy-host2.example.com"
    ServerName dummy-host2.example.com
    ErrorLog "/private/var/log/apache2/dummy-host2.example.com-error_log"
    CustomLog "/private/var/log/apache2/dummy-host2.example.com-access_log" common

而实际上，这两个虚拟主机是不存在的，在没有配置任何其他虚拟主机时，可能会导致访问localhost时出现如下提示：

Forbidden
You don't have permission to access /index.php on this server

最简单的办法就是在它们每行前面加上#，注释掉就好了，这样既能参考又不导致其他问题。

增加如下配置


    DocumentRoot "/Users/[用户名]/Sites"
    ServerName sites
    ErrorLog "/private/var/log/apache2/sites-error_log"
    CustomLog "/private/var/log/apache2/sites-access_log" common

保存退出，并重启Apache。

运行“sudo vi /etc/hosts”，打开hosts配置文件，加入”127.0.0.1 sites“，这样就可以配置完成sites虚拟主机了，这样就可以用“http://sites”访问了，其内容和“http://localhost/~[用户名]”完全一致。

这是利用Mac OS X 10.6.3中原生支持的方式来实现的配置，也可以参考“Mac OS X Leopard: 配置Apache, PHP, SQLite, MySQL, and phpMyAdmin(一) ”和“Mac OS X Leopard: 配置Apache, PHP, SQLite, MySQL, and phpMyAdmin(二) ”。实际上，你还可以使用XAMPP或MacPorts这种第三方提供的集成方案来实现简单的安装和使用。

《高性能网站建设进阶指南》译者序和样章

秦歌 — Wed, 21 Apr 2010 15:30:25 +0000

经过大半年的努力和等待，口碑网前端团队5位成员共同翻译的《高性能网站建设进阶指南（Even Faster Web Sites）：Web开发者性能优化最佳实践》终于面市了。翻译的过程本身就是学习的过程，又经过了在口碑网的实践，我们深刻地感受到本书内容不仅和每个Web开发者的日常工作结合得非常紧密，而且对于每个开发者都有着重大的指导意义。在此，我们诚恳地向所有的Web开发者推荐本书，欢迎大家就本书内容进行交流、批评和指正。

本书的主要作者Steve Souders是《高性能网站建设指南（high Performance Web Sites）：前端工程师技能精髓》的作者，Web性能优化领域的权威，前Yahoo!首席性能工程师，现在Google负责Web性能和开源组织。他是Firebug的性能分析扩展YSlow的创建者，也是O’Reilly Web性能与运作会议Velocity的联合主席。通过他的个人网站http://stevesouders.com/能了解全球最新的Web性能动态和技术发展。

译者序

“信息网络的扩展正在为我们的星球建立一个新的神经系统”，而Web正是我们与这个系统对接的最重要平台。现在，信息与用户量在Web平台上呈爆炸式增长，用户与Web界面的交互越来越复杂，会话时间也越来越长，速度已经成为Web产品使用体验好坏和市场成败的最重要指标之一。在Google，网页呈现速度慢500毫秒将丢失20%的流量；在Yahoo!，慢400毫秒将丢失5%~9%的流量；在Amazon，慢100毫秒将丢失1%的交易量……反之，网站速度越快，越有利于用户汇聚、流量增长及交易量的上升。所以作为Web开发者，我们不会满足现状，要让网页变得更快更好。

本书作者Steve Souders在他上一部震惊业界的大作《高性能网站建设指南》中告诉我们，Web的80%~90%的性能由前端决定，并为提升Web性能设置了14条规则。本书中，Souders与8位Web开发界顶级大牛（Dion Almaer、Douglas Crockford、Ben Galbraith、Tony Gentilcore、Dylan Schiemann、Stoyan Stefanov、Nicole Sullivan 和 Nicholas C. Zakas）通力合作，一起向我们传授让网站速度更快的思想和原则，以及相应的技术和工具。它是上一部作品的进阶之作，如果说上一部作品使Web开发者有机会实现高性能的网站以满足当前用户的需要，那么本书将帮助我们立足现在更着眼于未来，以实现超出用户期望的速度体验。

Web的高速发展让开发者应接不暇，开发者应该把智慧、时间和精力放在用户最需要的地方，因此在做性能优化时不能盲目行动、捉小放大，需要事前有效评估找到重点，事后建立监控和保证机制，把有规律的、重复的、精确的工作交给机器去做。9位大牛把众多的思想、原则、方法和自动化工具融汇到这本书中，让Web开发者有机会站在巨人的肩上，借助于全球业界的最新成果，用自己的智慧、行动和坚持开发出令人赞叹的Web产品来。

如果你稍加留心就会发现，这两本书副标题的变化很有趣，第一本书的副标题是“前端工程师技能精髓”，而本书的是“Web开发者性能优化最佳实践”。Web性能优化不只是前端工程师的工作，而是需要所有Web开发者协作完成。在实际工作中，如果没有人关注Web性能，那么，不管我们作为Web开发者的哪种角色都应该挺身而出勇于担当，不仅要担当建设高速网站的责任，还要担当Web性能优化的布道义务，团结一切可以团结的力量。这是我们所有Web开发者的使命。在口碑网我们已经开始这样做了，前端工程师与对此有兴趣的后端工程师和产品经理一起组建了一个虚拟的Web性能优化团队，在完成工作之余，一起学习、研究、分享、布道和推动性能优化项目。虽然刚刚开始，但是已经有了一些令人欣喜的成果，这就是团结的力量。

本书由口碑网前端团队的鄢学鹍（三七）、郑旭东（正旭）、刘志涛（钨龙）、崔明达（灵佑）和姜凡（展炎）协作译成。翻译的过程也是自我学习、应用实践和总结提升的过程，我们深感本书的博大精深，同时也感到自己知识面的浅薄狭窄。我们把学习和实践本书思想及方法过程中收获的心得和相关资料作为译注补充在译文中，希望会对大家有所帮助。我们深信学习本书正是学习大牛思想、提升专业技能的最好途径之一，把它的精华最精确地传递给每位读者是我们现在的想法和最大动力。

感谢博文视点引进如此高品质的图书，这让中国的Web开发者可以从中受益，进而为更多用户提供更快速的Web使用体验。除了封面上列出的译者外，还有很多人为翻译这本书倾注了智慧和汗水。编辑徐定翔老师，包容了我们交稿的一次次延期，正是由于他的信任、帮助、支持和耐心指导才让我们能有这样一次边学习、边成长、边共享的宝贵经历。编辑白爱萍老师负责译稿的统稿编加，她的专业、仔细和辛勤工作保证了我们阅读本书时的良好体验。可爱的同事林枝萍（般若）、高嘉峻（伯灵）、全鑫（泉心）、闻明（阿苏）、沙峰（善朋）、曾焕数（合沙）、王维锋（元天）、严斌锋（邦彦）、何莹莹（冰浠）、周炼（灵落）等，给了我们热情的建议和细心的校对，有效地提升了本书的品质。要特别感谢淘宝网前端团队的赵泽欣（小马）、王保平（玉伯）和郑叶飞（圆心）3位同学，在百忙之中帮我们校对重要章节，解决疑难问题。如果没有家人和同伴的支持，是很难做好翻译的，在此向所有关心和支持我们的朋友表示衷心的感谢！

口碑网前端团队
三七正旭钨龙灵佑展炎
2010.02.25 于杭州

样章等相关信息

样章：
1. 第1章，理解Ajax性能，Douglas Crockford
2. 第3章，拆分初始化负载，Steve Souders
任何交流、建议、批评和指正请写信给kavenyan@gmail.com
购买《高性能网站建设进阶指南》
《高性能网站建设进阶指南》目录表

豆瓣上的《高性能网站建设进阶指南》
封面：

我的2009@twitter

秦歌 — Sun, 03 Jan 2010 17:05:04 +0000

2009年的最后一顿饭是团队一起吃的，那是一整年笑声最多当然也最快乐的一顿饭，算是对团队一个很好的总结。但每一次个人年终总结貌似都不会按时完成，2009也不例外。

我在去年的总结中说“Blog和Twitter是好东西，它足以记录这变化多端的2008”，而2009年其实有点变化莫测，幸好还是有它们，用Twitter记录和与世界同步，用Blog总结和积累，它们一起去完成互联网上最本质的精神开放与共享。

我是一个对过去时间不太敏感的人，似乎每次回想过去最近几年内的事情在准确时间上总是容易混淆。2009年的最后一天，我翻了翻Twitter，像电影回放一下，看看过去的一年，挺有意思。一年有些事很无聊，有些事注定要埋藏心里，也有些事值得回味、整理和沉积。

有些事关人生

在打破规则之前必须清楚规则是什么 — Robin Williams_2009.01.07
我是边看电影边用Twitter记录有感觉台词，这段说演员的台词和很多人的生活都相似。。。原来，我们都是演员，大家搞一场没有彩排的大戏而已。_2009.01.10
改变能改变的，记住不能改变的，当你走到那个不能改变的背后时，你就能改变它了。_2009.01.15
一旦能够说出什么东西的名字，就会很容易注意到它。你就会掌握它，拥有它，使它在你的掌控之中。_2009.01.19
心态好才能有运气。—《高兴》_2009.02.28
我崇尚可贵的妥协，无论这一妥协在什么时候达成。生活本身就是死亡与生存之间的妥协。我们一生不断地努力，直到伟大的毁灭最终获得胜利。所有的立法、所有的政权和所有的社会都是基于相互礼让的原则形成的，基于礼让原则，一切事物便都有了基础。—-亨利.克莱_2009.03.27
很多时候我们总是，要么是拿别人的优点和自己的缺点比，要么是拿别人的缺点和自己的优点比。于是就有了那么多的没有结果的争吵和辩论。进化论告诉我们不适的物种肯定要灭绝的，即使有时候作为珍惜生物给保留着。_2009.05.05
不要规划你的金钱，但是规划你的时间。不要为了你每天的小平衡而丧失了人生的大平衡。—-卫哲_2009.05.24
理想很丰满，现实很骨感。_2009.08.28
摆脱诱惑的唯一方式就是向它屈服。—-奥斯卡王尔德_2009.10.07

有些事关社会

一个制假男人的自首日记，让我想起在京几年买了数不清的冷饮和速冻水饺，太需要哈维· 华盛顿· 威利了_2009.04.27
术语“MEME”由Richard Dawkins所创，最早出现在他1976年出版的《自私的基因》。作者以及其它的科学家称MEME是某种文化的碎片或者行为，衍生于一个表示”模仿”的希腊语词尾。它描述思想如何模仿基因的习性, 从大脑转变到大脑,而不是从躯体遗传到躯体。 _2009.05.15
Internet上，围墙花园（walled garden）是指一个控制用户对网页内容和服务进行访问的环境。它把用户限制在一个特定的范围内，它允许用户访问指定的内容，同时防止用户访问其他未被允许的内容。尽管它并不能实际的防止用户访问围墙外的东西，但它使访问墙外内容要比内部要难。_2009.05.30
中国的“黑领”是世界上最无耻的群体，挺好的文章，为啥冒名说是郎咸平呢？可惜了。_2009.08.02
2009年10月2日，美国南加州橙县高等法院法官将最终宣判一项未成年人酒醉驾车酿成命案的刑期，创下了当地的一个先例。出车祸时年仅17岁的米拉德- 莫拉伊被视为成年人予以起诉，而且被控以二级谋杀罪。_2009.08.18
卢广在纽约荣获尤金·史密斯人道主义摄影大奖，其作品《关注中国污》_2009.10.18
现在Jack Ma正在谈环境问题，谈钱塘江，谈绍兴水乡，谈癌症，谈水污染，阿里巴巴要用互联网的力量和实际行动保护水资源。买车之前要种树，比如奔驰600要种 200棵树，要推行无纸化办公！我为这个表态感到骄傲，对前端来说首先能做的就是提高前端性能！_2009.11.05

有些事关生活

刚才看到老同学的短信，2.14那天生下一个胖儿子，情人节诞生爱情结晶，真不错。_2009.02.16
今天收到安婧的明信片，很是高兴。在通讯技术如此发达的今天，当你去一个新地方使用明信片，真是一个很优雅的问候方式，手写字体是更优美亲切的。从今天开始积累亲朋好友的通信地址。_2009.02.27
尖叫的饮料瓶的确是最好的油瓶、酱油瓶、醋瓶……，好用又环保啊。_2009.04.19
戒掉一个口头禅“说一个很简单的事情”，往往让对话人感觉到不爽的反而是看起来不起眼的内容，要戒掉估计就靠憋了。虽然让自己爽起来是好事，但是目标是为了把好东西有效的传达出去，所以还是先从自己做起了。_2009.04.23
经常看到电影中男主角们被车拖来拖去，最后还能爬上车，英雄了得。看了这个新闻，就不得不好好感叹一下人生了。
印度尼西亚西爪哇的一个地区的法律规定，如果要结婚的话，必须要先种10棵树，如果要离婚的话，就必须要先种50棵树。_2009.05.05
听着“我终于失去了你”，打开这段视频，居然哭得稀里哗啦_2009.05.10
一个挨过饿的人和一个没有挨过饿的人对一碗红烧肉的感情是迥然不同的。 —-柳传志_2009.06.17

有些事关组织

彼得原理_2009.02.25
如果是上班族，我觉得应该养成站在比自己高两级的管理者的立场上思考问题的习惯。如果只是站在比自己高一级的直属上司的立场上思考问题，就容易纠结，而高两级，正好合适。—-大前研一_2009.06.02
工作应该体现人的社会价值，如机会、社交、认同以及个人满足，而非仅仅反映成本、效率之类的商业价值。_2009.09.01
帕金森的结论是：“一份工作所需要的资源与工作本身并没有太大的关系，一件事情被膨胀出来的重要性和复杂性，与完成这件事情花的时间成正比。”_2009.11.07
雨林木风负责人赖霖枫说，环境不是最重要的，但良好的办公环境可以给予我们更好的创意和激情。看到这句使我想起了阿里巴巴前台的MBP和UED的硬件现状。硬件也不是最重要的，但不合理的设置和形式主义完全能抑制人的创意和激情。不患寡而患不均。_2009.11.26
站在2009年的尾巴上，想想这一年来其他团队有很多同事让我感动，所以在这个下午我把这种感动写信告诉TA的主管。_2009.11.30

有些事关产品

目前我希望的交互设计师和产品经理一样是非常资深的，做过前端、后端开发的技术研发人员晋升而来的。好的产品最好交到一个有技术能力的、有经验的交互手上，会让大家更加放心。如果交互太烂，让很多兄弟陪着干，结果发现方向错误是非常浪费和挫伤前端士气的。_2009.01.14
一个大型产品的发布或大规模更新到其稳定往往需要较长时间的跟踪和维护，这期间往往针对用户的反馈有若干小的调整，所以需要全体人员快速响应，但不知道为啥很多公司的都喜欢在春节前几天干这事，难道是因为春节流量小而开发人员都不休假么？这是做给用户用，还是做给对头看，更或者是做给老板瞧呢？_2009.01.18
我一直认为“全部服务”对一个大型网站来说至关重要，它可能是树或者是网，反应了这个网站的产品架构和发展方向，对用户的展示可能是“更多服务”或“有选择的推送”。有谁清楚公司的“全部服务”么？太多的人关注“首页”超过“全部服务”了。_2009.02.03
改版的一种境界或许润物细无声，有点类似闷声发大财一样，让用户感觉变的自然，变得清切，变得好用，心中窃喜，不知不觉变得越来越爽。_2009.02.24
twitter.com的创始人是Evan Williams，他也是blogger.com的创始人； friendfeed.com的创始人是Paul Buchheit，他也是gmail.com的创始人。产品、技术和人一样，暗中是很有延续性的。_2009.03.03
Web是一个新媒体，最核心的是内容，最重要的是重复和清晰，我们要多考虑它的伸缩性。_2009.03.03
光鲜的表面赢得奖项，真正的内容赢得用户—- Gerry McGovern_2009.03.06
马化腾讲产品：让产品自己召唤人[不能不说企鹅不仅仅在说，大老板也能说出如此多的产品细节，也看到他们在做，就连“北外女生”，人家在炒内容吸引流量，抓住核心]_2009.03.26
真正的挑战在于：收集我们能够找到的所有被数字化记录下来的行为碎片，分析其内在的联系，并通过简单明了的界面，最终发掘出大众的智慧。_2009.04.17
“在我们未进入的一个全新领域进行产品开发，对公司已拥有的成熟技术以及可以向社会采购的技术利用率低于70%，新开发量高于30%，不仅不叫创新，反而是浪费，它只会提高开发成本，增加产品的不稳定性。凡是说：我的项目全部都是我做，未利用别人的成就，这种人一定不能加薪。”- 任正非_2009.05.12
亚马逊首席执行官杰夫·贝佐斯称：“我们的愿景是，Kindle在60秒时间内向读者提供已印刷，正在印刷或绝版的各种语言书籍，不过这是一个需要几十年才能实现的远景。”_2009.10.08

有些事关创意

创造与创意犹如生命与生活。_2009.02.14
Pixazza把每张图片自动变成广告赚钱, 这个创意阿里妈妈完全可以参考，太帅了。_2009.03.27
UNIQLO是一个建立品牌认知度方面新的尝试–面对全球市场进行传播。为全世界的博客们制作了一个功能性widget，结合跳舞、音乐、钟表等等，看视频，插件会根据春夏秋冬、时差等而显示不同的内容_2009.04.17
如果有关系，什么都没有关系！_2009.05.14
9875321，1.它是一个质数。2.它的各位数字是依次递减的。3.把它的数字逆转过来，变成各位数字递增的1235789，仍然得到一个质数。4. 它是满足以上三条性质的数字中最大的一个。5.它是一个在天朝完全合法的数字。6.在数字键盘上输入这个数字，既是用手画出了佐罗记号。_2009.06.05
有地有钱有闲就自己盖别野，稻语间和可以居虽然算是很老的帖子，但是也看得心痒痒，如果能动手盖一套自己的房子也真的不错，就像黄永玉老爷子一样_2009.07.30
创造者的品味。伟大的作品的秘诀是——非常精准的品味，加上能够使它满足的能力。_2009.07.31

有些事关设计

Web 最强大的力量，一直以来被视为局限与缺点，然而 Web 的天性是弹性，我们作为开发者与设计者，需要拥抱这种弹性，实现一个自适的，容易访问的 Web，这些努力从释放我们的控制欲开始。_2009.01.05
如果设计不从开发人员的角度考虑，那肯定有缺失，越复杂缺失越大。让开发人员理解设计，是好设计的必由路。_2009.01.15
佐野研二郎（Kenjiro Sano）：我认为最理想的设计可以概括为三个词——Simple（简洁）、Clear（清晰）、Bold（夸张）。所谓设计，就是整理复杂的事物，使其形成一种明快的视觉效果。_2009.01.19
我们推出的东西并非基于竞争，而是基于用户需求，另外，市场上（云应用）上只有我们一家并不是好事。在 Google 做产品经理和在别的公司不同是，你不必担心销售收入的问题，我们也有压力，但我们的压力是如何让用户高兴。–Google Docs PM Jonathan Rochelle_2009.02.02
我们应该用我们自己的网站服务来改善我们的生活。_2009.02.03
我的WEB设计简单默认原则是：链接在本窗口打开，链接有下划线，没有交互弹出层，不用tab切换，字体是14px，不用ICON，不用Ajax。当你认清它们是如何和产品结合时，可以随时overload。_2009.02.12
有两种方式构建软件设计：一种是把软件做得很简单以至于明显找不到缺陷；另一种是把它做得很复杂以至于找不到明显的缺陷。_2009.02.20
“我们听到的或者看到的，没有任何东西时完美的。但是恰恰处于这种不完美之中，才让世界变的完美。” – Shunryu Suzuki_2009.03.25
8%的男性以及0.4%的女性都存在不同程度的色觉障碍。实际上，由闪烁的UI元素引起癫痫的比例都要比非红-绿色觉障碍的比例高出400倍。_2009.05.13
昨天又看了一遍《This is it》，看到一句台词是“设计必须以人为本。”_2009.11.04

有些事关前端

写框架对个人来说的确是一个很好的锻炼和学习机会，对公司和工作来说就未必了。这就是很多人怂恿写框架的原因，毕竟彻底打破表面上又干净又牛X，其实有一个职业精神问题。_2009.01.13
全站性上线是一个很复杂的问题，即使很小功能，如果没有规划好也是非常复杂的。我要把全站性的东西比如头、尾、CSS和JS等这些东西都用CMS统一控制起来，建立稳定、统一、便捷、高效的前端环境。_2009.02.05
我认为现在的HTML语义化至少有三个方面可以做：1、HTML标签本身的理解和应用，这有规则的，2、微格式，3、合理的ID和Class。HTML5 的改变也可以看出这些。有一个前提，就是对产品和内容的理解和把握，需要我们在做之前要理解产品，想清楚再做。很难有绝对标准，我们需要最佳模式_2009.03.25
一起给支付宝的前端做分享时，圆心很好的总结的前端代码的三种境界：1、与人友好。2、与机器友好、3、与开发人员友好。语义化直接关系到后两者包括 SEO。_2009.03.25
前端主要的发展方向：1、资深前端。2、前端管理。3、产品设计或产品经理。4、交互设计师。曾和同事交流过，前端发展到一定程度有人会遇到技术上的天花板或兴趣转移，产品和交互是最自然的方向，后端也如此，而现实我们又太缺乏有技术背景的产品和交互了。_2009.05.06
刚刚看了老片《钢铁侠》感慨了一下：一个牛B的人不仅要创造新的高技术含量的东西，同样重要的是还要会制造帮助自己实现理想的自动化工具。_2009.08.30
RT：@lifesinger Steve Souders 也离开雅虎了，我火星着很伤感……//是有点火星，曾经我也为雅虎的垂落而伤感，后来我释然了，这就是前进的代价，@souders 去了Google，有了Let’s make the web faster的号召和相关产品，挺好_2009.11.19
“在这么多男人当中，我最喜欢做前端的男人，你一定要来D2哦！”_2009.11.04
刚才在MSN上一个同学说“两年前差不多这个时候你面试过我~两年前如果没有你，我根本不知道原来自己的路走的太篇了~ 从心里感谢你！一直没机会和你说这句话”，他现在是国内一知名站点的前端负责人了，当年的面试能有如此积极的效果，很开心_2009.11.28
多年来我在每个面试快速结束的时候都会彼此交流一下自己的看法，现在想起来可能主要有4个方面：1、前端定位及他在前端上的发展。2、学会利用互联网学习。3、学会站在巨人的肩上。4、互联网的精神。不过这也导致我的面试时间比较长。_2009.11.29

有些事关研发

我现在看到的最大问题是，在开发投入前，没有人把需求明确，没有人对需求进行版本分离迭代开发，我们太多的项目是边做边想边拍大腿了。还好，去年推动项目的时候有些进展，更注重原型，更注重项目启动前的需求明确。_2009.01.23
明确需求时，不仅仅是PD在闭门造车，在产品方向确定明确要做后,ID就参入了，细化的过程就要把开发加入进来，这时可以确定架构问题，可行性问题，开发模式问题，可以做一些实验，更重要的是开发理解了产品和以后发展方向，绝对避免很多弯路。这个过程就是需要立于本职的尊重和换位思考才能做好的。_2009.01.23
需求确认是建立在开发理解并认可产品的基础上。原型是确认需求的主要产物，我们不需要精美的高保真原型，我们需要明确需求快速呈现的原型。一旦需求确定，开发的各个角色就可以进入并行开发阶段，这个时候PM、PD和ID除了解决意外情况外，就可以进行下一个版本的需求准备中。如此循环。_2009.01.23
“许多公司面临短期压力而取消或者从不进行任何纯粹的基础研究活动。他们认为，可以通过收购或通过产品开发而得以维持公司的发展，但我认为恰恰是这种想法铸就了他们的慢性消亡——因为他们的做法的确有助于改善短期回报，但并不能保证其长期生存。”微软三号人物，微软首席研究及战略官克瑞格•蒙迪说_2009.03.03
其实最影响用户体验的除了内容就是线上Bug，其他的都先靠边。所以要有统一线上Bug记录系统和有效修复流程；所有线上bug要得到记录，这反映产品的服务状态和改进方向；所有人都应该乐于使用公司产品、乐于提交bug，这是一种职业品质；提交线上bug最多的人（QA除外）应该得到奖励。_2009.03.05
需求方应该用流程降低目前的提需求速度，实施方不能用流程做挡箭牌。_2009.03.12
贝佐斯说：“技术使亚马逊在零售业出人头地。传统的零售业最重要的三个因素是场所、场所，还是场所。而对亚马逊来说，三个最重要的因素是技术、技术，还是技术。”在亚马逊，雇员中最多的不是门市部店员，而是软件工程师。它的应用技术软件不断地开发创新，使企图抄袭者难以得逞。_2009.04.28
Yahoo关于安全的最佳实践_2009.05.04
开发工程师永远是公司的资产，不是成本。_2009.09.12
“项目时间的问题项目经理说了算，老大的需求也是作为消费者提出的需求。”这句话我喜欢，就用它敲开2010吧。_2009.11.31