• 记录自己解决的第一个H5页的性能问题, 关于内存溢出
  • 拼字游戏

问题表现

  • 初始化后, 第一次拼字并不卡.

  • 随着拼的次数越来越多, 越来越卡

  • 浏览器任务管理器中可以看出, 内存持续升高

  • 确定内存问题, 即是卡顿第一问题

代码层面问题

  • 首先希望从代码层面排查内存问题
  • 思考代码后, 发现以下两点

第二舞台直接删除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"

  • 浏览器在读取图片之后会生成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>

H5页游戏内存溢出问题的更多相关文章

  1. 游戏服java程序启动，显示内存溢出

    1.OutOfMemoryError:Java heap space 过程:服务器上面的mysql突然异常重启,导致了程序启动的时候报错 问题1:OutOfMemoryError:Java heap ...

  2. jvm内存溢出分析

    概述 jvm中除了程序计数器,其他的区域都有可能会发生内存溢出 内存溢出是什么? 当程序需要申请内存的时候,由于没有足够的内存,此时就会抛出OutOfMemoryError,这就是内存溢出 内存溢出和 ...

  3. Egret白鹭H5小游戏开发入门（二）

    前言: 昨天的文章中简单的介绍了Egret白鹭引擎从安装到基本的使用配置等问题,今天着重介绍H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明,开始布局等等. 整体概况: 根据上一篇 ...

  4. 使用(POI)SAX处理Excel文件，防止内存溢出

    POISAXReader h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-chi ...

  5. Egret白鹭H5小游戏开发入门（三）

    前言: 在上一篇文章中着重介绍了H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明等等,那么今天主要是涉及到场景的创建,loading的修改等等的代码编写. 对于这一节,我在讲解的过 ...

  6. Tomcat内存溢出解决办法

    使用Java程序从数据库中查询大量的数据时出现异常:java.lang.OutOfMemoryError: Java heap space在JVM中如果98%的时间是用于GC且可用的 Heap siz ...

  7. Android内存溢出解决方案（OOM）

    众所周知,每个Android应用程序在运行时都有一定的内存限制,限制大小一般为16MB或24MB(视平台而定).因此在开发应用时需要特别关注自身的内存使用量,而一般最耗内存量的资源,一般是图片.音频文 ...

  8. Android 内存溢出解决方案（OOM） 整理总结

    在最近做的工程中发现加载的图片太多或图片过大时经常出现OOM问题,找网上资料也提供了很多方法,但自己感觉有点乱,特此,今天在不同型号的三款安卓手机上做了测试,因为有效果也有结果,今天小马就做个详细的总 ...

  9. 图片_ _Android有效解决加载大图片时内存溢出的问题 2

    Android有效解决加载大图片时内存溢出的问题 博客分类: Android Android游戏虚拟机算法JNI 尽量不要使用setImageBitmap或 setImageResource或 Bit ...

随机推荐

  1. Vasya's Function CodeForces - 837E (gcd)

    大意: 给定$a,b$, $1\le a,b\le 1e12$, 定义 $f(a,0)=0$ $f(a,b)=1+f(a,b-gcd(a,b))$ 求$f(a,b)$. 观察可以发现, 每次$b$一定 ...

  2. 怎样获取当前网页的URL

    1. document.documentURI document.documentURI; // "https://i.cnblogs.com/EditPosts.aspx?opt=1&qu ...

  3. IDEA的第一个java程序

    import java.util.Scanner;public class 阶乘{ public static void main(String[] args) { int sum=1,i; Scan ...

  4. 【转】Fetch超时设置和终止请求

    原文链接:https://www.cnblogs.com/yfrs/p/fetch.html 1.基本使用 Fetch 是一个新的端获取资源的接口,用于替换笨重繁琐XMLHttpRequest.它有了 ...

  5. 逗渣的学习笔记-关于webpack从头撸一遍

    刚开始接触webpack,完全是工作需求.那是去年年末的事情了,当时被迫换到另一个项目组,也是一个新的项目,做手机上面的应用,客户要求用react做应用,所以完全属于赶鸭子上架,当时说真的蛮懵逼的,也 ...

  6. Spring Cloud（七）服务网关 Zuul Filter 使用

    上一篇文章中,讲了Zuul 转发,动态路由,负载均衡,等等一些Zuul 的特性,这个一篇文章,讲Zuul Filter 使用,关于网关的作用,这里就不再次赘述了,重点是zuul的Filter ,我们可 ...

  7. Dart 面向对象 类 方法

    Dart是一门使用类和单继承的面向对象语言,所有的对象都是类的实例,并且所有的类都是Object的子类. 面向对象编程(OOP)的三个基本特征是:封装.继承.多态 封装:封装是对象和类概念的主要特性. ...

  8. django请求周期和请求信息

    Django的请求周期 1,概述 首先我们知道HTTP请求及服务端响应中传输的所有数据都是字符串. 在Django中,当我们访问一个的url时,会通过路由匹配进入相应的html网页. 那么: Djan ...

  9. kubernetes之pod调度

    调度规则 deployment全自动调度: 运行在哪个节点上完全由master的scheduler经过一系列的算法计算得出, 用户无法进行干预 nodeselector定向调度: 指定pod调度到一些 ...

  10. udp单播，广播，多播实现（ReceiveFromAsync，SendToAsync）

    注意:客户端和服务器实现基本一致,本地host和port和多播的host和port可以一样 (1)多播 1.将本地host加入多播组中,只有加入多播组的成员才能接受同组的节点发送的多播 Multica ...