Jquery speed, using .html(string) is really really slow, how can I speed this up?

I've got a function that is taking on average 250ms to complete. I would like to do this in much less time, <20ms if I can <10ms would be best.

function updateDisplay() {
    var start = new Date().getTime();
    var $this = $(this);
    var data = $this.data('ansi');
    var html = '';
    for (var i = 0; i < data.screen.length; i++) {
        for (var j = 0; j < data.screen[i].length; j++) {
            html += data.screen[i][j];
        }
        html += '<br />';
    }
    var create = new Date().getTime();
    console.log('Build html: ' + (create-start));
    $this.html(html);
    var end = new Date().getTime();
    console.log('Update html: ' +(end-create));
}

I'm calling this function in side a setInterval to update my display, building the html string is 0ms to 1ms each frame, but the update html is anywhere from 100ms to 300ms. Is there anyway to get this to be faster?

Bah, having chrome inspector open to watch the console was adding a huge delay This is my current function (Basically a drop if from CD Sanchez). Without the inspector open It's running at about 50ms for the update html. This is much better, but would like to get it to <20ms if I can.

function updateDisplay() {
    var start = new Date().getTime();
    var $this = $(this);
    var data = $this.data('ansi');
    var html = Array();
    for (var i = 0, length1 = data.screen.length; i < length1; ++i) {
        var a = data.screen[i]; // cache object
        for (var j = 0, length2 = a.length; j < length2; ++j) {
            html.push(a[j]); // push to array
        }
        html.push('<br />');
    }
    var create = new Date().getTime();
    this.innerHTML = html.join(''); // use innerHTML
    var end = new Date().getTime();
    $('#debug').html('Build html: ' + (create-start) + '<br/>Update html: ' + (end-create));
}

Sample value of html - 1st row, up to the <br>

<span style="background-color:#000000;color:#ffffff;">&nbsp;</span><span style="background-color:#000000;color:#ffffff;">&nbsp;</span><span style="background-color:#000000;color:#ffffff;">&nbsp;</span><span style="background-color:#000000;color:#ffffff;">&nbsp;</span><span style="background-color:#000000;color:#ffffff;">&nbsp;</span><span style="background-color:#000000;color:#ffffff;">&nbsp;</span><span style="background-color:#000000;color:#ffffff;">┌</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#0开发者_运维百科00000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">─</span><span style="background-color:#000000;color:#ffffff;">┐</span><span style="background-color:#000000;color:#ffffff;">&nbsp;</span><span style="background-color:#000000;color:#ffffff;">&nbsp;</span><span style="background-color:#000000;color:#ffffff;">&nbsp;</span><span style="background-color:#000000;color:#ffffff;">&nbsp;</span><span style="background-color:#000000;color:#ffffff;">&nbsp;</span><span style="background-color:#000000;color:#ffffff;">&nbsp;</span><span style="background-color:#000000;color:#ffffff;">&nbsp;</span><br>

Example - here, only tested in chrome so far. Known knot to work in IE yet...

Update I've converted my code to use a canvas and draw directly to that. I'm not sure if I'm doing it the best way or not as its my first time using the canvas. As it stands now I'm at around 20ms. Thats the upper end of where I'm happy, 10ms would be much better though.

I'm not sure if I can define a foreground and background color in the style and remove the fillRect call or not, that would speed things up a lot if I could. The other issue is the font doesn't look as crisp as it did as pure html, not sure if I can fix that or not. The example linked above has been updated.

function updateDisplay() {
    var start = new Date().getTime();
    var $this = $(this);
    var data = $this.data('ansi');
    for (var i = 0, length1 = data.screen.length; i < length1; ++i) {
        var a = data.screen[i]; // cache object
        for (var j = 0, length2 = a.length; j < length2; ++j) {
            data.ctx.fillStyle = a[j][0];
            data.ctx.fillRect (8*j, 14 * i, 8, 14);
            data.ctx.fillStyle = a[j][1];
            data.ctx.fillText(a[j][2], 8*j, 14 * i);
        }
    }
    var end = new Date().getTime();
    $('#debug').html('Frame Time: ' + (end-start));
}

Last Update ctx.fillText is quite slow and not accurate enough for my purposes. I've defined my own font as a 8x16 array and draw each pixel with a ctx.fillRect. This is much much faster and dealing with the font subsystem it seams.

Here are some very small optimizations that I doubt will help much, but here you go anyways:

function updateDisplay() {
    var start = new Date().getTime();
    var $this = $(this);
    var data = $this.data('ansi');
    var html = [];
    for (var i = 0, length1 = data.screen.length; i < length; ++i) {
        var a = data.screen[i]; // cache object
        for (var j = 0, length2 = a.length; j < length2; ++j) {
            html.push(a[j]); // push to array
        }
        html.push('<br />');
    }
    var create = new Date().getTime();
    console.log('Build html: ' + (create-start));
    this.innerHTML = html.join(''); // use innerHTML
    var end = new Date().getTime();
    console.log('Update html: ' +(end-create));
}

Of course, these are just simple JavaScript optimizations (which aren't really that useful on the newer browsers). It sounds like you need to simplify your HTML and possibly your CSS so that it can be rendered faster by the HTML engine.

To understand this kind of issues I find Dynatrace Ajax Edition to be the best tool because it can also tell how much time is spent in rendering and not only javascript execution. There might be other similar tools I find this one to be good.

I think you might want to rethink your whole approach. Writing HTML elements to create an animation will never be a good idead. This is the reason we have things like canvas, svg and flash/silverlight. It might be possible to optimize to a certain degree but please use the right tool instead. Maybe not the answer you were looking for but I think you will be much more pleased with the endresult both when it comes to performance but also maintainability if you use the canvas or svg for example.

http://raphaeljs.com/reference.html#text is a nice library

UPDATE 1: If you really want to do it this way I would try to change the method a bit. Right now you redraw the whole "grid" each time. Looking at the animation it looks like you should be able to update only a row each time. I'm thinking that you can wrap each row in a div instead and for each frame you only rewrite the contents of the div on that row. I would store a reference to the divs in an array so you can avoid running the selector on each frame.

Are you sure the issue is with actually appending the data and not rendering the data? If your markup is complex (many spans might be, depending on how many there are), then the rendering time for the new markup is non-negligible. What happens to the time if you change the call to .html(html) to .text(html)?

I'm not suggesting you do this as a final fix (text doesn't parse HTML tags), but it could help you see if the time is taken rendering or appending.

Haven't tested, but maybe using the join function will speed it up, assuming data.screen[i] is an array of strings:

(the loop)

for (var i = 0; i < data.screen.length; i++) {
        html += data.screen[i].join("");
    html += '<br />';
}

Concat'ing a string might look like a simple addition, but a new string object is created on every use of +=. I suggest using something like a StringBuffer.

Edit:

Ok, in your example code, you are trying to replace thousands of lines of html every few milliseconds, changing only one character each time. If you only changed one character each time, you could cut down on the delay by ~99%