携程H5性能优化实践：Lizard框架与关键技术

"携程H5性能优化实战-魏晓军" 在本次分享中，魏晓军探讨了携程H5性能优化的各种策略和技术。首先，他介绍了HTML5（H5）的基本概念及其发展趋势。H5是HTML的最新版本，旨在满足现代网络应用的需求，包括HTML、CSS和JavaScript的组合。H5在旅游、游戏、广告等领域广泛应用，特别是在微信等平台上，因其跨平台、快速迭代和较低的开发成本而受到青睐。H5的宿主载体多样化，如浏览器、微信、TBV和第三方App，因此优化H5时需考虑与载体的协同优化。 接着，魏晓军介绍了携程的H5框架——Lizard。Lizard是一个专为H5、Hybrid和SEO开发的前端框架，遵循CommonJS标准，采用requirejs处理模块加载，并基于zepto构建底层库。它提供了MVC框架、网络访问、本地数据库操作以及与原生应用通信的能力，还有携程定制的UI组件库和多环境Widget组件库。 在优化知识点部分，魏晓军提到了几个关键点： 1. **单页模式（SPA）**：单页应用可以提供无缝的用户体验，减少页面加载，提升性能，并且降低了服务器压力。 2. **CSS瘦身**：通过清理冗余和不必要的CSS代码，减少文件大小，提高页面加载速度。 3. **图片压缩**：对上传的图片进行压缩，例如，大于2MB的图片压缩率可达90%，有效降低带宽消耗。 4. **基于Canvas和HTML5 FileAPI的picUpload组件**：利用这些技术实现客户端图片压缩，减少服务器负担。 5. **模块解耦**：通过模块化设计，使得代码更易于维护和扩展。 6. **静态资源拆分**：根据不同的业务场景拆分资源，避免一次性加载过多，提高加载效率。 最后，他还提到，携程的H5框架Lizard在处理图片上传时，采用了服务器端的H5图片压缩，进一步优化了性能。这些优化策略在携程的各个业务板块如酒店（hotel）、航班（Flight）和火车票（trains）的H5页面中都有所体现，通过C#等后端语言处理相关业务逻辑。 携程H5性能优化实战是关于如何利用HTML5技术，结合特定的框架和优化策略，提升H5应用在不同载体上的性能和用户体验的深入探讨。