WOT2015移动互联网研发者大会：HTML5专场

这门课解决什么问题

移动端 H5 的“慢”和“卡”，从来不是单一原因造成的。2015 年前后，智能手机性能参差不齐，WebView 兼容性混乱，H5 页面在业务高速增长下频频出现加载白屏、滚动掉帧、内存吃紧的问题。这个专场的四场分享，恰好把当时最常见的几个痛点拆开了：艺龙的工程师讲的是线上业务页面的整体优化思路，蘑菇街的工程师讲的是直接替换 WebView 内核来根治体验问题，还有两场分别讲自动化生成代码和高速业务场景下的调优手法。

说白了，这门课不是理论科普，而是一线团队把踩过的坑和验证过的手段拿出来讲。你现在做移动端页面，遇到的性能问题大概率还是这些：资源加载顺序不合理、图片和脚本拖慢首屏、WebView 本身能力不够用、开发效率低导致优化没时间做。学这门课，就是看别人如何从页面代码、构建方式、渲染内核三个层面去动手解决。

适合什么基础的人看

如果你是刚接触移动端开发的前端，建议先不要碰蘑菇街那场讲 Chromium 内核的，容易听不懂。你需要先补的是艺龙和蔡镜明这两场，它们讲的网络加载、缓存策略、页面渲染路径，属于通用方法论，不需要太多底层知识。如果你已经有两年左右 H5 开发经验，写过移动端页面、被线上性能问题折磨过，那么四场都可以直接看，尤其是曲毅的 Crow5 引擎那场，能帮你打开“用工具替代重复劳动”的思路。

基础要求其实不高：听得懂“WebView”“白屏时间”“HTTP 请求合并”这些词，知道 JavaScript 和 CSS 在页面渲染中大概扮演什么角色，就够了。但如果你连浏览器从输入 URL 到页面显示经历了什么阶段都说不清楚，建议先自己补一下浏览器渲染原理，再回来看这几场，否则容易只觉得别人讲得好，却不知道好在哪里。

建议先看哪几块

按依赖关系，我建议的顺序是：先看艺龙孙东的优化思路，因为它最接近日常开发——从业务场景出发，分析一个真实 H5 页面到底慢在哪些环节，然后逐个优化。这一场能帮你建立排查问题的整体框架。

接着看蔡镜明的移动页面调优，这一场更像是“进阶补丁”，讲的是高速业务场景（也就是流量大、逻辑复杂、不能砍功能）下，优化手段怎么取舍。这两场看完，你对常规性能优化手段已经有了完整认识。

然后再看曲毅的 Crow5 引擎。这场有点特别，它讲的是用引擎自动生成源码来简化开发。这里面最值得学的不是引擎本身——毕竟那是针对特定业务的工具——而是作者思考问题的方式：当开发效率拖了性能优化的后腿，与其一处处手写代码，不如从源头自动化。这是工具思维的启发。

最后再看蘑菇街的 Chromium 内核应用。这是四场里最硬核的，涉及替换系统 WebView、定制内核、处理兼容性问题。到了这个阶段，你已经知道常规优化手段的天花板在哪，才会明白为什么有人要动内核这一层。

学完能独立做什么

学完这套内容，首先，你能对一个移动端 H5 页面做完整的性能体检：哪些资源该合并、哪些该懒加载、缓存策略怎么配、首屏路径怎么裁剪。也就是说，别人丢给你一个线上页面，你能指出它慢在哪儿并提出具体的修改方案，而不是只会说“图片太多了”。

其次，你能根据自己的