Question

这里有一些代码，代表了我对网站进行编码的一般风格：

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

}();

这是我用于项目列表的东西，它只是一个基类，所以它看起来毫无意义。在我的主页上，我有一些＆＃39; ResultsGrids＆＃39;总共我有大约100个项目要添加。这些项中的每一个都将append，addClass，css等调用到它们代表性的jquery对象大约5次，这样在渲染之前就会有很多HTML。问题是，由于我已经明白我通过为每个项目调用jquery.append等方法来访问DOM不必要的时间，因此有一段非常明显的时间延迟。

显而易见的解决方案是通过连接每个项目的html字符串为每个ResultsGrid做一个大的附加，但是我想知道这和我当前的方法之间是否存在中间点，这也会表现得很好，否则我和＃39;我必须重写很多代码。

我喜欢从$（＆＃34;＆＃34;）开始并逐渐追加，但显然这不是一个好的表现，因为它不断重新计算的东西，但我不喜欢＃39; t需要知道每一步的宽度，高度和位置。理想情况下，我要告诉它不要对DOM做任何事情，直到我告诉它。如果用jquery无法做到这一点，那么我想要一个允许我这样做的库。我已经简要介绍了js模板库，但它们看起来并不诱人。特别是Angular。

Answer 1

我不了解您正在尝试做的事情，但是，根据我的理解，您可以尝试使用jquery的$.detach()功能。

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

对分离元素执行DOM操作应该更快，并为您提供像您一样思考的中间解决方案。这是一个性能提示，您可以找到here以及其他一些有用的提示。

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

1 个答案: