面试官问：如何实现 H5 秒开？
输入“/”快速插入
面试官问：如何实现 H5 秒开？
飞书用户28642023年6月9日创建
2258
2767
20
我在简历上写了精通 H5，结果面试官上来就问：
同学，你说你精通 H5 ，那你能不能说一下怎么实现 H5 秒开？
画板
由于没怎么做过性能优化，我只能凭着印象，断断续续地罗列了几点：
•
网络优化：http2、dns 预解析、使用 CDN
•
图片优化：压缩、懒加载、雪碧图
•
体积优化：分包、tree shaking、压缩、模块外置
•
加载优化：延迟加载、骨架屏
•
...
看得出来面试官不太满意，最后面试也挂了。于是我请教了我的好友 Gahing ，问问他的观点。
Gahing：
你列的这些优化手段本身没啥问题，如果是一个工作一两年的我会觉得还可以。但你已经五年以上工作经验了，需要有一些系统性思考了。
好像有点 PUA 的味道，于是我追问道：什么是系统性的思考？
Gahing：
我们先说回答方式，你有没有发现，你回答时容易遗漏和重复。
比如说「图片懒加载」，你归到了「图片优化」，但其实也可以归到「加载优化」。同时你还漏了很多重要的优化手段，比如资源缓存、服务端渲染等等。
究其原因应该是缺少抽象分类方法。
那针对这个问题，应该如何分类回答？
Gahing：
分类并非唯一，可以有不同角度，但都需遵从 MECE 原则（相互独立、完全穷尽），即做到不重不漏。
•
按页面加载链路分类：容器启动、资源加载、代码执行、数据获取、绘制渲染。
•
•
按协作方分类：前端、客户端、数据后台、图片服务、浏览器引擎等。
•
按流程优化分类：前置、简化、拆分。
◦
前置即调整流程，效果上可能是高优模块前置或并行，低优模块后置；
◦
简化即缩减或取消流程，体积优化是简化，执行加速也是简化；
◦
拆分即细粒度拆解流程，本身没有优化效果，是为了更好的进行前置和简化。
◦
这个角度抽象层次较高，通常能回答出来的都是高手。
•
多级分类：使用多个层级的分类方法。比如先按页面加载链路分类，再将链路中的每一项用协作方或者流程优化等角度再次分类。突出的是一个系统性思维。
选择好分类角度，也便于梳理优化方案的目标。
现在，尝试使用「页面加载链路+流程优化+协作方」的多级分类思维，对常见的首屏性能优化手段进行分类。
好像有点东西，但是我并没有做过性能优化，面试官会觉得我在背八股么？