1. Web 产品性能优化
SQL 调优
架构优化
降请求的数量
降请求的 Size （服务端 gzip 前端静态资源的
打包压缩等）
利用 js 异步编程，尽可能的”榨干” CPU
基于这样的原则，前端能做些什么？
Lizard 前端 化 践优 实
Front-end Coder & Report Author ： 卢玮

2. 老生常谈：如何做性能优
化

3. Web 产品性能优化
SQL 调优
整体架构优化
降请求的数量
降请求的 Size （服务端 gzip 前端静态资源的打包压缩
等）
利用 js 异步编程，尽可能的”榨干” CPU

4. Lizard 优 化 实 践 — 降 低 JS 体
量

5. Lizard 化 践—降低优 实 JS 体量
Lizard2.0 请求摘要

6. Lizard 化 践—降低优 实 JS 体量
Lizard2.1 请求摘要

7. Lizard 化 践—降低优 实 JS 体量
可以看出：
1.2.1 的核心 JS 尺寸较之 2.0 有了大幅的下降（从 120K 下
降到 80K—50% 的减少）
2.利用 CDNCombo 技术，有效的减少了 http 请求的次数
2.1 如何做到的

8. Lizard 化 践—降低优 实 JS 体量
老版本的架构缺陷
1 ） Hybrid 和 H5 处理代码杂糅，走的 IF ELSE （源代码
级，继承自 1.1 版本的技术债务）
2 ）继承体系混乱，重复代码较多（源代码级，继承自 1.1
版本的技术债务）
3 ）不常用文件也打入到框架 JS （发布级）

9. Lizard 化 践—降低优 实 JS 体量
针对不同的 UA 加载不同的 JS
重新整理 UI 的继承 关系，大幅削减重复代码
通过在实施过程 中的尝试，逐步删除了之前项目遗留的
垃圾代码
不常用模块不在打入框架 JS 中
利用资源组的 CDNCombo 产品，减少 js 请求的 次数

10. Lizard 优化实践—充分利用浏
览器的并行处理机制

11. Lizard 化 践—并行 理优 实 处
有时候，发现大问题的往往是最简单的工具，当所有人都在绞尽脑汁减少
JS 体积的时候，一个偶然的发现突然为性能优化指出了新的方向。
没错，这个就是框架的 JS ，是不是让人顿足捶胸
，没错，这个时间片内，浏览器除了加载 JS ，啥
也没做，真是暴殄了“并行加载，异步执行”，这
个天物

12. Lizard 化 践—并行 理优 实 处
让我们先 Lizard2.1 首页加载流程
请求页面 document 文档，下载 JS,CSS 等资源
解析字符串中的 lizard-config 配置，请求数据、渲染
模板
根据 lizard-config 中的 controller 配置，拿到对应视
图的构造函数，根据上一步渲染好的视图节点完成 View
的实例化
显示新的视图

13. Lizard 化 践—并行 理优 实 处
2.X 版本的两大特性
通过 Lizard-config 这个核心配置，提供服务端和前端都
可以识别的 Ajax 以及模板配置，解决 SEO 问题
提供 Hybrid 和 Online 环境下的单页路由解决方案
So the question is:
真的有必要等所有的功能 JS 下载完毕后再去做页面的
初始化动作么？

14. Lizard 化 践—并行 理优 实 处
拆分框架 JS 当负责渲染的 JS 下载完毕，即开始解析页面配
置，同时异步加载路由控制 JS 。
好处，充分的利用了“并行加载，异步执行”的特性，把浏览器
性能发挥到极致
代价，代码复杂度提高，需要考虑两者的完成的先后顺序，
利用 Lizard 命名空间的全局变量或者发布 / 订阅机制解决。

15. Lizard 化 践—并行 理优 实 处
下载渲染相关 JS
执行渲染
下载单页路由相关 JS
• 初始化 View

16. Lizard 化 践— 比优 实 对 测试
• 由于 Lizard 本身是 框架，所以首 的单页 页
性能是其性能的重要考量数据。
• 面准测试页 则
• 1 ）模板 面尽可能少的静 源页 态资
• 2 ） View 面尽可能少的页 业务逻辑

17. Lizard 化 践— 代优 实 测试 码

18. Lizard 化 践— 比数据（优 实 对 1 ）
版本 2.0 2.1 2.2
流 量总
（ KB ）
212 183 178

19. Lizard 化 践— 比数据（优 实 对 2 ）
2.0 2.1 2.2
内网 488 77 29
50K 5349 66 21
250K 1232 64 23
750K 455 73 21
1M 254 68 26
版本
网速
从资源下载完成到开始渲染的时间（ ms ）

20. Lizard 化 践— 比数据（优 实 对 3 ）
2.0 版本 由于在框架 JS 下载完毕后还会再去加载情感化组件，以完成程
序的初始化，因此这个指标会随网络条件的变化而变化。
同时 2.0 未做环境判断，导致执行 Hybrid 相关 JS ，消耗了一定的计算资
源。
2.1 利用 CDN Combo 不会再额外请求情感话组件， 2.2 则优化了情感
化组件后打入到框架 JS 中，因此这个指标基本不会随网络变化而变化。
由于 2.1 只会在初始化单页控制类（ APP ）后才会渲染页面，因此这个
指标逊于 2.2. 。

21. Lizard 化 践— 比数据（优 实 对 4 ）
DOMContentLoaded 时间（ ms ）
2.1 2.2
内网 730 299
50K 19460 8030
250K 4510 2010
750K 1570 720
1M 1060 350
版本
网速

22. Lizard 化 践—优 实 结论
由于 2.2 版本做了功能拆分，所以，下载资源减少 50% 多，所以加载时
间也缩短一半，结合之前一个表，可以认为从打开浏览器下载资源到页
面渲染完成 2.2 比 2.1 提升约 40 ～ 50% ！

23. Lizard 化 践—优 实 让 Lizard 支持多页
单页 / 多页
公司很多营销页面都只有一个页面，但是也用了单
页框架，是不是太重了？
增加配置项，决定渲染完毕后是否继续加载单页处理
相关的 JS