H5页游戏内存溢出问题

时间 2019-12-10

标签 h5 页游内存溢出问题繁體版

原文原文链接

记录本身解决的第一个H5页的性能问题, 关于内存溢出

拼字游戏

问题表现

初始化后, 第一次拼字并不卡.
随着拼的次数愈来愈多, 愈来愈卡
浏览器任务管理器中能够看出, 内存持续升高
肯定内存问题, 便是卡顿第一问题html

代码层面问题

首先但愿从代码层面排查内存问题

思考代码后, 发现如下两点

第二舞台直接删除Canvas的Dom

问题:
- 每次都会从新创建第二个分享舞台.
- 上一次的canvas直接删除了Dom.
推断:
- 推断直接删除DOM, 并不能释放舞台上一系列的Bitmap图像等
- 上几回图像继续占用内存
排查与解决:
- 游戏舞台与分享舞台只保留一个
- 每次游戏, 经过指针清空bitmap
结果:
- 内存无明显变化

loader进来的临时图片未删除

问题:
- 每次完成一次拼字都会请求后台此次结果须要加载的资源
- 资源中包含大量的图片等, 都是经过new Image()的src加载过来的
推断:
- 每次浏览器加载大量图片, 展现后, 并未释放图片空间
排查与解决:
- 找出不能重复利用的图片, 使用新的加载器
- 一次性使用图片后, 让加载器为null
结果:
- 内存少许减小
- 游戏已经卡顿

每次游戏会从新new一些对象

问题: 因每次进行游戏都会new一些对象出来
推断: 怀疑是游戏过程当中js内存溢
排查:
结论: js中的内存变化不能引发内存卡顿问题.

GPU层面问题

直接贴连接了: Chromium Graphics // Chrome GPU

此次经过任务管理器能够直接看出是GPU缓存的溢出

哭了, 为何上次我测得时候不显示... 仅仅是一个内存的表示, 给我好找啊..

最后仍是在安卓中进行排查, 才知道是GPU / chromium grapics的问题

观察GPU表现体征

咱们在游戏中发现内存的溢出主要是GPU的变化
在游戏中去除全部的序列帧后, 只保留最基本的游戏, 任何手机都不卡.
那就必定是这些图片搞得鬼.
已经把加载的图片缓存清除掉了.
咱们排除了canvas, 排除了图片加载, 剩下的就是最基本的图片展现了.
如今惟一剩下的就是浏览器本身作的事情了.
展现图片, 而后清理DOM

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <style>
  
  #stage {
    width: 100%;
    height: 100%;
  }
  </style>
  <title>测试内存</title>
</head>

<body>
    <button id="add">增长图片</button>
    <button id="clear">清除内存</button>
    <button id="addTen">增长十倍图片</button>
    <div id="stage"></div>
    <script>
    var count = 0
    var stage = document.getElementById('stage')
    document.getElementById('add').onclick = function () {
      for (var i = 0; i < 23; i++) {
        stage.innerHTML += `<img src='./img${count}/${i}.jpg' />`
      }
      ++count
    }
    document.getElementById('clear').onclick = function () {
      stage.innerHTML = ''
      count = 0
    }
    document.getElementById('addTen').onclick = function () {
      for (var j = 0; j < 10; j++) {
        for (var i = 0; i < 23; i++) {
          stage.innerHTML += `<img src='./img${count}/${i}.jpg' />`
        }
      }
    }
    </script>
</body>

</html>

chrome中测试

在添加三组十倍图片后, 清除DOM
GPU和Image cache, 在浏览器中并不能总结出规律

webview表现特征

咱们写了一个最简单的demo, 在安卓上的webview进行了测试
测试结果以下:
- 初始状态下的内存:
- 添加图片并浏览器后的内存:
- 清理页面dom后的内存:

总结

我的理解原理

浏览器中的GPU会自动缓存一段时间展现过的 "图像". 咱们称为: "GPU Program Cache"web

浏览器在读取图片以后会生成GPU可使用的着色器代码
在GPU使用的时候, 会自动缓存这些着色器代码.

最后解决办法

去掉大量序列帧, 序列帧尽可能用小图
动画尽可能用代码实现

附带一个测试着色器的代码, 也是当时测试webgl的代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <canvas id="glcanvas" width="700" height="500"></canvas>
  <script>
    // 获取WebGL
    var canvas = document.getElementById('glcanvas')
    gl = canvas.getContext("webgl")

    // 建立顶点着色器
    var VSHADER_SOURCE =
      'void main() {\n' +
      '  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' +
      '  gl_PointSize = 10.0;\n' +
      '}\n';
    // 建立片元着色器
    // var FSHADER_SOURCE =
    //   'void main() {\n' +
    //   '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
    //   '}\n';

    // 绘制圆
    var FSHADER_SOURCE = `
      #ifdef GL_ES
        precision mediump float;
      #endif
        void main() {
          float d = distance(gl_PointCoord, vec2(0.5,0.5));
          if(d < 0.5){
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
          }else{ discard;} 
        }`;

    // 着色器代码须要放到一个程序中
    var program = gl.createProgram()
    // 建立顶点着色器
    var vShader = gl.createShader(gl.VERTEX_SHADER)
    // 建立片元着色器
    var fShader = gl.createShader(gl.FRAGMENT_SHADER)

    // shader容器与着色器绑定
    gl.shaderSource(vShader, VSHADER_SOURCE)
    gl.shaderSource(fShader, FSHADER_SOURCE)

    // 将GLSE语言编写成浏览器可用的代码
    gl.compileShader(vShader)
    gl.compileShader(fShader)

    // 将着色器添加到程序上
    gl.attachShader(program, vShader)
    gl.attachShader(program, fShader)

    // 连接程序
    // 在连接操做之后, 能够任意修改shader代码.
    // 对shader从新编译不会影响整个程序, 除非从新连接程序
    gl.linkProgram(program)

    // 加载并使用连接好的程序
    gl.useProgram(program)

    // 绘制一个点
    gl.clearColor(0.0, 0.0, 0.0, 1.0)
    gl.clear(gl.COLOR_BUFFER_BIT)
    gl.drawArrays(gl.POINTS, 0, 1)
  </script>
</body>

</html>