IWEB设计技术趋势：HTML5人不适合大量应用.docxVIP

这段时间国内(百度，淘宝，新浪)及国外(Facebook，Youtube，Yahoo)各大公司的集中自曝，我们可以从中总结出2010 Web前端技术的一些趋势。总的来说，随着后端技术(存储，并发，分布式)的成熟，各大公司已经把重点从后端架构调整/建设转移至前端(TTI时间，快速发布，带宽利用率)。但作为明星技术的HTML5/CSS3，都未正式成为各公司的考虑重心，虽有所尝试，但在关键功能上，均未成为主力。这也W3C对当前HTML5/CSS3标准现状的表述：“不适宜用作生产环境”一致。基本概念Web前端技术的范围1. 编程语言/技术(HTML，JavaScript，CSS等)2. 跨浏览器兼容性/支持(JS Framework，CSS Library)3. 网络传输性能(并行下载，带宽利用率)4. 浏览器渲染时间/性能(TTI即用户可交互前等待时间，JS执行性能)今年就我个人的感觉，Facebook无疑又成为了技术上的明星，在大家还在感慨其对于PHP的重大改进HipHop(Blocked inside China mainland)的时候，今年Facebook又在前端技术方面给大家带来了惊喜。Facebook面临的问题500M(Million)注册用户，50%每天至少访问一次，用户平均每日在线时间为5小时25分钟。带宽及服务器压力均很大。Facebook的解决方案QuicklingFacebook提出了一个新名词Ajaxify，顾名思义，就是将传统的POST/GET转换为Ajax请求。优点显而易见，首先减少了不必要的HTML传输，只请求和渲染页面需要更新的部分，这就相应减少了所需传输的内容加快了内容送达至用户的时间。并且也减少了服务端对HTML的不必要的渲染。Facebook也提到了可以减少session的重复load/unload。使用Ajax也许不是什么新鲜的新闻，大家拒绝这项技术的原因可能很大程度基于SEO的需求。解决方案也很简单，将Ajax只是作为提高用户体验的手段，而不是浏览网站必须的方法，即可解决SEO的问题(P.S. Facebook不需要SEO)。一些实现细节：整套方案包括：Link Controller, HistoryManager, BootLoader, Busy Indicator, CSS Unloading, Permanent link support, Resetting timer functions。这些方案本身没有什么特殊的，大部分都可以顾名思义，需要解释一下的可能是link controller，其含义是将标准的HTML LINK请求转换为Ajax请求(通过绑定click事件)。Facebook的可贵之处是提供了这一整套完整的解决方案，最大程度上保证了网站的可用性。效果：提高了10%-30% 的网站传输时间，并提高了20%-30%的服务端页面渲染速度。使用范围：45%的Facebook页面使用了此项技术。PageCache简单的说，就是将访问过的页面缓存在客户端。但我们知道，作为Facebook这样交互性很强的网站，需要保障用户能尽早的获得更新后的信息，而不是给用户展示一个毫无意义的过期页面。Facebook设计了一个框架来识别一个页面是否来自于缓存(猜测：页面首次加载完毕后将所有Ajax的Callback和Result缓存在本地。Facebook页面是基于Ajax获取页面内容，参见BigPipe)，若来自于缓存，通过Ajax来更新所需更新的模块(猜测：通过JS预先定义本页面所需更新的div Id及对应的callback handler，并在页面下载时同时下载下来)。其提到了三种更新类型：增量更新，用户复写(例如用户在页面上回复了一则评论)及跨页更新(例如在消息详细页面将一则消息标识为已读，需将首页的未读消息数进行更新。)。核心思路还是依据Ajax进行更新。具体思路为：增量更新：只要页面来自于缓存，即更新所有预定义的需增量更新的模块。用户复写：通过HistoryManager记录用户操作并在cache页面读取后重放所有被标记为“replayable”的操作。跨页更新：通过服务端Database API发送信号至客户端将过期缓存标识为invalid(不清楚如何实现。也许是DB端提供一个开放的webservice，客户端通过Ajax持续访问此API来获得此信息)。获得了缓存过期信号后，通过Ajax更新需要更新的信息。Facebook顺带提到了一个更新Ajax内容避免页面变化/闪烁的小技巧，就是先将需更新的地方设置为blank，而非直接更新其内容。效果：加速了10倍的网站响应时间并节约了20%的服务端页面渲染成本。BigPipe此项技术通过将页面分割为各个Pagelets的方式，将整张页面的获