百度技术沙龙第30期 网页展示新技术实践

在 9 月 15 日由@百度主办、@InfoQ负责策划组织和实施的第 30 期百度技术沙龙活动上，来自百度知识搜索部的资深前端研发工程师梁东杰，《HTML5 Mobile Cookbook》一书的作者、HTML5 Boilerplate贡献者石川分别分享了各自在前端开发中的经验与实践，话题涉及“浏览器新技术在内容展现中的应用”，以及“JS Pattern 及 HTML5 Boilerplate 开发实践”等。本文将对他们各自的分享做下简单的回顾，同时提供相关资料的下载。

主题一：浏览器新技术在内容展现中的应用（下载讲稿）

来自百度知识搜索部的资深前端研发工程师梁东杰第一个为大家分享，内容主要涉及 HTML5 的现状、目前遇到的问题、差异化解决方案和应用方式以及浏览器增强这几部分。梁东杰认为 HTML5 有比较光明的发展前景，对于 HTML5，他提到了如下新特性：

语义特性

本地存储特性

设备兼容特性

网页多媒体特性

三位、图形以及特效特性

性能与集成特性

CSS3 特性

这些新的特性有利于产品服务的改进和一些开发辅助，但是，由于当前国内低端浏览器（如 IE6 等）市场份额较大加之 HTML5 处于过渡阶段，目前对于 HTML5 的使用还需要面临一些问题。

对此，梁东杰分享了百度基于“差异化开发”的解决思路，允许浏览器之间存在功能和效果的不同，进而提升用户体验，所采用的技术主要有：

优雅降级：向前以高端浏览器为基准

渐进增强：退后以低端浏览器为基准

使用差异化技术主要保证了两个方面的一致性：

1.用户体验的一致性

2.面向未来，跟技术潮流的一致性

同时，对于差异化新技术的应用，梁东杰总结了一些关键点：

团队 HTML5 技术普及

团队成员的差异化意识

渐进增强与优雅降级的使用

加速 HTML5 应用条件成熟

梁东杰提到百度内部还通过浏览器增强的方式来提升低端浏览器对新技术的支持以及自动化兼容低端浏览器 bug 等，目前也已经开源了相关项目。

主题二：JS Pattern 及 HTML5 Boilerplate 开发实践（下载讲稿）

《HTML5 Mobile Cookbook》一书的作者、HTML5 Boilerplate贡献者石川第二个为大家分享，话题主要设计涉及 JS Pattern 及 HTML5 Boilerplate 开发实践。

HTML5 Boilerplate是由 Paul Irish（Google Chrome 开发人员、jQuery 项目成员、Modernizr 作者、yayQuery 播客主持人）主导的一个帮助快速建立健壮并且高适应性 Web 应用或网站的模板，其用户有 Google、Microsoft、NASA、Barack Obama、Nike 等等。

石川通过结合实例向大家介绍新版本 Boilerplate 的特点和使用，他提到了 Boilerplate 的一些主要特点：

由 Paul Irish 首创的在 HTML 页面的 Body 上使用 IE 条件注释判断浏览器版本，从而大大简化了针对 IE Hack 的成本（在后来的版本中升级为在 标签中加入条件注释）；

HTML5 集成，默认使用了很多 HTML5 的特性，并且使其兼容旧版本浏览器；

大量针对服务器的默认配置，无需修改即可配置一个安全、标准的 Web 服务器；

完整的 JS 调试机制 —— 即使在 IE 下；

大量使用 CSS3 技术，并且集成了几乎所有来自框架中和技术大牛们口头相传的 CSS 技巧；

为所有浏览环境做了优化，包括移动版本和打印版本；

默认内置 Modernizr，可以检测浏览器对新特性的支持能力，方便针对旧版本浏览器优化

他还分享了提升技术人员技术敏感度和能力的心得：参与开源项目、加入项目的邮件列表，和项目的开发人员（不乏一些大师）直接交流。他提供了一些值得关注的 IRC：

#html5

#css

#javascript

#whatwg

#jquery

#yui

#dojo

#web

#bbg

Open Space（开放式讨论环节）

为了促进参会者与我们每期的嘉宾以及讲师近距离交流，深入探讨在演讲过程中的疑问，本次活动依然设置了 Open Space（开放式讨论）环节。

在 Open Space 的总结环节，几位话题小组长分别对讨论的内容进行了总结。

梁东杰：讨论了一些框架 CSS3 增强的实现原理、使用方法，并且探讨了 HTML5 应用的技术细节，通过介绍百度内容的一些项目来具体探讨。

石川：主要讨论了性能测试工具以及国内 IE6 大规模使用的情况下如何进行高效测试，同时还提到了一些新的开发方法，以及在不支持 HTML5 的浏览器上扩展实现。

曹雄峰：今天讨论了两个问题：第一，讨论浏览器能够成为 OS，所面临的三个问题：云计算、宽带、标准，第二，HTML5 成为跨平台语言所面临的问题等。

Jeff: 首先和大家讨论了 Ruby on Rails 的问题，以及如何使用一些 gem 来快速实现产品 API，然后分享了 LESS 等的使用感受。

会后，一些参会者也通过新浪微博分享了他们的参会感受：

antinomia：# 百度技术沙龙 #怎么让低端浏览器也能展现高端浏览器才支持的特性呢？差异化开发是一个很好的思路

Tashgy：# 百度技术沙龙 #百度梁 ne 童鞋分享~ 前端新技术差异化应用。html5 技术非常强大，但大部分功能和效果的实现依赖于高端浏览器。目前国内高端浏览器占比从低到高的过渡阶段，以差异化的思路可以让高端浏览器使用新技术获得较好的功能和效果，同时低端浏览器功能及展现不受影响。

晨昏树：# 百度技术沙龙 # normallize css 确实思路比较独特，不像传统的 css reset，而是为 html5 标签补充缺失属性 我在:http://t.cn/zlPkaS8

泡面的烙饼： @百度技术沙龙 石川老师回答问题真的很细心，可以好好看看他讲的开源项目

李二栋 Star：# 百度技术沙龙 #嘉宾介绍了国外的一些群来交流前端技术，那里有更多的大牛，包括 jquery 创始人，不一定依赖国内的 qq 群。