2010 年 InfoQ 中文站前端技术总结

随着 Web 2.0 深入人心，前端技术发展呈现百花齐放之势，无论是各个 RIA 厂商对自身技术的推陈出新，还是浏览器厂商对 RIA 技术的追逐，都表明前端技术已经在软件开发社区中占据了重要的地位，而且还在不断上升，InfoQ 中文站总结了过去一年前端技术的精彩报道，以馈读者（有关 HTML 5 的回顾部分请查阅 2010 年架构社区回顾：悠长的一年）。

实战

所谓“实践出真知”，一线的前端架构师和开发人员通过 InfoQ 中文站分享了他们的宝贵经验。

• 构建前端 UI 组件的新思路
  前端 UI 组件，目前流行的实现方式大多源自传统客户端的 UI 设计体系。无论是早期的 Bindows，还是近几年兴盛的 ExtJS，其 UI 组件都在模仿客户端软件，代码实现建立在复杂的继承体系上。好处是可以构建出和客户端体验一致的一整套 UI 组件，但弊端也很明显：组件长得都差不多，代码则继承太深，牵三挂四，不够轻便。如何才能让前端 UI 组件轻便灵活起来呢？首先得意识到 Web UI 设计有自己的独特性。Web 页面可分为两种：一种是以展现信息为主的 Web 页面（web page），另一种是以操作信息为主的 Web 应用（web app）。对复杂的 Web 应用来说，可以采用 ExtJS 等类库来构建类客户端体验。但是，越来越多的 Web 应用已逐步脱离模仿客户端的阶段，开始从 Web 的独特性出发，将传统 UI 组件的功能融入到 Web 页面中。

• Dojo 框架：误解与现实
  目前可以使用的 JavaScript 框架非常之多，比较流行的也有十多种。这些流行的 JavaScript 框架包括 jQuery、Dojo、YUI、MooTools、Prototype、Ext JS、Google Closure 等。这些不同的框架有着各自不同的优势和不足，也有着对应的不同的适用情景和范围。由于工作的关系，作者对 Dojo 框架的使用最多，对于其它框架也有一定的了解。本文的目的是希望澄清一些对于 Dojo 框架的误解，从而帮助开发人员选择合适的框架。

• RIA 的强力后盾：REST+ 海量存储
  HTTP 从被发明开始就被人误解至今，在其创始人 Roy 博士的博士论文中提出了 REST 的概念，还原了 HTTP 的真实作用，54chen 将以淘宝的开源项目 openResty 来介绍 REST 的真实存在及其价值。人人网作为国内领先的专业 SNS 社区，在海量内容存储方面遇到的问题和大多数大型网站一样，如何从容应对稳步增长的数据和访问，成为一个有意思的议题，借用人人网 nuclear 的开发经验介绍海量存储原理。最后结合 REST、海量存储以及 RIA 技术，从 RIA 开发者角度展望未来 HTTP 发展方向。

• Ajax 应用开发：实践者指南
  目前的 Web 应用开发基本上都是围绕富互联网应用展开。RIA 的实现技术有很多种： Ajax 、 Flash 、 JavaFX 和 Sliverlight 等。Ajax 技术的优点在于它是构建在开放标准之上，不存在厂商锁定的问题；同时也不需要额外的浏览器插件支持。Ajax 应用对搜索引擎也比较友好。对开发者来说，Ajax 所需技术的学习曲线也较平滑，容易上手。本文简要介绍了 Ajax 应用开发的各个方面以及相关的最佳实践，但对一些细节内容没有展开讨论。

• Silverlight 之轻
  在企业应用的前端开发中，Ajax、Flash 和 Silverlight 争奇斗艳，各有千秋。这次 InfoQ 中文站有幸邀请到来自中国人寿的 Silverlight 专家吴磊先生，为读者分享他的 Silverlight 在企业应用开发中的丰富经验。

• 基于 Adobe AIR 的社交应用开发及案例研究
  目前在各个领域已经涌现出了许多优秀的使用 Adobe AIR 技术开发的客户端软件，例如在社交应用领域，就有著名的 TweetDeck，Twhirl，Spaz，Seesmic Desktop 等等。他们可以支持 Twitter， Facebook，FriendFeed，Myspace 等国外常用的社交网站。作者是一位 JavaEE 和 Flex 开发者，但曾经做过 Web 设计师的工作。在使用如上社交应用的同时，作者发现中国相应的应用非常稀少，因此萌生了为中国现有的社交网站开发应用的想法。目前作者开发的豆瓣网应用 DoubanTalk、豆瓣桌面客户端以及新浪微博客户端都受到了网友的热烈欢迎。

• 百万级访问量网站的技术准备工作当今从纯网站技术上来说，因为开源模式的发展，现在建一个小网站已经很简单也很便宜，所以很多人都把创业方向定位在互联网应用。这些人里大多数不是很懂技术，或者不是那么精通，而网站开发维护方面的知识又很分散，学习成本太高，所以这篇文章将这些知识点结合起来，系统的来说，一个从日几千访问的小小网站，到日访问一两百万的小网站，中间可能会产生什么问题，以及怎么才能在一开始做足工作尽量避免这些问题。

性能

富互联网应用的界面迟早会遇到性能问题，如何避免或者解决性能瓶颈，一直是社区关注的焦点之一，InfoQ 中文站也对此做了大量报道。

• 不应忽视的 HTML 优化
  随着 Web2.0 技术的不断发展，Web 前端的优化受到越来越多的关注，特别是 JavaScript 和 CSS 优化的讨论一直是热点，工具也相对丰富，而对 HTML 优化则有所忽视，最近，来自百度泛用户体验团队的工程师 Miller （chenminliang）撰文强调了 HTML 优化的重要性和相关技巧。

• W3C 宣布成立 Web 性能工作组
  W3C 在其官网上宣布成立 Web 性能工作组（Web Performance Working Group），由来自 Google 和 Microsoft 的工程师担任主席，任务目标是制定衡量 Web 应用性能的方法和 API。

• Web 2.0 应用客户端性能问题十大根源
  Web 2.0 应用的推广为用户带来了全新的体验，同时也让开发人员更加关注客户端性能问题。最近，资深 Web 性能诊断专家、知名工具 dynatrace 的创始人之一 Andreas Grabner 根据自己的工作经验，总结了 Web 2.0 应用客户端性能问题十大根源，InfoQ 中文站将这十个问题做了概括整理，供 Web 开发人员借鉴和思考。

• Google 提出 Web 性能优化新方法——Diffable
  Google Maps 的开发人员 Josh 和 James 最近提出并实现了一种 Web 性能优化新方法—— Diffable ，即在浏览器加载 Web 页面时，促使其比较相关文件（Html、JavaScript 等）在服务器端和客户端缓存区的版本并只下载差量（Deltas），降低网络下载造成的延迟。本文简要介绍了 Diffable 方法的背景、原理、优势和实现情况。

• 康伯谈淘宝双十一事件中的 CDN 优化
  本采访是淘宝双十一事件深度报道的一部分，被采访者是淘宝研发中心的康伯，淘宝 CDN 团队的负责人。围绕淘宝双十一事件他向我们介绍了淘宝 CDN 团队在事发前后采取了什么样的措施来预警，和解决突如其来的双十一访问高峰带来的压力。

浏览器

浏览器是前端技术的推动者和检验者，一方面各个浏览器争相支持各种最新前端技术，另一方面它们的兼容性问题也让开发人员头疼。

• 剖析 IE 浏览器子系统的性能权重
  如何从浏览器角度剖析性能问题呢？微软 IE 开发团队年性能主管 Jason Weber 在一篇博文中介绍了 IE 浏览器的各个子系统，并通过实验数据展示了不同网站对浏览器子系统的性能影响和权重，InfoQ 中文站对相关内容做了整理，希望对浏览器开发人员和 Web 应用开发人员有所帮助。

• Google 和 Mozilla 相继推出浏览器应用商店
  在 Google 最近推出 Chrome Web Store 商店之后，Mozilla 也表示将在 2010 年初发布浏览器 Web 应用商店，其所倡导的“开放 Web 应用生态系统”预计将会给 Web 社区带来更多发展机会。

• Chrome 发布提速、Safari 支持插件扩展
  虽然 Google 是浏览器市场的新军，但是其表现一直不俗：不仅性能出色，而且发布速度也很快。Google 宣布 Chrome 的发布再次提速，大约每两周交付一个稳定版本。苹果发布了 Safari 浏览器的新版本升级，正式引入了 Extensions 插件扩展功能。

迷你书

• 构建高性能 Web 站点（精选版）
  《构建高性能 Web 站点》围绕如何构建高性能 Web 站点，从多个方面、多个角度进行了全面的阐述，涵盖了 Web 站点性能优化的几乎所有内容，包括分布式缓存、Web 负载均衡、内容发布和同步、数据库监控、性能监控等。本迷你书从中精选出 5 个章节。

• 富互联网应用之美
  本迷你书是 RIA 领域的专家和实际从业者的知识共享和经验总结，范围之广涉及趋势、技术、框架、语言、应用、性能等，是 InfoQ 为大家打造的一本居家学习之 RIA 必备读物。