本文转自：https://mp.weixin.qq.com/s/GIzXA51D7_hMqajCRuJE2g

9月15日，无惧17级台风“山竹”，320名开发者齐聚广州贝塔空间共同探讨“怎样做一款赚钱的小游戏”。针对众多开发者关心的重度H5游戏性能优化技巧，我们整理了现场速记分享给大家，详见下文：

王泽：各位开发者下午好！我叫王泽，是白鹭引擎的首席架构师。

今天给大家分享的题目是《重度H5游戏性能优化技巧》。之所以决定用这个题目，是因为我最近几周在广深一带拜访了很多使用白鹭引擎的开发者，发现特别是在广州一带，大部分开发者都在做重度H5游戏。在几周的拜访过程中，我协助许多广州的游戏开发团队进行游戏性能优化，并在在这个过程中发现很多开发者遇到的问题是非常相似的，于是我借这次开发者沙龙的机会，把这些优化技巧整理出来与广大开发者分享。

这些技巧都是我在实际项目中得到验证过的优化技巧，并且都是投入产出比很高的优化项，建议做重度H5游戏的开发者重点针对您们的游戏进行这些优化。

在开讲之前，我首先为大家回顾一下白鹭引擎的历史上几个比较重要的版本。2014年3月白鹭引擎发布了0.9版本，并产生了《围住神经猫》这一爆款。紧接着一鼓作气发布了1.0版本引入了完整的GUI，这使得开发者可以开始做具备大量复杂 UI界面的游戏，《愚公移山》就是这样的一款产品，他成功的在 2014年底就取得了每月180万流水的成绩。

接着在 2014年11月发布了 2.0版本，重点包含了白鹭引擎的工作流工具集，特别是 UI 编辑器与动画编辑器，这对游戏开发效率带来了重大提升，因此在 2014年底，使用了白鹭引擎 2.0 版本的《传奇世界H5》 成为了第一款月流水超过千万的 H5 游戏。2016年1月，白鹭发布了3.0版本，这个版本引入了 WebGL 渲染器，大幅提升了游戏渲染效率，这个版本得到了开发者的普遍欢迎，《决战沙城》更是用这个版本实现了 H5 游戏月流水三千万的成绩。

2016年底，白鹭引擎自研了一款名为《莽荒纪》的产品，并同步推出白鹭引擎4.0版本。这款游戏使用了大量的骨骼动画，对动画渲染性能和资源加载效率的要求非常高，得益于4.0版本针对这两点的优化，这款产品在绝大部分设备包括千元机上都有非常好的表现。2017年5月份，白鹭引擎发布了 5.0版本，市场上也出现了第一款月流水过亿的H5游戏——《传奇来了》。

紧接着，在微信发布小游戏后，第一时间发布了引擎5.1版本正式支持微信小游戏，《海盗来了》通过白鹭引擎的底层支持，仅用3天便将游戏从H5版本发布到微信小游戏平台，成为首款月流水过亿的微信小游戏。

回顾白鹭引擎的历史，我们会发现，随着软硬件的不断升级和白鹭引擎持续迭代，H5游戏行业高度不断被拉升。但我们坚持不忘初心，仍然持续高效的对版本进行优化。

白鹭引擎目前按照双周迭代的节奏，同时发布5.2稳定版与5.3新特性版本，如果开发者想要开发商业化游戏，可用5.2稳定版本来做；如果你想使用一些新的特性，比如说3D以及一些2D的高级优化技巧，就可以使用白鹭引擎最新的5.3版本来做。

白鹭引擎目前在H5游戏的市场占有率达到了70%。统计方法是：取样爱微游、疯狂游乐场以及QQ空间三个业内公认的头部渠道的Top30的游戏，逐一去看这些游戏采用了哪些游戏引擎。

除了H5游戏之外，白鹭引擎在微信小游戏上的市场占有率53%。这里有两种统计方法：第一种统计方法是把所有能统计到的微信小游戏都统计起来，一个一个抓包看是什么引擎做的。

通过这种方式，统计到的白鹭引擎的市场占有率高达80%，但是我认为这是有失偏颇的数据，因为能统计到的小游戏有很大一部分是因为与白鹭官方人士有微信好友关系，而这部分好友几乎都在使用白鹭引擎开发微信小游戏，所以我认为这种统计方式是并不准确的。于是我们采用了另一种更为公平的统计方法，通过相对权威的阿拉丁统计数据，把阿拉丁榜单Top50拉出来，得出白鹭引擎市场占有率为53%。

据不完全统计，这五年中，白鹭引擎累计运转的H5游戏和微信小游戏的流水数据约为200亿。非常感谢大家对白鹭引擎的支持。今天能有这个成绩并不是完全是依靠白鹭自己做的，引擎技术并不能解决所有的问题，最大的外因是依靠各位一起努力的结果，特别是各位游戏开发者，浏览器底层技术提供方、渠道方、以及很多支持伙伴的帮助。

除了外因的帮助之外，白鹭自身也帮助开发者做了很多事情，我个人是Flash页游研发出身，白鹭引擎团队的大部分研发也都是游戏行业出身，所以白鹭的研发团队更了解也被称为“手机页游”的H5游戏开发者的痛点需求，并且这五年为各地的H5游戏开发者提供了总计1400天的驻场支持，飞到各个城市，包括广州、深圳、上海、厦门、福州、成都、武汉、南京、西安，当然还有北京。我平均基本上有三分之一的时间是不在公司里的，都在为各地的开发者解决各种各样的问题。通过这些比较务实、接地气的方式，保证白鹭引擎可以运行在尽可能多的设备上，并提升游戏在低端机上的体验。

今天广州开发者沙龙的主题是“怎样做一款赚钱的小游戏”。我认为解决技术上的短板决定了游戏是否能赚钱的下限。针对游戏运营的几个关键数据，游戏的运行性能主要影响玩家的在线时长，游戏加载性能主要影响玩家的前期留存。我今天重点介绍如何提升游戏的运行性能。

我见过的大部分寻求技术帮助的 CP 都会提及游戏性能需要提升。但是我认为性能糟糕是一个技术术语，它在产品上一般有如下三种体现方式：

1、帧频很低。

2、设备发热。

3、不定期卡顿。

虽然看起来这些问题都是性能问题，但是产生这些问题背后的原因则是完全不一样的。

在解决问题之前，需要将这些问题首先输出一个可量化的数据指标。

帧频很低可以被量化为：在特定设备上的帧频是XX帧，其中 JavaScript 逻辑开销 XX毫秒，渲染开销YY毫秒，这些数据在白鹭引擎的性能面板中都有体现。

设备发热看似是很难量化的，并不是所有操作系统都提供了设备温度的 API。因此我们向开发者推荐另一种方法作为量化方式，首先将设备充满电，然后统计游戏在 XX分钟后的剩余电量。由于耗电量和发热基本成正比，所以解决耗电问题，发热问题就也能同步得到解决。

至于不定期卡顿。一定要记录卡顿是否存在规律。比如是播放动画的瞬间？打开UI面板的瞬间？或者是毫无规律？

上述问题量化之后，接下来再来逐一地尝试解决这些问题。

帧频低和发热主要有如下四个原因：

1、渲染内容过多。

2、渲染方式不当。

3、计算开销过大。

4、 大量创建对象。

这四点又分属两个类别，分别是 JavaScript逻辑开销和引擎渲染开销。关于渲染内容和渲染方式不当最终是可以在引擎渲染层这个环节想办法解决的。而计算开销过大和大量创建对象都是在用户逻辑的JavaScript层去解决的。这两块的解决方式是完全不一样的，对渲染来说，你需要去尝试理解WebGL底层的渲染原理是什么，而对于JavaScript，你需要了解JavaScript底层的一些原理。

首先聊聊引擎渲染层面的东西：

1、渲染内容过多。在屏幕之外的内容，可以设置隐藏，不要执行渲染。这就提到一个很有意思的问题了，看似很简单优化方法为什么不在白鹭引擎内部实现呢？其实这涉及到白鹭引擎的一个核心设计理念：不要替开发者去做“自作聪明”的优化。这样才能保证优秀开发者做出更好的游戏。除了屏幕外的内容不进行渲染之外，游戏普遍有很多UI弹窗，当你打开弹窗的时候，强烈建议你把游戏背景隐藏，这同样可以节省大量的渲染开销。

2、渲染方式不当。来看看底层原理：

白鹭引擎2D是如何渲染游戏的多张纹理的？ 在白鹭引擎里，2D是一次性提交所有的数据，然后设置渲染模式，执行渲染批次，再设计渲染模式，再执行渲染批次。如果你能保证渲染模式这个东西是没有发生变化的，就可以一次尽可能多地渲染，在这种情况下就可以做一次的渲染批次，这个优化听起来很简单，我说说在实际游戏里的典型案例。

这张图是我昨晚自己画的示例图。做游戏时经常会遇到这样的场景，就是有很多人、很多怪，每个人都包含了影子、模型动画、血条三个部分。最简单的渲染方式是，将一个人设置成一个 DisplayObjectContainer，这个对象有三个子对象：一个人、一个影子和一个血条，这样每个人的渲染次数就是3，进而8个人的渲染次数就是24。优化后是10，如何做这个优化？方法非常简单，就是你把所有的影子放在一个Container上，把人放在一个Container上，再把血条放在一个Container上。

由于所有影子的纹理都是一样的，所以引擎底层会自动开启批次合并，渲染次数是是1，然后渲染8个人，这8个人的纹理一般都是不一样的，所以就是8，上面就是血条的纹理也是一样的所以也是1。把这三者加起来，最终的优化结果就是从 24降低到10。

第二个示例。这是大家做的重度游戏的典型UI，DrawCall是30，这种游戏可以做很多优化，就是把所有的图片、文字合成一张纹理集。这个全做完之后，渲染批次就从30变成2，之所以不是1而是2，是因为右上角的lv888肯定是个动态文本，无法参与批次合并。

所以这就是一个简单的例子，希望大家以后做UI 时可以尝试着去把所有的动态文本都尽可能放在最上层，把图片都放在下层，并将这些图片合并成纹理集。特别是在游戏的 ListItemRenderer 之中，一般游戏中的一个 List 至少会显示 5个 ListItemRenderer，如果你能将 ItemRenderer的DrawCall降低5，那整体的 DrawCall就能降低 25，所以针对ListItemRenderer的优化是投入产出比非常高的，强烈推荐各位开发者重点优化这里。

3、计算开销过大。对骨骼动画使用缓存，优化骨骼开销；避免大量的数学计算与浮点数计算；逻辑帧与渲染帧分离。这个提升是比较明显的，因为很多游戏都是做30帧的，但是现在有些是60帧，所以要作一些逻辑帧和渲染帧的分离，逻辑上可以是15帧，然后渲染上做60帧，那么逻辑的开销就可以少很多。

4、还有一个是非常重要的大家可能不太注意的，就是大量创建对象。JavaScript虚拟机有一个特点，就是对象创建的开销远远大于对象计算的开销，并且对象创建会导致垃圾回收，而垃圾回收会导致游戏不定期卡顿，所以有一个很重要的原则就是不要在你的主循环里创建任何对象，强烈建议游戏中的人物、怪物、技能特效统统做成对象池，这样可以大幅降低游戏的不定期卡顿现象的出现。分享一个常用的测试函数。

来看这个函数的原理。它就是显示了每一秒钟去拿一个hashCount跟上一个hashCount作对比，这个hashCount是由白鹭引擎内部 API，用于统计引擎对象的创建数量。如果你的游戏静止放置不动，那么理论上hashCount diff的结果应该是0，实际上要尽可能控制在120以下，我给大家分享一个数据，我见过的最赚钱的那一批游戏的 hashCount diff 都控制在120以下的。

如果这个数字超标，应该如何去解决呢？只需要在引擎的 HashObject 的构造函数这里添加一个断点，在运行时去检查调用堆栈就可以了。

我协助优化过一款产品，它的hashCount diff数字高达4000，每秒创建4000个对象，我调试他的代码后发现，其实只是一个很小的问题导致了这个结果，花了15分钟修复之后，游戏的发热、卡顿等问题都得到了大幅的缓解。

接下来我跟大家介绍一下白鹭的3D引擎的核心功能，以及内部优化技巧，也给大家做重度游戏时以一些启发。

Egret3D内部的所有资源都采用了GLTF文件格式。这是一种对OpenGL ES、WebGL非常友好的3D内容格式标准。面向实时渲染，尽量提供可直接传输给图形API的数据格式，而不再需要反序列化。

刚刚我提到了尽量提供可直接传输给图形API的数据格式，在 Egret3D内测版本中，在3D引擎加载一个模型文件，需要首先加载了模型文件，然后解析模型文件，这就像配置文件一样。第三步要生成WebGL所需要的数据格式，最后把它提交到GPU。而在正式版本的流程变成了加载新的 GLTF文件，进而由于GLTF的文件格式和GPU想要的文件格式是几乎一样的，所以不需要解析也不需要生成，直接把它作一个简单的ArraryBuffer切割，然后提交到 GPU就可以了。

通过这个优化达到什么样的效果？模型解析速度提升170%，内存占用降低1倍，加载速度提升30%，所有这些优化的底层的本质原因是由于底层采用了GLTF的模型文件的标准范式。这就相当于是白鹭引擎3D版本的比较常见的引擎优化。

《泡泡学园OL》是白鹭自研团队打造的一款标杆品质的3D微信小游戏。在这款游戏制作过程中，不断挑战 Egret3D 与微信小游戏的性能极限极限，具体技术指标包括： 100,000 Vertex ， Lightmap贴图、GPU骨骼动画，GPU粒子动画，碰撞引擎，帧同步网络通讯，基于行为树的AI 等。

这款游戏前期开发过程中使用了 Unity3D 编辑场景，然后通过白鹭引擎的 Unity3D导出插件发布到 Egret3D 中。目前已经使用白鹭引擎正在研发的 3D 编辑器进行后续开发和维护。

目前白鹭科技已经发布了 Egret3D的1.1版本，即将在9月底发布1.2版本，这个版本重点针对开发者的开发效率进行优化，首先是推出一款可视化的调试工具 Egret Inspector 3D ，其次就是将3D编辑器提供给更多开发者进行试用并收集反馈，如果您已经使用 Egret3D 立项并进入项目开发阶段，可以优先试用3D编辑器。

以上就是我为大家分享的全部内容。谢谢大家！

后记

早上刚转发了这篇文章，下午就有幸和作者电话会议请教了一波，学到了不少，哈哈哈，困扰了好一会的加载策略也有了思路，感谢大神！

【Egret优化分享】白鹭引擎王泽：重度H5游戏性能优化技巧相关推荐

  1. 白鹭引擎王泽：重度H5游戏性能优化技巧

    9月15日,无惧17级台风"山竹",320名开发者齐聚广州贝塔空间共同探讨"怎样做一款赚钱的小游戏".针对众多开发者关心的重度H5游戏性能优化技巧,我们整理了现 ...

  2. 白鹭引擎王泽：重度H5游戏性能优化技巧标题的文章

    我们的引擎架构师做某一沙龙活动的演讲速记,纯纯的干货,分享给大家. 王泽:各位开发者下午好!我叫王泽,是白鹭引擎的首席架构师. 今天给大家分享的题目是<重度H5游戏性能优化技巧>.之所以决 ...

  3. 过亿月流水H5游戏优化分享、腾讯自研H5游戏优化分享、Layabox官方优化分享，全在这里了！...

    非常抱歉,小编整理的大神干货分享来晚了,今天的文章献给Layabox的游戏开发者.感谢Layabox开发者沙龙的分享嘉宾们,带来了非常干货的优化经验,小编只是干货分享的搬运工. 火爆的深圳与广州站La ...

  4. LayaBox H5游戏性能优化

    对于游戏开发避免不了性能相关优化,小编总结了如下: 一.内存优化(如:代码不规范,初始化定义的变量,销毁时未及时清理会存在内存中) 1.对象池优化,LayaAir引擎中的对象池:laya.utils. ...

  5. H5游戏性能优化总结

    少使用Alpha混合. 显式停止计时器,让它们准备好进行垃圾回收. 使用事件侦听器并在不需要时删除这些侦听器.(确认) 在不需要触摸交互性时显式禁用触摸交互性.(默认就是false 确认) 合理使用d ...

  6. 白鹭引擎 4.0 发布 让重度H5游戏研发更简单

    今天,白鹭引擎 4.0正式发布,此次版本包含众多新特性,主要提升了目前市场上重度HTML5游戏性能,内存以及开发效率等,为开发者提供强有力的技术支撑,保证用户在开发重度游戏时可以随心所欲的实现游戏功能 ...

  7. 推动门html5,白鹭引擎CEO陈书艺：推动游戏前行 开启HTML5游戏之门

    11月19日,白鹭引擎主办的首届HTML5移动游戏大会,在国际会议中心隆重召开.白鹭引擎创始人兼CEO陈书艺,在会上做主题为"推动游戏前行,开启HTML5游戏之门"的演讲.HTML ...

  8. 白鹭引擎正式支持微信小游戏开发

    12月28日微信迎来更新,正式上线小游戏,并开放了小游戏开发文档和开发者工具.在微信发布新版本后,白鹭引擎立即添加了对于微信小游戏开发的支持,开发者只需要使用白鹭引擎的最新版本,通过使用白鹭引擎完整工 ...

  9. 极光会客厅：大型H5游戏如何登陆微信小游戏及游戏性能优化分享

    上周末,由极光网络主办的首期"极光会客厅"正式开门迎客.在本次的"2D小游戏开发实战技术沙龙"上,极光网络客户端主程陈策以及极光网络项目总监陈源向一众与会者分享 ...

最新文章

  1. Delphi 10.X 不用联接真机或模拟器编译出APK
  2. ASP.NET Core Web API + Identity Server 4 + Angular 6 实战小项目视频
  3. github流程图_逆天插件，VSCode里也能画流程图了？Visio可以淘汰了？
  4. Python消息队列
  5. APP运营者如何对用户的数据进行分析？
  6. python极客项目编程 豆瓣_《Python极客项目编程》
  7. php 5.5.12 服务器php.ini配置
  8. snakeyaml操作yml文件中注释的处理
  9. Visual Studio MFC编程 程序调试时所遇到的问题及解决方法
  10. 辞旧迎新又一年(18年年终总结)
  11. 【CF724F】Uniformly Branched Trees 动态规划
  12. Android studio:select process to attach to...找不到debug调试的目录
  13. 【ZZULIOJ】1008: 美元和人民币
  14. 【论文写作】如何写科技论文？万能模板！！！（以IEEE会议论文为例）
  15. Nextcloud私有云 - 零基础搭建私有云盘
  16. 论文阅读【异常检测】ModelCoder: A Fault Model based Automatic Root Cause Localization Framework for Microservi
  17. 【仪器仪表专题】万用表“几位半”中半位的含义
  18. 6-2 使用函数输出一个整数的逆序数 (20分)
  19. 【tkinter组件专栏】Frame：承载规划布局的框架
  20. 《淘宝网》之系统质量属性分析

热门文章

  1. uva 1362 区间DP
  2. pythoc_autocad_标注_all_横线_竖线
  3. [BZOJ4605]崂山白花蛇草水（主席树套kd-tree）
  4. 淘宝 API 开发步骤
  5. 解读数据分析是神马？
  6. 白嫖高级神器，不付费真香！
  7. python获取接口返回值_Python+request 登录接口reponse的返回值token跨py文件的传递《二》...
  8. linux中grep -E参数,linux中grep命令
  9. 社区折腾日志：基于python搭建个人微信/支付宝免签支付功能
  10. 优化单页面的技巧和文章不被收录原因