原文网址:https://www.youyong.top/article/11599ec901597
6月20号晚八点的直播,C姐首先代表直播团队感谢小伙伴们的大驾光临和热烈互动。你们满满的热情让主播受到了10000点鼓励,血槽已经加满。未来,将会为大家呈现更多更优质的直播内容。
本次干货满满的直播主角绝对是Chrome Devtools,主播展示了在Chrome上分析性能热点的各种技巧。
原文网址:https://www.youyong.top/article/11599ec901597
6月20号晚八点的直播,C姐首先代表直播团队感谢小伙伴们的大驾光临和热烈互动。你们满满的热情让主播受到了10000点鼓励,血槽已经加满。未来,将会为大家呈现更多更优质的直播内容。
本次干货满满的直播主角绝对是Chrome Devtools,主播展示了在Chrome上分析性能热点的各种技巧。
原文网址:https://www.youyong.top/article/11599ec901597
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 写法。
620直播视频:Web游戏调试与分析
共 0 条留言
iPhone X 跌破发行价,苏宁200亿入股恒大 | 财经日日评
资深黄牛现身说法:iPhone X价格秒变不停,就像炒股一样
低内存占用、无广告、功能强大又唯美的本地播放器 - Potplayer
从零开始手把手带你全面认识 网易的游戏服务端框架 Pomelo
Cocos Creator v1.6支持Camera剔除功能!
手机扫一扫
分享文章