如何分析H5游戏的显存

查看显存值

一般最简单的方法是直接用window的任务管理器。

可以看到GPU这一栏，有专门的GPU内存监控，不过监控的是整个window的显存值。
当显存用满了，有些显卡（或者是window的机制）会自动借用内存，所以当显存满了，可以看到上面内存会慢慢上涨。

针对H5游戏的显存，我们有更好的工具，就是Chrome。
Chrome自带了一个任务管理器，可以查看Chrome里的GPU占用。

打开Chrome任务管理器后，可以看到下面的界面：

这里的GPU进程，有一列“内存占用空间”，这个就是Chrome当前所占的显存值，包括了物理显卡和物理内存里所占用的内存总值。

我们看H5游戏的显存占用，以Chrome的这个显存为准。

图片的显存占用大小计算方式

一般来说，没有特别指定的情况下，显存的计算公式是：
显存容量 = 显示分辨率 × 颜色位数 / 8bit

显示分辨率： 图片分辨率往上取最接近 2 的 n 次幂的值。例如：如果宽度是1020，会取值1024（2的10次方）。显卡里要求图片纹理的宽高都必须是2的次幂。
颜色位数： 一般用 ARGB_8888 格式，ARGB分别对应透明度和RGB通道。一共4个字节，每个字节占8位，即32位。PNG和JPG在内存解码后一样。
8bit： 这里除以8是因为计算后的单位是字节。

举个栗子
一张宽高是 900 x 500 的 png 图片，计算显存值：
显存占用 = 1024 x 512 x 32 / 8 = 2097152 (约等于2MB)

H5计算显存代码

                        //获取图片原来的宽高
                        let w = img.width;
                        let h = img.height;
                        let n;
                        //宽度往上取最近的2次幂
                        n = 5;
                        while(w > Math.pow(2, n)){
                            n++;
                        }
                        w = Math.pow(2, n);
						//高度往上取最近的2次幂
                        n = 5;
                        while(h > Math.pow(2, n)){
                            n++;
                        }
                        h = Math.pow(2, n);
                        //计算显存值
                        let sum = (w * h * 4)

白鹭Egret引擎的显存计算

这里以 Egret 引擎为例，当创建一个图片，加到舞台上，引擎会自动把图片占用的内存释放，只保留显存部分。

那么我们可以写一个逻辑，不断加载不同的图片。
如果是加载同一张图片，就算加载多次，也是只保留一份显存数据。

然后观察显存值，是不是对应增加了数量。
如果观察不明显，可以增加图片的大小和数量，例如累计加载1G的图片，观察显存是不是对应增加了1G。

分析用途

H5游戏，微信小游戏，Oppo、Vivo等等小游戏，是比较容易出现闪退或者黑屏的问题。
造成这些问题，通常有几点：
1、瞬时请求太多资源，没有做分帧处理。
2、内存溢出，容易造成闪退，这里表现为直接退出到微信，或者整个微信闪退。
3、显存溢出，容易造成黑屏，游戏还在继续跑，可是屏幕一片漆黑。不过有些机型也直接表现为闪退，跟第2点表现差不多。

如果有这些问题，大家可以通过显存分析，结合我上一篇的内存泄露文章，可以比较容易找到问题所在。

手机移动端的内存工具PerfDog和SoloPi

在手机端，通常会用腾讯的 PerfDog（新账号30分钟免费，收费是大约1分钟1元） 或者 阿里的 SoloPi（免费） 进行内存分析。

下面用 SoloPi 举例。

一般这里看 privateDirty 就可以了，这里只包含进程独占的数据；而 pss 包含了共享的部分，可以不看。

这里检测的内存值，还可能包含了存放纹理的显存，所以内存值会跟 pc 上的数值不完全一样，目前还不能直观的只看显存的值。当纹理释放的时候，可以看到这里的值会明显降下来。