从入门到吃鸡,看腾讯这家公司在开源社区老虎机游戏在线玩踩过的坑

这面积是在游玩Penguin Weex工作组的实践经历,从启蒙读本到以畏缩的办法去做,不管沿路有很多坑,到处优选法,但它也有很多有益。,除非购置物良好的相互作用体会,它还大大地增大了功劳生产率和可塑度。。

H5喊出名字以寻找在的成绩

H5页结平端子的不可,最前面的,装货慢;次货,相互作用性差。

装货时期较长,因它是乘客名额有限度局限的的WebView,在Android WebView是启动慢,同时,喊出名字以寻找资源被慢的装货。。使住满人的大多数人商务喊出名字以寻找都是H5的。,一长串的骨碌巧妙地把持在清楚的的Caton和侧滑,延续O后头也很难与本机喉舌举行比拟。。

禁食装货训练 ——VasSonic

装货事业慢的成绩,使住满人实现预期的结果了禁食装货训练 —— VasSonic,装货事业实现预期的结果二次开度,广泛适合适合于蜂窝式便携无线给打电话QQ。

WebView页平行线装货

资源离线预推

Page local refresh

静力学缓存

在运用声波图案在前

运用声波图案后

H5喊出名字以寻找最前面的掩藏实现预期的结果次货次翻开 ()

为什么选择Weex

企鹅游玩正迅速开展。,使住满人必不可少的事物一套统筹机能与静力学性的技术训练来支杆企鹅电竞合意的人越来越多地丰富的事情必不可少的事物,老虎机游戏在线玩是每一正当的选择。

老虎机游戏在线玩选择了vue作为下层陷害,加密创作经历和Vue的运用。先前很多企鹅在前端工作组游玩也选择了VUE作为开展,男使住满人可以很快起床。。

脸谱网的专利的许可容许功劳者恐慌,岂敢再用他家的浮动诊胎法 Native。 老虎机游戏在线玩自创了React 本国领土思惟,这是每一健康的的代替RN。

使住满人选择长作为每一地方性的的努力训练,它的首要特点:

前端喊出名字以寻找土著人努力,变坚挺前端喊出名字以寻找体会

每一功劳倒退三个完毕(Android)、iOS、H5)运转,增大开展生产率

对长在企鹅游玩事情的广泛适合运用,你可以下载使住满人的申请,或许你想体会它,或许你看不到本来的任何一个一面积。,这面积是由长,这是每一吻合的训练。。

购置物进项

缩减内存 45%,帧速率增大 ;翻开时期和时期

功劳生产率优于端子 40%,无效解除端子功劳人工

喊出名字以寻找修复不依赖于版本当播音员。,变坚挺特点解除生产率

体格工艺学改革

使住满人率先举行了破土顺序的改革。。这是长的高级职员体格图,WebPACK包装与公共申请。使住满人的申请更复杂,H5上通常相当多的特别的逻辑。,或许在地面上相当多的特别的逻辑。,或许以划一的办法写,这将创造单方的JS冗余。。

使住满人做了每一修正。,确实,它修正了喊出名字以寻找的功劳办法。。除非除非,它陷于两个使出神。,每一是网页,每一是长的。

服务器项指的是异样地的进入。,可以让web版本和老虎机游戏在线玩版本付定金保存异样地逻辑,它也可以独即刻研制。,互不冲撞。

接触人暗号

头部的{“framework”:”Vue”}告知解析器用Vue的语法书解析JSBundle。或许砍掉非该行,将会白屏。

美化紧缩可以砍掉正文,创造联姻签名被砍掉。在拔出陷害在前必不可少的事物产卵紧缩。

给打电话端子喉舌

在使住满人的申请使用快是每一非常赞许地醇美可口的的适合,有宽宏大量的的JSAPI,或许对模块做了有更改,这么装填太大了。,抬出去是将模块出现促进。,直接的过来,从模块解析和转发到有关的的逻辑,解析和粗涂JSAPI逻辑不变量。为了的每一词,使住满人长的喊出名字以寻找是直接的与原JSAPI效能集成,这是每一市价的。。以后功劳新喉舌时,你只必不可少的事物功劳每一正本。

倒退Cookie

在H5中,使住满人运用可以获取浏览顺序的cookie知识。。

在老虎机游戏在线玩中方式实现预期的结果?使住满人应用老虎机游戏在线玩规定的研制module的生产率,研制端子中获取cookie的办法。

喉舌请求允许倒退Cookie

IOS是本UI的 WebView共享Cookie。iOS自是倒退请求允许带cookie

Android必不可少的事物端子倒退,运用cookiemanager经营cookie知识,拦截者器请求允许会自动行为添加到cookie中。

倒退用户

H5喊出名字以寻找通常运用UA来断定申请机遇和版本号。,为了适合H5的逻辑,使住满人倒退用户在Weex,Add the userAgent property。 值当注重的是,从老虎机游戏在线玩先例中获取的userAgent是静力学的。一旦老虎机游戏在线玩先例成立就紧抱下降,端子改革UA不会的修正。

方式实现预期的结果1px

老虎机游戏在线玩 PX成绩是个坑,它被解释为自动行为缩放单元。,倾倒前端PX。我分类人事广告版以为,微信的Applet顺序是恰当地的,解释每一新的单元RPX实现预期的结果自动行为缩放,不冲撞原PX的实现预期的结果。

在使住满人的事情现场中必不可少的事物运用老虎机游戏在线玩实现预期的结果titlebar。标题栏将缩小的宽屏蜂窝式便携无线给打电话,它故障与端子体会划一的标题栏。静力学计算有关的PX,重新放置办法,与端子拿来划一的经历。

跨屏适配

The device width deviceWidth is fixed,程度掩藏上容易的宽度是电池P的一节。,这故障使住满人的视野宽度。看一眼下面的表示,使住满人可以修正视口宽度750。。

婚配后,如下图所示。注重,执行时期比拟晚。,或许预期在开端时存在正确的绘制宽度,必不可少的事物端子同窗帮助老虎机游戏在线玩设定初值时设置viewport。

:class 语法书限度局限

点击环境

签订协议比拟共有权的点击环境最多的是明晰度的交替,像每一紧固件、列表、连结等,CSS的办法是添加每一伪类。 雨、雪等猛烈的),老虎机游戏在线玩中也异样倒退,然而老虎机游戏在线玩必不可少的事物在原款式中添加 不明晰度:1,另外的,单击后就无法购置物初始环境。;

同时,积极的运用,安插图像将在IOS下降低价值。

课文不听某人把话说完

从1行到非限度局限限度局限的课文可以用行:0

角犹豫

使用黑话里的最前面的个紧固件显示直角,继适合每一角,有清楚的的犹豫。,这个成绩取决于安卓体系中。 老虎机游戏在线玩 sdk

发展老虎机游戏在线玩 的64ms SDK加密理由的推延,相配在新释放老虎机游戏在线玩 SDK处理了这个成绩。

端子死机的成绩

Android

OOM

PaintDrawable在API 21现时雇用分崩离析

回收后位图会创造分崩离析

对先例的遇难船的残骸后要求取暖NPE成绩

反照要求非常

iOS

缺席显示禁用estimatedrowheight动机

TableView现时修复最高纪录发送器时分崩离析

压紧部署

text 小群在努力和测殿下时甚至分崩离析。

Android使用快 crash率 0.13% –< 1.01%,使住满人遇到的这些crash成绩在企鹅电竞已经处理。

自动行为化勘探训练

老虎机游戏在线玩 SDK使产生的端子看正中鹄的ID是自动行为使产生的。,自动行为勘探体系无法认同。

使住满人运用的辅佐arialabel属性作为土著人看的自动行为勘探。

机能优选法

最高纪录缓存优选法

1、运用储藏处缓存喉舌请求允许最高纪录

2、率先运用土著人缓存最高纪录,同步的修复缓存最高纪录和喊出名字以寻找的请求允许

jsbundle预缓存优选法

1、在存在的 老虎机游戏在线玩 在喊出名字以寻找配置用锉锉的按照添加每一掷还 preload,当该掷还的值为1时,jsbundle预缓存用锉锉。

2、规定js api : biz/preload 为下页码或张数的预装货规定前端。biz/clearProload 前端用于整顿存在缓存的满足的。

3、缓存的满足的,运用LRU算法经营,把持缓存的总巨大为2000米。。

4、关于运用缓存的满足的,端子向UA添加每一掷还。 PRELOAD/1 ; 1是预先准备好的缓存的满足的。, 0故障说。

耗费时间的重要

使住满人一向在关怀喊出名字以寻找装货的机能。,成绩在哪里?,端子耗费费时间的期,网络时代的消耗,或许喊出名字以寻找逻辑的耗费时间的,使住满人打了到处点的长页,WebView时期也打了很多对这些最高纪录的重要。端子、两份前端,任务是为了使完整彼此。

拦截者请求允许开端、请求允许最后阶段、RenderFinish计算网络时代的消耗(请求允许完毕 – 请求允许启动)、端子努力耗费时间的(renderfinish – 请求允许的终曲)

端子经过js API成立每一instnace点规定的前端

端子、两份前端,反省最高纪录,使产生机能说,禁食安置机能阶段

端子喉舌要求的耗费时间的优选法

1、Android 晋级老虎机游戏在线玩 版本模块喉舌要求时期耗费大大地缩减。。

端子喉舌的功耗优选法,这是每一更实践的的成绩。。到长的最早的答复是版本,当初要求模块喉舌为50-60手写本。,后头晋级,成绩处理了。,长的队持续做优选法,这是件坏事。。

SDK版本

初始呼叫时期耗费

两个给打电话

初始回调时期耗费

两遍回调时期耗费

.0

50-60

30-40

10

10

.0

5-6

2-3

2

2

2、当启动页缩减时,模块喉舌将同时要求。。

现时的喉舌要求每一2-3手写本,然而被附加请求允许的机能非常赞许地低。,必不可少的事物大于60ms,这对前端喊出名字以寻找是每一很大的伤害。,我预期本文能持续处理这个成绩。。

3、Android DOM努力必不可少的事物很长时期才干经过多个反照来购置物类名。。

在Weex的小小人,类名是在要求时屡次反照购置物的。,使DOM努力破费太长时期。确实,每一给打电话的时期不长1ms,必不可少的事物修补100次前文。,这必不可少的事物很多时期。。

Android Bitmap 内存优选法

APP版本

crash率

首要变乱

3.1.0

0.13%

体系crash,事情逻辑口误等。

3.2.0

1.01%

OOM、SIGSEGV(SEGV_MAPERR)

用弗雷斯科管道装货图片,装货后不举行图片援用。。

成绩:

会将用户礼物不显示的图片也装货到内存中,内存的实践使从事要大得多。,伯父是每一沉重地的成绩。

援用不保存将创造位图在被回收后运用。 – 3.4版顶 crash—SIGSEGV (SEGV_MAPERR))

优选法: 抄写Fresco的DraweeController经营WXImageView的bitmap援用。 显示时期重担,生命时延缓回复。

OOM成绩清楚的缓和,处理了位图回复的倾轧成绩。。

GPU的关于优选法

GPU的透支是每一端子开展的极大关怀,经过优选法安排创作,增大努力机能。使住满人缺席注重到这个成绩后,使住满人去了长,先前功劳办法的重构,设置大多数人图层和安插色,使产生的长喊出名字以寻找翻开Android调试发展大,透支很沉重地。

优选法办法:

放量不要设置安插色。

不要覆盖物嵌套,创作尽量平。

预优选法

优选法后

长的抬出去分享——救济院内的冲撞

最优选法成绩

倒退掩藏切换训练

因而armabi-v7a包倒退

小群划一开放源加密:比如 jscore内核、debugger、gcanvas

甚至更好的机能细分重要

高效的端子和长的共享静力学最高纪录训练

容错性好: iOS JS call 土著人时期,参量口误可能性创造端子分崩离析。

(本文作者是屈红伟) 企鹅游玩群像负责人前端)