最小化jquery.append重站点的DOM访问

Question

Here's a bit of code that represents the general style I've been coding my site:

!function(){
    window.ResultsGrid = Class.extend(function(){

        this.constructor = function($container, options){
            this.items = [];
            this.$container = $($container);
            this.options = $.extend({}, defaultOptions, options);

            this.$grid = $(
                '<div class="results-grid">\
                    <ul></ul>\
                </div>'
            )
                .css("margin", -this.options.spacing / 2);

            this.$list = this.$grid.find("ul");

            this.$container.append(this.$grid);
        };


        this.setItems = function(datas) {
            this.$grid.addClass("display-none");
            this.clear();
            for (var k in datas) this.addItem(datas[k]);
            this.$grid.removeClass("display-none");
        };

        this.addItem = function(data) {
            var width = this.options.columnWidth;
            var height = this.options.rowHeight;
            var padding = this.options.spacing / 2;
            if (this.options.columns > 0) width = (this.$container.width() - this.options.columns * this.options.spacing) / this.options.columns;
            if (this.options.rows > 0) height = (this.$container.height() - this.options.rows * this.options.spacing) / this.options.rows;
            if (this.options.ratio > 0) height = width / this.options.ratio;
            var item = new (this.options.class)(this.$list, {
                data: data,
                type: this.options.type,
                width: width,
                height: height,
                padding: padding
            });
            this.items.push(item);
        };

        this.clear = function() {
            for (var k in this.items) this.items[k].destroy();
            this.items.length = 0;
        };

        this.destroy = function() {
            this.clear();
            this.$grid.find("*").off();
            this.$grid.remove();
        }
    });

    var defaultOptions = {
        class: ResultsItem.Game,
        type: ResultsItem.Game.COMPACT,
        columns:1,
        rows:0,
        spacing: 10,
        rowHeight: 80,
        ratio: 0,
        columnWidth: 0
    };

}();

This is something I use for lists of items, it's just a base class so it looks fairly pointless. On my homepage I have a few of these 'ResultsGrids' and in total I have about 100 items to be added. Each of these items calls append, addClass, css, etc. to their representative jquery object about 5 times, so that's a lot of HTML fiddling before it ever renders. Problem is, there's quite a noticable time delay as I've just come to understand I'm accessing the DOM an unnecessary amount of times by calling methods like jquery.append for each item.

The obvious solution is to do one big append for each ResultsGrid by concatenating the html strings of each item, but I wonder if there's a middle ground between this and my current approach which will perform just as well, otherwise I'll have to rewrite a lot of code.

I like to start with a $("") and append bit by bit, but obviously this isn't good performance wise because it's constantly recalculating stuff, but I don't need to know the width, height and position of everything every step of the way. Ideally I'd like to tell it to not do anything to the DOM until I tell it to. If there's no way to do this with jquery, then I'd like a library that will allow me to do this. I've had a brief look at js templating libraries but they don't look very enticing. Angular especially.

Answer 1

I don't have the big picture of what you're trying to do, but, from what I understand, you could try using jquery's $.detach() function.

this.setItems = function(datas) {
            //store the parent of this grid                
            this.parent = this.$grid.parent();
            this.$grid.detach();
            this.$grid.addClass("display-none");
            this.clear();

            //here you add your html/etc to the grid
            for (var k in datas) this.addItem(datas[k]);

            //reattach the grid to the parent
            this.parent.append(this.$grid);
            this.$grid.removeClass("display-none");
        };

Doing DOM manipulation on detached elements should be much faster and provide you with an in-between solution like you were thinking. This is a performance tip that you could find here , along with some other useful ones.