Question

徒劳地尝试编写完美的javascript我正在解决Javascript堆的问题。我已经把它降到了最低水平，但是我已经没有选择了，并且不了解发生了什么（我的猜测是rAF开销，但猜测并不算数）。

堆的锯齿图案（浅蓝色）：

以上时间轴来自简单的整页画布粒子渲染。练习的目的是减少堆锯齿的振幅，并希望也增加清理之间的时间。

仔细观察，堆每隔60秒增长约15k，每隔~1秒从3.3MB下降到2.4MB

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

堆在执行空闲之前增长15kb，并且在以下函数返回空闲之后~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调用的代码（上面的代码段）我不认为它是相关的，但以防万一。它是在堆增长之前执行并返回的代码。

＆＃13;

        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;
        }

＆＃13;

Answer 1

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

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

如前所述，还有 requestAnimationFrame() 函数可能会创建/销毁变量。

这些是怀疑（而不是猜测），但是根据您提供的数据，这就是全部可能。正如其他人所提到的，为了充分调查，需要一个可重复的例子。

Answer 2

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

您可以尝试在 GC 之前和之后拍摄内存快照（转到 devtools: memory，按红色按钮）。

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

所以你得到了 2 个快照，计算了一个差异（以某种方式），然后看看它是否适合你拥有的这张锯状图片。

Answer 3

要真正了解堆是如何与 javaScript 一起工作的，您需要了解 event loop。此处发布了有关 JavaScript 事件循环/回调的精彩视频。在 simplest 术语中，堆是我们定义变量时存储对象的地方（内存）。在 javascript 中，事件循环管理此访问回调/承诺等。我强烈建议您在 youtube 上观看一些循环动画以帮助可视化过程。

事件循环视频：https://www.youtube.com/watch?v=8aGhZQkoFbQ。
很棒的帖子：https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5
图表
图 2

希望有帮助！最好的祝福。

理解JavaScript堆

3 个答案: