JavaScript中的性能内存管理

Question

Let me start with the questions, and then fill in the reasons/background.

Question: Are there any memory profiling tools for JavaScript?

Question: Has anybody tested performance memory management in JavaScript already?

I would like to experiment with performance memory management in JavaScript. In C/C++/Assembly I was able to allocate a region of memory in one giant block, then map my data structures to that area. This had several performance advantages, especially for math heavy applications.

I know I cannot allocate memory and map my own data structures in JavaScript (or Java for that matter). However, I can create a stack/queue/heap with some predetermined number of objects, for example Vector objects. When crunching numbers I often need just a few such objects at any one time, but generate a large number over time. By reusing the old vector objects I can avoid the create/delete time, unnecessary garbage collection time, and potentially large memory footprint while waiting for garbage collection. I also hypothesize that they will all stay fairly close in memory because they were created at the same time and are being accessed frequently.

I would like to test this, but I am coming up short for memory profiling tools. I tried FireBug, but it does not tell you how much memory the JavaScript engine is currently allocating.

I was able to code a simple test for CPU performance (see below). I compared a queue with 10 "Vector" objects to using new/delete each time. To make certain I wasn't just using empty data, I assigned the Vector 6 floating point properties, a three value array (floats), and an 18 character string. Each time I created a vector, using either method, I would set all the values to 0.0.

The results were encouraging. The explicit management method was initially faster, but the javascript engine had some caching and it caught up after running the test a couple times. The most interesting part was that FireBug crashed when I tried to run standard new/delete on on 10 million objects, but worked just fine for my queue method.

If I can find memory profiling tools, I would like to test this on different structures (array, heap, queue, stack). I would also like to test it on a real application, perhaps a super simple ray tracer (quick to code, can test very large data sets with lots of math for nice profiling).

And yes, I did search before creating this question. Everything I found was either a discussion of memory leaks in JavaScript or a discussion of GC vs. Explicit Management.

Thanks, JB

Standard Method

function setBaseVectorValues(vector) {
    vector.x = 0.0;
    vector.y = 0.0;
    vector.z = 0.0;
    vector.theta = 0.0;
    vector.phi = 0.0;
    vector.magnitude = 0.0;
    vector.color = [0.0, 0.0, 0.0];
    vector.description = "a blank base vector";
}

function standardCreateObject() {
    var vector = new Object();
    setBaseVectorValues(vector);

    return vector;
}

function standardDeleteObject(obj) {
    delete obj;
}

function testStandardMM(count) {
    var start = new Date().getTime();
    for(i=0; i<count; i++) {
        obj = standardCreateObject();
        standardDeleteObject(obj);
    }
    var end = new Date().getTime();

    return "Time: " + (end - start)
}

Managed Method

I used the JavaScript queue from http://code.stephenmorley.org/javascript/queues/

function newCreateObject() {
    var vector = allocateVector();
    setBaseVectorValues(vector);

    return vector;
}

function newDeleteObject(obj) {
    queue.enqueue(obj);
}

function newInitObjects(bufferSize) {
    queue = new Queue()
    for(i=0; i<bufferSize; i++) {
        queue.enqueue(standardCreateObject());
    }
}

function allocateVector() {
    var vector
    if(queue.isEmpty()) {
        vector = new Object();
    }else {
        vector = queue.dequeue();
    }

    return vector;
}

function testNewMM(count) {
    start = new Date().getTime();
    newInitObjects(10);
    for(i=0; i<count; i++) {
        obj = newCreateObject();
        newDeleteObject(obj);
        obj = null;
    }
    end = new Date().getTime();

    return "Time: " + (end - start) + "Vectors Available: " + queue.getLength();
}

Answer 1

The chrome inspector has a decent javascript profiling tool. I'd try that...

Answer 2

I have never seen such a tool but, in actuality, javascript [almost] never runs independently; it is [almost] always hosted within another application (eg your browser). It does not really matter how much memory is associated with your specific data structures, what matters is how the overall memory consumption of the host application is affected by your scripts.

I would recommend finding a generic memory profiling tool for your OS and pointing it at your browser. Run a single page and profile the browser's change in memory consumption before and after triggering your code.

The only exception to what I said above that I can think of right now is node.js... If you are using node then you can use process.memoryUsage() .

Edit: Oooo... After some searching, it appears that Chrome has some sweet tools as well. ( +1 for Michael Berkompas ). I still stand by my original statement, that it is actually more important to see how the memory usage of the browser process itself is affected, but the elegance of the Chrome tools is impressive.