网页逐帧处理视频吃内存，浏览器进程却只涨138MB？

想查内存被谁吃掉的时候我以前习惯打开活动监视器找浏览器那几行。我的个人项目里有一步是在网页里把视频一帧一帧取出来处理这回我量了一次这一步的内存量完才知道这个习惯在这件事上靠不住浏览器那几行的数几乎没动系统整体却多占了两个多 GB。电脑卡不卡我没有量这篇只讲内存该看哪个数。先交代我做了什么。视频文件里的画面是压缩着存的要用就得先解码也就是把它们一张张还原成完整的画面。浏览器有个按帧解码的接口叫 VideoDecoder它每解出一帧就交给你一个帧对象用完要调用 close() 把它释放掉。一帧有多大我读了一下1920×1080 的一帧是 3,110,400 字节大约 3.1 MB。我拿来测的样片是网上的一段海浪示例视频我用 ffmpeg 7.1 给它转码再首尾循环拼接成 60 秒、一共 1500 帧的长样片所以它不是原生的长视频。MP4 文件要先拆成一份份压缩数据才能交给解码器这一步叫解封装我用的是 mp4box.js 0.5.2。机器只有一台Apple M4 配 16 GB 内存系统 macOS。我在 Chromium 149 里把这 1500 帧全部解出来放进数组一帧都没有释放整个过程每 0.5 秒记一次三个数。第一个数是浏览器进程内存也就是把浏览器所有进程占的内存加起来。1500 帧留着不放的这一次它只多了 138 MB。更让我意外的是每帧用完马上释放的那个对照组它多了 186 MB比留着不放还高。只看这个数根本分不出帧放没放。第二个数是系统整体的内存增量同一次测试里它的峰值是 2694 MB。这个读数波动很大同一个场景跑两次能差出 1 GB 以上我只拿它看量级。第三个数是图形缓冲的数量三个数里它最稳。图形缓冲是 macOS 上系统用来存放画面的一种内存块名字叫 IOSurface。它在全系统只有一个总数在终端里执行ioclasscount IOSurface就能读到。留着 1500 帧不放的这一次它多了 1508 个和帧数基本对得上马上释放的那一次只多了 12 个。这张图先看最长的三行Chromium 149 多了 1508 个Chrome 154 和 WebKit 26.5macOS都是 1510 个三个数都贴着 1500 帧。Firefox 151 只多了 7 个。换成进程内存再看一遍长短正好反过来。Chromium 149 是 138 MBChrome 154 是 149 MBFirefox 151 涨了 2291 MB。WebKit 那一行是空的因为它的网页进程不在我能统计到的进程里。我原本以为换个浏览器只是数字大小不同没想到连该看哪个数都不一样。为什么 Chromium 的帧出现在图形缓冲里、Firefox 的帧出现在自己进程里这个我没去查。4K 的样片我也试了一次为了不把机器压垮只喂了 300 帧。同样留着不放浏览器进程内存增量是 0 MB系统内存增量峰值是 4546 MB图形缓冲多了 320 个。这一次进程那个数干脆一点没动。我还想知道一条现成的逐帧处理流水线在这个数上是什么样。我用的是图映 ImgIng一个在浏览器里处理图片和视频的工具站。它的视频抠像还是 Beta官方说明是优先支持桌面端的 Chrome 和 Edge。我在 Chromium 149 里让它处理同一条 1500 帧的样片每 2 秒记一次读数处理全程图形缓冲的增量在 −2 到 79 之间没有随着进度往上涨。要交代的是海浪画面里没有可抠的主体这组读数只能说明内存表现说明不了抠像效果。海浪里没有人抠像界面上只有一片白我就换了一段 8 秒的街头演奏另截了图。上半张是刚导入的原片下半张是处理完、背景换成纯白的样子。画面出自维基共享资源上 Isak Zvegelj 拍的卢布尔雅那街头吉他演奏CC BY 3.0。前面的读数不是用这段片子量的。有一处我没搞懂。我另外跑过一个场景把压缩数据一口气全喂给解码器同时故意让每帧处理得慢一点处理完就释放。解出来还没轮到处理的帧最多排到 1421 个之后一路降到 4 个可图形缓冲的数量一直停在 1430 到 1490 之间直到浏览器退出才回落。所以这个数涨上去我敢说有帧被占着。它迟迟不降的时候我就不敢说帧还没释放了。现在我在 Mac 上查这类问题换了顺序。先看系统整体的内存和交换区用了多少再在处理前后各读一次图形缓冲的数量两次相减。差出来的数接近帧数我就回去找哪里的帧没有 close()。浏览器进程那几行放到最后看用 Firefox 的时候才把它提到前面。这个顺序只在我这一台 M4 上验证过Windows 和手机没测别的系统上帧放在哪里我不知道。样片是循环拼接的重复的画面多系统内存的增量可能比真实长片偏低。硬解和软解我也没有区分。海浪画面出自维基共享资源上 David Shayדוד שי的视频4K 的河道画面出自 Nesnad 的视频。两段视频的许可都是 CC BY-SA 4.0。