none
StringBuffer usage in javascript in place of string concatenations - IE7.0

    Question

  • HI,

     

    Does having string concatenations have drastic  performance issues? I read in an article that either StringBuffer should be used in place of string concatenations for javascript or use AJAX.please let me know if this is valid?

    Does this have anything specific to I.E 7.0 or Vista.

     

     Inefficient and slow JavaScript code for creating HTML table. 

     function slowMakeTable(buf){

                        var COLS = 10;

                        var ROWS = 500;

                        var CELL = "0123456789"

     

                        var start = new Date().getTime();

     

                        buf += "<table>";

                        for (var i=0; i < ROWS; i++){

                                             buf += "<tr>";

                                             for (var j=0; j < COLS; j++){

                                                                 buf += "<td><i>" + CELL + "</i></td>";

                                             }

                                             buf += "</tr>";

                        }

                        buf += "</table>";

     

                        var duration = new Date().getTime() - start;

                        document.write("<br>" + (ROWS * COLS) + " cells - " + duration);

     

                        return buf;

    }

     

    ................................

     

     Efficient and fast JavaScript code for creating HTML table.

     function fastMakeTable(buf){

                        var COLS = 10;

                        var ROWS = 500;

                        var CELL = "0123456789"

     

                        var start = new Date().getTime();

     

                        buf += "<table>";

                        for (var i=0; i < ROWS; i++){

                                             var row = "<tr>";

                                             for (var j=0; j < COLS; j++){

                                                                 row += "<td><i>" + CELL + "</i></td>";

                                             }

                                             row += "</tr>";

                                             buf += row

                        }

                        buf += "</table>";

     

                        var duration = new Date().getTime() - start;

                        document.write("<br>" + (ROWS * COLS) + " cells - " + duration);

     

                        return buf;

    }

     

    usage of intermediate strings:

     

    function StringBuffer() {

       this.buffer = [];

     }

     

     StringBuffer.prototype.append = function append(string) {

       this.buffer.push(string);

       return this;

     };

     

     StringBuffer.prototype.toString = function toString() {

       return this.buffer.join("");

     };

     

     var buf = new StringBuffer();

     

     buf.append("hello");

     buf.append("world");

     

     alert(buf.toString());

     

     

     

    Kindly suggest me.

     

    Thanks and Regards,

    Krishna Mohan

    Thursday, January 17, 2008 12:29 PM

All replies

  • You are correct, appending strings with the '+=' operator is slow when used a lot.  This is true in all browsers.

    In IE, it is exponentiallly bad... especially when you are running 1,000s of concatinations...

    the string buffer (e.g. using an array, then .join() when done) is much faster... but it is a tradeoff in terms of flexibility  (e.g. midway through you can't do an .indexOf() test)

    I would pick an arbitrary limit, say 200 "joins"... if you know ahead of time, that this is what you are about to do, then use a buffer... but below your threshold, the savings are negligable.

    I'm pretty sure Quirksmode has published some good speed tests for this.
    Thursday, January 17, 2008 2:26 PM