淘宝HTML5实践：从语义化到本地存储

"淘宝在HTML5实践中的应用与探索，主要涵盖了HTML5的新特性，如语义化、本地存储、设备访问、WebSocket、多媒体、3D及CSS3等，并讨论了HTML5的兼容性问题以及如何进行功能降级兼容。" 在2011年的报告中，淘宝的前端开发工程师拔赤分享了淘宝在HTML5方面的实践经验。HTML5作为新一代的网页标准，带来了许多创新，例如： 1. **语义化(Semantic)**：HTML5引入了新的语义化标签，如<header>, <nav>, <article>, <section>, <aside>等，这些标签有助于提高页面结构的可读性和可访问性，使内容更具意义。 2. **本地存储(Offline&Storage)**：HTML5的Web Storage（包括localStorage和sessionStorage）以及IndexedDB提供了更强大的数据存储能力，允许应用程序在用户离线时也能工作。 3. **设备通用(DeviceAccess)**：通过Geolocation API、Device Orientation API等，HTML5允许网页获取用户的地理位置信息和设备方向，增强了网页与硬件的交互。 4. **WebSocket支持(Connectivity)**：WebSocket提供了一种持久化的双向通信协议，使得实时在线应用如聊天、游戏等变得更加高效。 5. **多媒体(Multimedia)**：<audio>和<video>标签简化了音频和视频内容的嵌入，不再依赖Flash等第三方插件。 6. **三维、图形和特效(3D/Graphics/Effects)**：WebGL使得在浏览器中实现3D图形成为可能，CSS3的Transitions和Animations则为网页添加了丰富的动态效果。 7. **CSS3**：CSS3提供了更多的选择器、边框、阴影、过渡、动画等功能，大大提升了网页的视觉表现力。 然而，HTML5的广泛采用面临一个关键挑战，那就是**兼容性问题**。不同的浏览器对HTML5新特性的支持程度各异，尤其是在老版本的IE浏览器中。为了应对这个问题，拔赤提到淘宝采用了功能降级兼容策略，利用JavaScript和polyfill库来模拟实现HTML5特性，确保在不支持HTML5的浏览器中仍能正常工作。 例如，淘宝的"云客服"项目就利用了HTML5的CrossDocumentMessaging跨域技术，而淘宝2011年的首页则通过创建HTML5标签并用JavaScript模拟支持，使IE6/7/8这样的旧版浏览器也能识别和处理新的元素。此外，使用CSS3提升界面美观度的同时，也会为不支持CSS3的浏览器提供回退方案。 淘宝的HTML5实践展示了如何在实际项目中充分利用新标准带来的优势，同时也揭示了在兼容性问题上的解决思路，这对于其他希望拥抱HTML5的开发者具有重要的参考价值。