威狐小編:11月20-22日，qqjoy嘉年華在上海舉辦。20日當(dāng)天的qq開發(fā)者大會(huì)，騰訊公司qq小程序/小游戲平臺(tái)技術(shù)負(fù)責(zé)人朱煌帶來了技術(shù)賦能--小程序小游戲最佳實(shí)踐的演講。

對(duì)于玩家來說，小程序/游戲在體驗(yàn)上一定是開了就用，開了就玩，這對(duì)性能也提出了更高的要求。目前大部分用戶反饋集中在啟動(dòng)速度和運(yùn)行性能等方面。

朱煌表示，在loading界面等待3秒以上的用戶流失率上升非常快，如果首次啟動(dòng)速度可以在3秒內(nèi)完成，那么可以減少75%的流失。對(duì)于如何優(yōu)化游戲加載速度，朱煌給出了具體的答案。

騰訊為小游戲開發(fā)者準(zhǔn)備了大招:qq和ieg去年一起發(fā)起聯(lián)合開發(fā)的crossengine，為小游戲和手游同時(shí)提供3d引擎能力和工具支持。另外，可以一鍵開發(fā)支持手機(jī)游戲、qq平臺(tái)和微信小游戲平臺(tái)多平臺(tái)運(yùn)行，還計(jì)劃支持原生云游戲。

以下為演講實(shí)錄

朱煌:各位開發(fā)者，大家上午好！我是qq小程序游戲隊(duì)Hank

今天非常高興能夠在這里從技術(shù)角度分享小程序游戲平臺(tái)的最佳實(shí)踐和思考。

首先我們簡(jiǎn)單回顧一下平臺(tái)功能開放的過程:自去年7月上線開放訪問以來，憑借較低的接入成本和快速迭代的生態(tài)能力，吸引開發(fā)者加入，已經(jīng)打造出不少優(yōu)質(zhì)的小程序和游戲。

那我們從最早基礎(chǔ)建設(shè)，到不斷開發(fā)的新能力，比如云開發(fā)和實(shí)時(shí)音視頻的能力，去幫助直播類的小程序快速上線。

同時(shí)，QQ把自己的關(guān)系鏈通過子域的方式開放給開發(fā)者，可以開發(fā)出基于好友和群關(guān)系的玩法，提高用戶粘性。

除了關(guān)系鏈以外，QQ特有的生態(tài)，包括群和彩簽?zāi)芰?，以及加好友加群等私域流量也以API的方式開放出來。

小程序小游戲和平臺(tái)的結(jié)合越來越緊密。在這個(gè)過程中，我們一直是開發(fā)者的幫手，來生產(chǎn)更多優(yōu)質(zhì)的內(nèi)容。

最近幾個(gè)月，我們一直在思考兩個(gè)問題，第一個(gè)是，平臺(tái)還能提供哪些能力，尤其在QQ強(qiáng)大的社交背景下。那這里也做了一些嘗試，比如對(duì)戰(zhàn)游戲在用戶數(shù)據(jù)上的確有更好的表現(xiàn)。

另外一個(gè)方面，小程序小游戲在體驗(yàn)上一定是“點(diǎn)開即用、點(diǎn)開即玩”的方式，對(duì)性能也有更高的要求。那我們也一直在思考性能有沒有進(jìn)一步提升的空間，哪些是可以一起來優(yōu)化。

首先，我們發(fā)現(xiàn)的一個(gè)趨勢(shì)是，越來越多的虛擬形象在游戲中的使用，可以提高游戲的沉浸感和趣味性。比如snapgames通過bitmoji帶來更多高品質(zhì)的游戲?；氐轿覀兊钠脚_(tái)，也有非常多的3D形象在游戲中使用，只是大部分都是骨骼小人和灰皮小人，缺少精細(xì)的運(yùn)營(yíng)。那帶來的游戲體驗(yàn)感也會(huì)差一些。主要的原因是素材制作的成本還是比較高的。

虛擬形象一直都是QQ的社交資產(chǎn)，從PC時(shí)代的QQ秀，到移動(dòng)時(shí)代的厘米秀，已經(jīng)是一套體系，并且積累了非常多的用戶。

這里的玩法，從厘米秀選擇，2D/3D主頁(yè)，到AIO的動(dòng)作/表情玩法，以及最近我們上線的自動(dòng)捏臉和裝扮，可以滿足更多個(gè)性化的需求。厘米秀已經(jīng)活躍在QQ的各個(gè)場(chǎng)景。

厘米秀有沒有可能和小游戲結(jié)合到一起呢？隨著平臺(tái)和產(chǎn)品的開放，答案是肯定的。我們把這部分能力做成厘米秀Kit，放到小游戲生態(tài)中。也能帶來不少效率的提升，原來在一個(gè)游戲團(tuán)隊(duì)，需要設(shè)計(jì)師、前端、后臺(tái)一起協(xié)作，幾個(gè)星期甚至到數(shù)月才能做出來的效果。那現(xiàn)在只需要一位前端做一下API的接入，幾天就能完成。那這里的設(shè)計(jì)原理和接入方法具體是怎么樣的。

首先看一下現(xiàn)有的小游戲架構(gòu)，初步分為三個(gè)部分：上部是游戲業(yè)務(wù)JS邏輯，中間是第三方引擎；底部是平臺(tái)的native引擎。

厘米秀kit實(shí)現(xiàn)的是平臺(tái)和引擎在模型標(biāo)準(zhǔn)和加載能力的對(duì)齊。

開發(fā)商只需要簡(jiǎn)單的代碼接入，其他的可以交給我們，就可以把用戶個(gè)性化的形象帶入到游戲中。目前厘米秀kit已經(jīng)有部分游戲在接入，歡迎大家來使用。除了能力建設(shè)外，作為開發(fā)商和用戶的連接者，我們也一直在傾聽用戶的聲音。

這個(gè)是最近半年來提取的一些反饋關(guān)鍵字。可以看到一些贊許的，那更多的是用戶反饋的問題，打不開、卡頓是經(jīng)常出現(xiàn)的關(guān)鍵字。那我們從感性的反饋，去做一下理性和技術(shù)的分析。

首先是啟動(dòng)速度，啟動(dòng)耗時(shí)和留存有些密不可分的關(guān)聯(lián)，有位研究人機(jī)交互的Jakob教授，發(fā)現(xiàn)響應(yīng)時(shí)間有三個(gè)非常重要的時(shí)間點(diǎn)：

首先是100ms，如果超過100ms，人會(huì)感受到交互的不連續(xù)。大部分的native頁(yè)面打開都是在100ms內(nèi)。

第二個(gè)是1s，超過1s，會(huì)感受到思路被打斷。這也是為什么很多性能優(yōu)化的目標(biāo)都是秒開。如果超過10s，大部分用戶會(huì)選擇關(guān)閉。那我們看一下，大盤首次打開流失分布圖，也就是說在loading界面就關(guān)閉的用戶關(guān)閉的時(shí)候等了多久。

其中可以看到，大于3秒，流失率升得很快，如果首次啟動(dòng)速度能優(yōu)化到3s內(nèi)，我們能減少75%的用戶流失。那有沒有什么辦法？

首先簡(jiǎn)單看一下啟動(dòng)的流程，從點(diǎn)擊到渲染出來，平均iOS需要3-4s，android需要5-6s，經(jīng)過分析，大部分的耗時(shí)在業(yè)務(wù)包的下載。

而外網(wǎng)的首包平均大小是2.29M，雖然有壓縮的辦法，意味著光下載可能都需要幾秒，這里有不少優(yōu)化空間。另外加載數(shù)據(jù)也需要一個(gè)以上的RTT，可能有上百毫秒的延時(shí)。

針對(duì)這些場(chǎng)景/部分，我們建議一些優(yōu)化辦法。首先是分包，這個(gè)是最有效的優(yōu)化手段，可以把啟動(dòng)邏輯放在首包，其他放分包延遲加載。

另外針對(duì)游戲，我們?nèi)ツ甑淄瞥隽艘娌寮恍枰趃ame.json配置引擎信息，能做到跨游戲的引擎插件復(fù)用，實(shí)際測(cè)試平均能提速28%。

最后一個(gè)是數(shù)據(jù)預(yù)拉取的API，可以提前或者并行拉取啟動(dòng)需要的JSON數(shù)據(jù)或者對(duì)應(yīng)的資源包zip。加快首幀的加載。

另外一方面，渲染性能也是體驗(yàn)非常重要的部分。一般小于30fps就可能有卡的感覺。那這個(gè)占比在外網(wǎng)接近36%。

那怎么發(fā)現(xiàn)卡頓點(diǎn)具體在哪，我們提供了FrameFrofile工具，可以通過真機(jī)調(diào)試看到每幀的函數(shù)調(diào)用和消耗，對(duì)應(yīng)來優(yōu)化。實(shí)際FPS低是有一些常見的原因：

（1）JS邏輯過于復(fù)雜，復(fù)雜的部分推薦用異步化和worker來解決。

（2）幀間隔設(shè)計(jì)不合理，比如實(shí)際的游戲復(fù)雜度每秒只能處理30幀，但是設(shè)置了60次回調(diào)，會(huì)導(dǎo)致處理不過來。這里可以采用動(dòng)態(tài)幀率的API來設(shè)置合理的回調(diào)次數(shù)。

（3）紋理和物理效果復(fù)雜，可以通過一些降級(jí)、復(fù)用的方式優(yōu)化。平臺(tái)也做了GPU加速來優(yōu)化這里的性能體驗(yàn)。

有了這些優(yōu)化后，大部分游戲都可以流暢的跑起來。但是隨著小游戲和硬件的發(fā)展，游戲的玩法越來越多樣，尤其現(xiàn)在的大型3D游戲也嘗試在小游戲平臺(tái)跑起來。由于這些游戲模型頂點(diǎn)和面數(shù)非常多，drawcall也非常多，性能瓶頸比較明顯。

尤其基于webgl渲染的框架，大部分邏輯都是在JS層，而且在iOS平臺(tái)沒有JIT性能會(huì)更差。當(dāng)前框架已經(jīng)不能滿足這些游戲的要求，帶著邏輯下沉到native的思路，和IEG游戲引擎團(tuán)隊(duì)的研究。

我們從去年開始一起聯(lián)合開發(fā)CrossEngine，為小游戲和手游同時(shí)提供3D引擎能力和工具的支持。

CrossEngine主要包括全新設(shè)計(jì)的渲染接口，能使用最新的硬件能力，比如iOS的Metal。也使用了最新的ECS架構(gòu)，并且一次開發(fā)能夠支持手游、QQ平臺(tái)和微信小游戲平臺(tái)多平臺(tái)運(yùn)行，也計(jì)劃支持原生云游戲。

CrossEngine目前已經(jīng)完成了基本模塊的開發(fā)，包括整個(gè)Core、runtime和UI系統(tǒng)。也完成了demo的驗(yàn)證。這里有一個(gè)在手機(jī)QQ iOS上跑的demo效果，開放的格斗場(chǎng)景，超過10W面的模型，已經(jīng)有了流暢的效果。

CrossEngine目前已經(jīng)也有深圳的游戲團(tuán)隊(duì)在接入和測(cè)試，也期待很快有更多游戲來使用。

總體上，平臺(tái)以后會(huì)更開放，更多玩法和能力。同時(shí)也會(huì)在工具和引擎上提供給大家更強(qiáng)大的支持，以技術(shù)賦能。也期待在QQ平臺(tái)上創(chuàng)造更多優(yōu)質(zhì)的小程序和小游戲。

謝謝大家。

404549