F2EF2E 技术、能力和未技术、能力和未来来

马士华马士华

问题：问题：

什么是什么是 F2EF2E ？？

答案：答案：

我们用我们用HTML,CSS,JavascripHTML,CSS,Javascriptt 。。。编写软件。。。编写软件

答案：答案：

我们告诉我们告诉 BrowserBrowser 我我们如何展现我们的软件们如何展现我们的软件，如何响应用户的行为，如何响应用户的行为。。

答案：答案：

我们要通过我们的技我们要通过我们的技术帮助站点实现商业目术帮助站点实现商业目标。标。

简单简单吗？吗？

(X)HTML DOM JavascriptCSS

规范，实现， Bug

服务端语言，数据交换（ XML ， JSON ）

IE5IE5 ，， 66 ，， 77 ，， 88 FirefoxFirefox SafariSafari OperaOpera ChromeChrome MobileMobile MachineMachine

易用性，可访问性，易用性，可访问性，页面设计，信息架构，页面设计，信息架构，安全，性能。安全，性能。

专业的专业的 F2EF2E 给站点减给站点减少支出，带来利润，有少支出，带来利润，有活力的界面，舒适的交活力的界面，舒适的交互，愉快地用户体验。互，愉快地用户体验。

HTMLHTML

<cite><cite> <fieldset><fieldset> <colgroup><colgroup> <caption><caption> <th scope=”row” abbr=”Manu”> <ins datetime=”2008-05-30”> HTML 嵌套规则

CSSCSS

selector: declaration; Box model 、 Position 、

Floating 、 hasLayout面向 OO 的 CSS CSS 的可维护性

JavascriptJavascript

Scope Scope 、 Reference Reference 、 Closure Closure 代码质量代码质量 ,tools like JSLint,tools like JSLint 单元测试单元测试

ProfilingProfiling 当心当心 XSSXSS 攻击，永远不要相信客户数据。攻击，永远不要相信客户数据。

ToolsTools ：： AdSafe/CajaAdSafe/Caja

Performance

为什么为什么 Performance 变得如此重要

Performance

时间就是金钱：时间就是金钱：

AmazonAmazon ：： 100ms100ms 的延迟导致降低的延迟导致降低 1%1% 的销的销售售

YahooYahoo ：： 400ms400ms 的延迟降低页面完全打开的延迟降低页面完全打开5%-9%5%-9% 。。

GoogleGoogle ：： 500ms500ms 的延迟降低的延迟降低 20%20% 的搜索量的搜索量

BingBing ：： 500ms500ms 的延迟降低的延迟降低 1.2%1.2% 的收益的收益http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppthttp://www.slideshare.net/stoyan/yslow-20-presentationhttp://assets.en.oreilly.com/1/event/29/The%20User%20and%20Business%20Impact%20of%20Server%20Delays,%20Additional%20Bytes,%20and%20HTTP%20Chunking%20in%20Web%20Search%20Presentation.pptx

Performance

1414 个主要个主要 RuleRule 浏览器的区别和特性浏览器的区别和特性

明白明白 WebWeb 图片格式图片格式

优化前端优化前端

各种评测工具各种评测工具 YSlowYSlow ，， Page SpeedPage Speed 等。等。

有大量的工作需要专业的有大量的工作需要专业的 F2EF2E 去完成去完成

用数据来证明用数据来证明 F2EF2E 的价值的价值

20012001 年年 YahooYahoo 有有 30003000 个员工，个员工， F2E=0F2E=0 20082008 年大约有年大约有 700700 个专业的个专业的 F2EF2E 。。

TaoBaoTaoBao ，， YouaYoua 拥有专业的拥有专业的 UEDUED 团队团队

下一个下一个 F2EF2E 就是你就是你

CC ImageCC Image

http://evance.name/node/1212 http://evance.name/node/1212