理解JavaScript堆增长和GC模式

Question

为了编写完美的javascript，我试图解决Javascript堆的问题，但没有成功。我已经把它降到了我所能达到的最低水平，但是我已经没有选择了，并且不知道发生了什么(我猜是rAF开销，但猜测不算)。

堆的锯齿图案(浅蓝色)：

​

​

上面的时间线是从一个简单的全页画布粒子渲染。这个练习的目的是减少堆锯齿的幅度，希望还能增加清理之间的时间。

仔细看，堆大约每60秒钟增长15k，从3.3MB下降到每1秒2.4MB

​

​

我不明白的是时间和增长率为15K。

堆在执行空闲之前增长了15 is，在下面的函数返回到空闲(下面是我的顶级函数)之后，堆增长了0.015ms。

var renderList = [];    
var stop = false;
var i;

function update(timer) { // Main update loop
    if(!stop){
        requestAnimationFrame(update);
    }
    for(i = 0; i < renderList.length; i ++){
        renderList[i](timer,ctx, w, h);            
    }
}

我对代码所做的任何事情都不能减少或更改堆增长的位置。分配配置文件显示没有分配任何内存。GC在CPU配置文件上是0.08% (我不知道它在做什么?它是否也管理堆？)

有人能给我解释一下这个记忆是用来做什么的吗？我怎么才能把它减少或者把线弄平？

我知道我可能什么也做不了，但现在我还不太清楚到底是什么在堆里呢？很高兴知道。

这个代码片段只是从update (上面的代码片段)调用的代码，我不认为它是相关的，只是以防万一。它是在堆增长之前执行和返回的代码。

        var p,d,s;
        var renderCount = 0;
        var fxId = 0;
        var lastTime;
        var frameTime = 0;
        var minParticles = 10;
        var particleCount = minParticles;
        var frameSum = 0;
        var frameAve = 0;
        var frameWorkTime = 0;
        var lastFrameWorkTime = 0;
        var particleRenderTimeMax = 0;
        var m = 0;
        var mC = 0;
        var mR = 0;
        var then,tx,ty;
        var renderTime,then1; 

        //=====================================================================================
        // the following function is out of context and just placed here as reference
        /*
        draw : function (image, index, x, y, scale, rotation, alpha) {
            spr = image.sprites[index];
            ctx.setTransform(scale, 0, 0, scale, x, y);
            ctx.rotate(rotation);
            ctx.globalAlpha = alpha;
            sh = spr.h;
            sw = spr.w;
            if(spr.vx !== undefined){  // virtual sprite dimensions
                _x = -spr.vw / 2 + spr.vx;
                _y = -spr.vh / 2 + spr.vy;
                ctx.drawImage(image, spr.x, spr.y, sw, sh, _x, _y, sw, sh);
                return;
            }
            ctx.drawImage(image, spr.x, spr.y, sw, sh, -sw / 2, -sh / 2, sw, sh);
        },
        */        
        //=====================================================================================        
        
        // Add particle
        function addP(x,y,spr){
            p = particles.fNextFree();
            if(particles.fLength >= particleCount || p === undefined){ // no room for more
                return;
            }
            p.x = x;
            p.y = y;
            p.spr = spr;
            p.life = 100;
            p.s = Math.random() +0.1
            d = Math.random() * Math.PI * 2;
            s = Math.random() * Math.PI * 2;
            p.dx = Math.cos(d) * s;
            p.dy = Math.sin(d) * s;
            p.dr = Math.random()-0.5;
            p.maxLife = p.life = 100-spr*10;
        }
        // move and draw particle
        function updateDrawP(p,i){
            if(i >= particleCount){
                p.life = undefined;
                return;
            }
            s =  p.life/p.maxLife;
            p.x += p.dx * s;
            p.y += p.dy * s;
            p.r += p.dr;
            p.life -= 1;
            
            if(p.life === 0){
                p.life = undefined;
                return;
            }
            renderCount += 1;
            sDraw(spriteSheet, p.spr, p.x, p.y, p.s, p.r, s); // Calls draw (function example above)
        }
      
        
        function renderAll(time) { // this is called from a requestAnimationFrame controlled function
            var then = performance.now(); // get frame start time
            var tx, ty;
            if (lastTime !== undefined) {
                frameTime = time - lastTime;
                frameSum *= 0.5;
                frameSum += frameTime;
                frameAve = frameSum * 0.5; // a running mean render time
            }
            lastTime = time;
            ctx.setTransform(1, 0, 0, 1, 0, 0); // reset transform
            ctx.globalAlpha = 1; // reset alpha
            ctx.clearRect(0, 0, w, h);
            if (spriteSheet.sprites) { 
                mouseWorld = EZSprites.world.screen2World(mouse.x, mouse.y, mouseWorld);
                if (mouse.buttonRaw & 1) {
                    fxId += 1;
                    fxId %= EZSprites.FX.namedFX.length;
                    mouse.buttonRaw = 0;
                }
                if (mouse.buttonRaw & 4) {
                    world.posX += mouse.x - mouse.lastX;
                    world.posY += mouse.y - mouse.lastY;
                    EZSprites.world.setPosition(world.posX, world.posY);
                    mouseWorld = EZSprites.world.screen2World(mouse.x, mouse.y, mouseWorld);
                }
                if (mouse.w !== 0) {
                    if (mouse.w > 0) {
                        EZSprites.world.zoom2Screen(mouse.x, mouse.y, ZOOM_AMOUNT, true);
                        mouse.w -= ZOOM_WHEEL_STEPS;
                    } else {
                        EZSprites.world.zoom2Screen(mouse.x, mouse.y, ZOOM_AMOUNT, false);
                        mouse.w += ZOOM_WHEEL_STEPS
                    }
                    mouseWorld = EZSprites.world.screen2World(mouse.x, mouse.y, mouseWorld);
                    EZSprites.world.getWorld(currentWorld);
                    world.posX = currentWorld.x;
                    world.posY = currentWorld.y;
                }

                // sets the current composite operation (only using source-over)
                EZSprites.FX[EZSprites.FX.namedFX[fxId]]();

                // render and time particles
                renderCount = 0;
                var then1 = performance.now();
                
                particles.fEach(updateDrawP); // render all particles
                
                var renderTime = performance.now() - then1;

                EZSprites.context.setDefaults();

                // gets the total time spent inside this function
                frameWorkTime += performance.now() - then;
                lastFrameWorkTime = frameWorkTime;
                if (renderCount > 0) {
                    particleRenderTimeMax = Math.max(particleRenderTimeMax, renderTime / renderCount);
                    particleRenderTimeMax *= 10;
                    particleRenderTimeMax += renderTime / renderCount
                    particleRenderTimeMax /= 11;
                    // Smooth out per particle render time max
                    m = particleRenderTimeMax;
                    mC += (m - mR) * 0.1;
                    mC *= 0.1;
                    mR += mC;
                    // Particle count is being balanced to keep ensure there is plenty of idle time before
                    // the next frame. Mean time spent in this function is about 8 to 9ms
                    particleCount = Math.floor(((1000 / 120) - (frameWorkTime - renderTime)) / (mR));
                }
                // This is where frameWorkTime begins its timing of the function
                then = performance.now();
                frameWorkTime = 0;

                if (particleCount <= maxParticles) {
                    particles.fMaxLength = particleCount;
                }
                // Add particles. 
                addP(mouse.x, mouse.y, 1);
                addP(mouse.x, mouse.y, 2);
                addP(mouse.x, mouse.y, 3);
                addP(mouse.x, mouse.y, 4);
                addP(mouse.x, mouse.y, 5);
                addP(mouse.x, mouse.y, 1);
                addP(mouse.x, mouse.y, 2);
                addP(mouse.x, mouse.y, 3);
                addP(mouse.x, mouse.y, 4);
                addP(mouse.x, mouse.y, 5);
            }
            mouse.lastX = mouse.x;
            mouse.lastY = mouse.y;
            frameWorkTime = performance.now() - then;
        }

​

更新片段

正如在下面的注释中所问的，是可复制的HTML。

注意到这个示例不能托管在CodePen或StackOverflow这样的站点中，因为它们修改、监视或执行干扰测试的添加代码源代码。

<!DOCTYPE html>
<html>
    <head><meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-8"></head>
    <body><script> 
    "use strict";
    (() => {
        var renderList = [], stop = false, i, ctx;
        requestAnimationFrame(function update(timer) { // Main loop
            if (!stop) { requestAnimationFrame(update) }
            for (i = 0; i < renderList.length; i ++){
                renderList[i](timer, ctx, w, h);            
            }
        });
    })();
    </script></body>
</html>

运行上述示例时，堆在调用主要GC之前增长超过60秒，每个帧的堆增长约为300个字节。

Answer 1

看起来您的代码中没有显式的内存分配，这意味着它会以其他方式发生--我看到您使用了一些第三方库。

您可以尝试在GC之前和之后拍摄内存快照(：memory，按下红色按钮)。

快照有类名、这些类的对象数和占用的内存大小。

所以你得到两个快照，计算一个差异(不知怎么的)，看看它是否适合这张锯子形状的图片。

Answer 2

每次调用update函数时，如果没有其他的话，就会创建变量i，然后销毁变量i。我不知道Javascript是否会优化它并为我保留相同的存储位置，但如果不是，这是一种可能性。

另一种可能是，从renderList[]中取消引用的任何函数都可能创建和/或销毁变量。

如前所述，还有一个requestAnimationFrame()函数，它可能正在创建/破坏变量。

这些都是猜疑(而不是猜测)，但有了您所提供的数据，这才是可能的。正如其他人所提到的，为了充分调查，必须有一个可重复的例子。