随网之舞设计

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。

在服务端合并和压缩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
购买《高性能网站建设进阶指南》
《高性能网站建设进阶指南》目录表

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

默认Web字体样式

秦歌 — Sun, 22 Nov 2009 10:36:22 +0000

通常用户看到的页面的样式会受到三层控制，第一层是浏览器的默认样式，第二层是网页定义样式，第三层是用户自定义样式。和CSS一样，后面的优先级高于前面的，也就是说网页定义样式可以覆盖浏览器的默认样式，而用户自定义样式优先级最高。实际情况是虽然浏览器都或多或少提供了用户自定义样式的功能，但是极少数会有用户去自定义，一般用也是高级用户。而浏览器默认的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置，这就导致如果直接利用默认样式的页面在各个浏览器下显示非常不一致，于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。

拿字体来说，各个浏览器默认的字体种类、字体大小和字体行高都不一样，比如IE8的中文版在Windows XP下显示网页时默认字体是宋体，而英文版肯定不会如此。所以我们需要统一设置默认的字体样式，以便实现一致的显示效果来保证设计的一致性和提高开发效率。

以后准备使用如下默认字体样式：

body{
  font: 12px/1.5 arial;
}

字体：arial

我们页面的绝大部分内容字符都是中文，毫无疑问目前为止在网页上最常用也是最通用的显示中文的字体是宋体，但是宋体在显示英文、数字和英文符号时过于糟糕，比如©字符，所以我们一般期望通过CSS来实现用更好的字体样式来显示它们，然后用宋体来显示中文和中文符号。之所以选择arial是因为：

Windows和Mac都预装了这款字体，应该是使用最广泛的网页字体了。它的潜在对手tahoma和helvetica就没有这么幸运了。
视觉设计的专业人士可能会认为在Windows中使用tahoma、在Mac中使用helvetica更好，比如淘宝的默认字体样式是font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;这是一个很不错的选择，但是你也会发现Google、YAHOO、Youtube、Bing甚至MSN的新版都使用arial作为第一默认字体。所以从美观和可读性上来讲arial应该是完全可以接受的。
一般情况下设置font-family都会在最后设置通用字体族以保证其安全性，比如Google的设置为font-family:arial,sans-serif;，但是至少在非中文版的Win7下当编码是GBK时，IE8会因sans-serif来渲染宋体，导致字体出现变形，这就是为什么淘宝需要在sans-serif前加上宋体而Google无需这样做的原因。
因为中文字体的选择非常有限，所以目前所有的主流浏览器都设置使用宋体来显示中文。Baidu的首页和搜索结果页使用font-family:arial;可以从侧面说明这样做的安全性。可能有人注意到Firefox中国版默认显示的中文字体是微软雅黑，这是因为谋智网络擅自修改了用户自定义样式，不允许网页的样式覆盖浏览器设置的样式。也是由于类似的情况，我们要弹性设计网页非常重要。

使用英文字体作为第一默认字体会导致的问题之一就是中英文以及符号混排时的对齐问题、通过设置行高和hasLayout能解决绝大部分情况，但是都不会很完美，如果把字体改成“宋体”能彻底的解决问题。很明显，这个问题只出现在IE上。所以，如果你的网站很少使用英文、数字和英文符号，那么直接设置{font-family:\5b8b\4f53;}也是很合理的选择。

大小：12px

12px是宋体能显示的极限，虽然微软雅黑能显示更小的字体，但目前的应用环境尚未成熟。由于宋体基本上是目前显示中文唯一的通用Web字体，所以12px成为最常用的字体大小。我们当然可以依据产品的需要来修改这个默认值。
不用考虑基于字体大小（em）的设计。
在Chrome3.0之后的中文版中，字体大小最小值是12px，比如你设置最小字体为10px，最后也变成12px。

行高：1.5倍

这是一个经验值，不同的产品对这个值要求可能不同，但我们一般会设置最常用的为默认值。比如YUI的font中是font:13px/1.231 arial,helvetica,clean,sans-serif;即字体大小默认值是13px，行高是13*1.231=16.003px，默认的行高是默认字体的1.231倍。对于中文来说，常用的字体大小12px、14px、16px、18px等偶数大小，在IE6和IE7设置其行高也为偶数能解决一些特殊情况下的字体对其问题。
在IE6和IE7中，行高值必须大于字体的2px才能保证字体的完整显示或当其作为链接时能有效显示下划线。
设置line-height时，注意不要使用单位（包括%在内），因为子节点会继承经过运算后的line-height值，所以当使用单位后浏览器会把line-height计算成第一次定义的绝对值，而不会随着字体大小的变化而变化，而无单位的数值表示是所在容器的font-size的倍数，所以设置为无单位的数值是最佳选择。
深入CSS 行高非常有利于理解line-height，值得一读。

性能和效率

大部分平台都有arial，减少浏览器的查找时间。
代码最少，书写方便。arial基本上是名字最短的字体了，可以节约CSS的大小。
所有的字母都小写，目前Google就是这样做的，好处是既可以编写更快也能提升Gzip压缩的效率。
中文最好用unicode表示，比如使用宋体是{font-family:\5b8b\4f53;}，使用微软雅黑是{font-family:\5fae\8f6f\96c5\9ed1;}，这样的好处是避免编码问题，同时能得到所有的主流浏览器的支持。
使用正确的字体种类写法，避免使用引号，这样可以缩小CSS的大小。中文字体可以按上一条方式来编写。

未来

通过对中英文及符号混排的测试，我发现微软雅黑其实表现相当不错，包括英文数字和英文字符以及在IE6和IE7的显示效果上，但唯一的遗憾是在XP下如果安装了微软雅黑字体的用户没有打开“使用屏幕字体的边缘平滑”选项的话，在Firefox、Safari和Opera、特别是IE6下会非常模糊难以辨认。针对这个问题目前并没有很好的解决方案，所以只有等到IE6使用比率非常小的时候才可能正式的使用它。或许需要到2014年，XP死掉的时候。
虽然很早就有了@font-face，但是浏览器的支持、网速和商业问题，导致它很少被应用。最近关于字体的好消息是Firefox3.6将支持Web Open Font Forma。关于Web字体未来的相关信息可以看Web 字体的未来、关于 Web 字体：现状与未来和再谈 Web 字体的现状与未来。

最后推荐一下玉伯的《再谈 Web 默认字体》

动态加载JavaScript的小实践

秦歌 — Wed, 04 Nov 2009 16:56:30 +0000

动态加载JavaScript文件和CSS资源为Web前端开发提供了巨大的灵活性，同时也实现了lazy load和按需加载，相比XMLHttpRequest而言其没有跨域的限制使其广泛应用。其基本原理是：在页面DOMReady后，利用JavaScript把指定文件路径的script和link元素插入到页面中，然后判断其加载状态再进行继续操作。

YUI的Get就专门提供了一套动态加载的机制，是YUI最基础的功能之一。在YUI中利用Get加载JavaScript和CSS资源会在HTML的head节点中插入如下代码：

当页面编码和JavaScript或CSS资源编码不一致时，常见的方法是通过charset属性声明其编码，比如页面是gb2312，而资源文件为utf-8，则设置编码后其插入的代码是

//YUI3.0.0 和 YUI 2.8.0中

然而，在IE的一些特殊情况下加载JavaScript时，当你刷新页面时会看到状态栏上有如下的错误提示：

当你通过随机参数让JavaScript文件不缓存时，或者让script元素中的charset属性位于src属性之前（比如利用YUI2.8.0之前版本加载）就不会有这个错误提示。所以，这个问题可能是IE的缓存解码机制的bug，也可以看着是YUI的bug（已经提交给YUI开发团队，将在3.1.0中解决）。

因此，动态添加script或CSS资源时，把charset放在资源路径前面是最佳实践。对于YUI，暂时可以这样修改源码来修复。

IE中选择符的4095限制

秦歌 — Thu, 10 Sep 2009 15:42:42 +0000

去年曾总结了《IE对CSS样式表的限制和解决方案》中限制的第4条写道“一个CSS文件的不能超过288kb？”，这是一个疑问句，当时没有重现出来且参考来自Internet Explorer CSS File Size Limit。今天终于看到了IE在CSS上的另一个限制：IE中每个style标签或css文件的选择符个数不能超过4095。其实style属性也应该有这个限制，但是几乎不可能发生。这个限制在IE6、IE7和IE8中存在。请看IE关于4095个选择符限制的DEMO。

DEMO中的style.css有4913个选择符，大小为554kb，但在IE中却在4095个选择符之后失效，所以说明IE的CSS文件不存在不能超过288kb的限制。

所以在IE中对style标签使用addRule方法和cssText属性添加样式时都可能会碰到这个限制，比如使用addRule方法添加第4096个选择符时会报“Invalid Argument”的异常。

CSS实现HTML元素透明的那些事

秦歌 — Sun, 06 Sep 2009 15:44:00 +0000

CSS3草案中定义了{opacity: | inherit;}来声明元素的透明度，这已经得到了大多数现代浏览器的支持，而IE则很早通过特定的私有属性filter来实现的，所以HTML元素的透明效果已经无处不在了。首先看看A级浏览器所支持的用CSS实现元素透明的方案：

浏览器	最低版本	方案
Internet Explorer	4.0	`filter: alpha(opacity=xx);`
	5.5	`filter: progid:DXImageTransform.Microsoft.Alpha(opacity=xx);`
	8.0	`filter: "alpha(opacity=xx)"; filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=xx)"; -ms-filter: "alpha(opacity=xx)"; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30)";`
Firefox (Gecko)	0.9 (1.7)	`opacity`
Opera	9.0	`opacity`
Safari (WebKit)	1.2 (125)	`opacity`

实际上在IE8中，-ms-filter是filter的别名，两者区别是-ms-filter的属相值必须被单引号或双引号包围，而filter中则不是必须，而在IE8之前的版本中，filter的属性值必须不被单引号或双引号包围。

IE中的HTML元素要实现透明，则其必须具备layout，这样的元素有仅可读的属性hasLayout，且其值为true。具体情况如下：

body、img、table、tr、th、td等元素的hasLayout一直为true。
type为text、button、file或select的input的hasLayout一直为true。
设置{position:absolute}的元素的hasLayout为true
设置{float:left|right}的元素的hasLayout为true
设置{display:inline-block}的元素的hasLayout为true
设置{height:xx}或{width:xx}的元素必须具体以下两个条件之一，其hasLayout才能为true：
1. IE8兼容模式和IE8以前的浏览器中，在标准(strict)模式下其display的值是block，如demo3就不行。
2. 元素在怪癖模式（compat mode）下。
设置了{zoom:xx}的元素在IE8的兼容模式或IE8之前的浏览器中其hasLayout为true，但在IE8的标准模式下则不会触发hasLayout。
设置了{writing-mode:tb-rl}的元素的hasLayout为true。
元素的contentEditable的属性值为true。
在IE8标准模式下设置了{display:block}的元素的hasLayout一直为true，如demo8。

关于hasLayout的更多详情可以看Exploring Internet Explorer “HasLayout” Overview和On having layout

从上面就可以看出IE实现HTML元素的透明如此混乱，为了向下兼容和自己的私有属性让IE上实现元素透明有多种方式，比如CSS Opacity实例中的demo1到demo8，虽然IE团队推荐实现透明的方式是：

{
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: .5;
}

而目前简单最好用的实现方式是如CSS Opacity中demo4这样：

{
    filter:alpha(opacity=30);
    opacity:.3;
}

实际上目前最流行的JavaScript框架的设置样式方法都是应用这种方式，并且针对IE设置了{zoom:1}来让元素的hasLayout为true，但在IE8的标准模式下zoom并不能触发hasLayout，所以利用它们设置hasLayout为false的元素的透明度时在IE8的标准模式下是失败的，这个bug在YUI（我已经给YUI团队提交了这个bug，他们会在下个版本修复，最新的2.8.0中依旧存在，期待2.9.0吧）、Prototype、jQuery和Mootools的最新版本中都存在，具体请在IE8标准模式下看demo9到demo11。同样由于在IE8中设置透明度的方式多种多样，所以利用JavaScript获取HTML元素的透明度值需要考虑多种情况，YUI完美解决了这个问题，Prototype比jQuery稍微周全一点，而Mootools直接是bug，具体可以在IE下看demo1到demo8的演示。从这个角度给4个框架来个排名的话，YUI第一、Prototype第二、jQuery第三、Mootools垫底。

我简单的实现了设置和获取Opacity的函数，可以避开上面框架存在的bug，请在IE8标准模式下看demo12：

//设置CSS opacity 属性的函数，解决IE8的问题
var setOpacity = function(el,i){
  if(window.getComputedStyle){// for non-IE
    el.style.opacity = i;
  }else if(document.documentElement.currentStyle){ // for IE
    if(!el.currentStyle.hasLayout){
      el.style.zoom = 1;
    }
    if(!el.currentStyle.hasLayout){ //在IE8中zoom不生效，所以再次设置inline-block
      el.style.display = 'inline-block';
    }
    try{
      //测试是否已有filter
      //http://msdn.microsoft.com/en-us/library/ms532847%28VS.85%29.aspx
      if(el.filters){
        if(el.filters('alpha')){
	  el.filters('alpha').opacity = i * 100;
	}else{
	  el.style.filter += 'alpha(opacity='+ i * 100 +')';
	 }
       }
    }catch(e){
      el.style.filter = 'alpha(opacity='+ i * 100 +')';
    }
  }
}

//获取CSS opacity 属性值的函数
//借鉴自http://developer.yahoel.com/yui/docs/YAHOO.util.Dom.html#method_getStyle
var getOpacity = function(el){
  var value;
  if(window.getComputedStyle){
    value = el.style.opacity;
    if(!value){
      value = el.ownerDocument.defaultView.getComputedStyle(el,null)['opacity'];
    }
    return value;
  }else if(document.documentElement.currentStyle){
    value = 100;
    try { // will error if no DXImageTransform
        value = el.filters['DXImageTransform.Microsoft.Alpha'].opacity;
    } catch(e) {
        try { // make sure its in the document
            value = el.filters('alpha').opacity;
        } catch(err) {
        }
    }
    return value / 100;
  }
}

不得不说，这些事都是IE整出来的……