直播回顾|Chrome性能热点的各种技巧分析 (h5游戏)

赞赏 2017-06-22

6月20号晚八点的直播,C姐首先代表直播团队感谢小伙伴们的大驾光临和热烈互动。你们满满的热情让主播受到了10000点鼓励,血槽已经加满。未来,将会为大家呈现更多更优质的直播内容。

本次干货满满的直播主角绝对是Chrome Devtools,主播展示了在Chrome上分析性能热点的各种技巧。


Network 工具  

Network 除了可以关闭浏览器缓存外,还可以模拟弱网络环境,检查各个资源的尺寸、下载用时、服务器响应是否有问题等信息,这些信息就可以用来帮助开发者优化加载的体验。更重要的是,对于优化首屏加载体验,Network 工具可以指示页面 DOM 成功加载的时间点和页面呈现出来的时间点,开发者的首要目标应该就是尽量缩短首屏页面呈现的时间。


Performance 工具  

首先开发者可以通过Performance工具来分析游戏在各种游玩场景下的总体性能,主要观察下面几个性能指标:

- 在 FPS 图表中以红色标注的长帧数量和频度,标志着帧率下降的情况

- 在 Main 区块中的调用栈深度,过深的调用栈可以被优化以提升性能

- 在 Heap 图表中的垃圾回收频率,过于频繁的垃圾回收也会导致卡顿,意味着需要优化内存使用

- 在 GPU 区块中的渲染耗时,如果耗时过多可能意味着渲染压力过大

- 在底部 Bottom-Up 标签栏中检査函数损耗



找到总体的性能热点之后,可以通过局部缩放来查找关键热点帧的执行细节,一般可以找到热点函数,比如用户逻辑带来的损耗,场景访问的损耗,上传 GPU 数据的损耗,帧执行过程中触发 GC 的损耗。有了这些信息就可以有的放矢得来优化游戏的架构,逻辑和设计。


Memory 工具  

Memory 工具中 Take Heap Snapshot 是用来记录瞬时的 JS 内存占用,Record Allocation Profile 是用来记录 JS 函数中分配的内存情况,可以查询内存分配的热点。而三个工具中最有用的是 Record Allocation Timeline,开发者可以用它来记录一段时间内的内存分配和释放情况。



在记录图中,蓝色部分表示直到记录结束都没有被释放的内存,灰色部分表示已经被释放的。所以可以选取开发者感兴趣的部分,找到是否有对象被错误持有,并解决代码逻辑中的引用问题。


 优化策略  

- 网络优化:主要要做的是减少并发数,对图片资源进行适当的压缩。

- 渲染优化:尽最大可能让批处理不被打断,可能需要对游戏的场景结构进行重新思考。

- 内存优化:找到垃圾,解决逻辑中对垃圾对象的引用;复用一切可复用的对象。

- CPU 占用优化:使用 JSHint 或者其他代码检查工具;使用 TypeScript 的严格类型;降低帧率;减少音频的使用;降低调用栈深度;优化 JS 写法。


PPT参考资料

620直播视频:Web游戏调试与分析

登陆后阅读全文
阅读 1602 赞赏 0 有用 3 没用 0 收藏 1 分享

   



0 条留言

相关文章

解决无法在 Chrome 中播放视频的问题

PDF 文件无法在Chrome 中自动打开

如何减少Chrome 的内存使用量?

如何卸载Chrome(window mac linux)

如果能正常访问 Chrome 应用商店?

Chrome 调试工具的一些高阶功能

chrome 请求头出现 Provisional headers are shown 警告提示

chrome Adobe Flash 无法正常使用

64位 chrome 浏览器一直提示 “喔唷,崩溃啦”

有料推荐

这世界欠我一个这样的老公!

高校学生模仿“世界名画”摆拍,可以说是戏精本精了

iPhone X 跌破发行价,苏宁200亿入股恒大 | 财经日日评

果然是高手!这次在日本,特朗普竹杠敲得不是一般狠

资深黄牛现身说法:iPhone X价格秒变不停,就像炒股一样

长一样的双胞胎也能识别?蚂蚁金服发布「眼纹识别」技术

苏联是怎么被阿富汗拖垮的?

美团或入局「分时租赁」共享汽车,王兴要大笔投入「泛出行」领域了? | 36氪独家

你或许被“一盘番茄炒蛋”刷屏了,但有人辛酸,有人质疑

iPhone X发售前夜,黄牛与苹果公司的不安

他的文章

低内存占用、无广告、功能强大又唯美的本地播放器 - Potplayer

从零开始手把手带你全面认识 网易的游戏服务端框架 Pomelo

推荐一款上线 Cocos商店的付费插件——可视化状态机

手把手教你如何优化cocos2d-x手游内存

「新手向」用Cocos Creator也可以轻松做阿拉斗牛

Cocos Creator v1.6支持Camera剔除功能!

Cocos Creator v1.6使用体验Q&A

Cocos Creator可以用来开发大型MMO吗?

教程:Cocos Creator如何给资源打上MD5版本号?

「教程」如何在Cocos Creator中优化首页打开速度

手机扫一扫
分享文章