HTML5趋势下的百度前端开发

“2G不给力哇，百度文库都这么慢？” ……，“人品大爆发？一下变的如此神速。”。

这两句话皆出自一位百度文库的手机端用户，只是，曾经的牢骚变成了如今的称赞。百度文库的手机使用体验有了很大改善，不仅阅读体验非常舒适，且载入速度也非常流畅。俗话说，台上一分钟，台下十年功，对于一个动不动就有几M甚至几十M大块头文档载入的移动端产品，百度知识搜索部的前端研发团队，通过什么实现了加载速度的提升呢？这还得从领导“踢馆”说起。

“小林同志，有人来踢馆。”

“谁啊，不想混了吧~”

“一个咱们的忠实粉丝，说百度文库移动版载入速度不够快，特别是2G环境下，比在北京开车还肉！” ;

……

其实，这个“踢馆”粉丝就是百度知识搜索部前端团队的领导，“用户体验永远第一，无论是2G还是3G环境中，一定要保证浏览速度！”就这样，团队成员们开始对导致慢速的原因进行排查。他们发现，由于阅读器上按钮图标较多，同时分为日夜模式两种颜色，存到CSS（风格样式表）后，占用了较大体积，导致加载速度缓慢。

“看来关键问题就是要优化CSS。”经过对数十款手机数千次的测试，团队成员们终终找出了最为优化的解决方案——他们将图标做成可缩放矢量图形的字体文件，再通过网络字体的方式引入，这样，不但压缩了大小，还实现了一套图标的黑白变色。而处理后的CSS大小由原先的150K降到40K，大大降低了流量消耗和加载时间，让用户感受到了“秒杀”的体验。

类似的故事在百度知识搜索部前端团队经常上演，通过技术创新让用户得到很好产品体验这个理念，也早已经深入团队每一位成员的心中。为了让手机用户可以离线阅读百度文库，团队成员共同协作，攻克了manifest技术只能按文章链接缓存静态页面的技术难关，实现静态文件新新，将页面缓存到本地制作离线应用，每篇下载的文章就像一本电子书一样成为一个单独的应用，用户在不联网的情况下也可以直接阅读。该团队资深前端研发工程师梁东杰介绍道：“虽然 manifest技术已经不是什么新鲜事了，但我们这次可以说是做出了这项技术的很好实践。”

对于全新的HTML5技术，产品经理、设计等非研发人员往往对其了解偏少，这成为了影响开发的重要因素。而百度知识搜索部前端团队却摸索出了新的思路——差异化。在近期举办的第三十期百度技术沙龙上，梁东杰与现场的前端工程师分享了如何应用浏览器增强技术以及通过差异化的思路进行新技术实践。他认为差异化开发解决了各类浏览器的适应性问题，在具体项目中，可通过功能上的加减法，让产品经理接受新技术功能;也可以通过效果上的加减法，让用户体验设计师接受交互创意推介。在这个思路下，应用浏览器增强技术，就能使低端浏览器对新特性实现自动化兼容，可以展现CSS3代码效果，让低端浏览器用户也能获得很好体验。

浏览器增强-差异化前端开发框架思路1.0

梁东杰透露，百度知识搜索部前端团队不但技术过硬，在创新意识上也是独树一帜。他们搭建了“浏览器云测试平台”、“运营自动化开发平台”，不仅为多浏览器测试提供了半自动化环境和工具，还可增加内容的复用率，大大提高专题页面的开发效率。此外，开源的CSS 3增强开发工具color stone（五彩石），因为改进前端开发开发效率，让前端工程师开发css代码时更轻松而受到了极大的好评。为了使社区类产品可以支持多国语言而提出的国际化开发前端解决方案，面世后不久就已经实现了泰语，阿拉伯语，越南语等多个语种的版本。

谈到未来，梁东杰对自己的团队充满了信心：“在这个依旧‘百花齐放’的‘准HTML5时代’，我们将继续‘兼容并蓄’的为各类平台用户提供优质的前端体验，为迎接HTML5的崛起做好非常充分的准备。”

附：

第30期百度技术沙龙资料观看/下载地址：http://pan.baidu.com/share/link？shareid=60469&uk=1308863905

百度技术沙龙新浪微博：http://weibo.com/baidutech

---