【问题标题】:Gridster add_widget is slowGridster add_widget 很慢
【发布时间】:2013-05-07 12:22:06
【问题描述】:

我想为我的网站使用 Gridster,但我需要使用“add_widget”命令添加很多小部件。我做了一个测试,我认为“add_widget”功能存在问题:网格越来越慢并且存在内存泄漏。

您可以在此视频中看到:grister problem video

但是,正如您在视频中看到的那样,如果我在开头添加小部件(不使用 add_widget 函数),则没有问题。你能帮助我吗 ?我的代码有问题吗?

提前致谢!

【问题讨论】:

标签: gridster


【解决方案1】:

根据我自己的经验,罪魁祸首是使用了autogenerate_stylesheet 设置。问题是它会在每次调用add_widget() 时重新生成css,这绝对会杀死浏览器。此外,gridster 有/有一个样式表被重复的错误,用大量重复的样式规则填充<head>,这使得浏览器变得困难(这个错误应该是修复的,但我的经验是修复只在特定情况下有效,绝对不是我的)。

当我使用 gridster 时,我的小部件总是相同的大小。因此,就我而言,我能够生成一次样式表,而无需重新生成它。

我不认为它是公共 api 的一部分,但你可以手动调用一次 generate_stylesheet() 方法。

var gridster = $(".gridster ul").gridster({
    autogenerate_stylesheet: false,
    widget_base_dimensions: [140, 140],
    //other options...
}).data('gridster');

gridster.generate_stylesheet({rows: 30; cols: 8});

//freely call gridster.add_widget(...); as many times as you like

由于您只会生成一次样式表,因此您需要确保 gridster 将为足够的行和列生成样式规则以容纳所有小部件,否则一旦超出范围,您就会遇到布局损坏的情况。调用generate_stylesheet(opts) 时只需提供行和列的上限。如果您不这样做,它似乎默认为您的 gridster 实例用于 max_rowsmax_cols 的任何值。

手动生成样式表的好处是你也完全避免了重复样式的错误。

指数级的放缓将会消失。快乐的网格化。

【讨论】:

    【解决方案2】:

    我知道我在这方面有点晚了,但我遇到了同样的问题,上述解决方案都没有奏效。

    但是,我发现我在后端将小部件的大小和坐标生成为字符串而不是整数。

    通过确保它们是整数,我设法加快了加载速度。

    【讨论】:

    • 是的,这就是问题的原因!正如此问题线程的最后一条评论所说,解决此问题的方法是在传递给 add_widget 调用的每个坐标和大小上使用 parseInt(val)。 github.com/ducksboard/gridster.js/issues/166
    【解决方案3】:

    修复它的最好方法,不是禁用自动生成的样式表,而是编辑 jquery.gridster.js 中的 fn.generate_stylesheet 函数

    在函数的末尾,就在这些行之前:

        return this.add_style_tag(styles);
    };
    

    添加这一行:

    this.remove_style_tags();
    

    最终结果如下所示:

        this.remove_style_tags();
        return this.add_style_tag(styles);
    };
    

    这样,每次生成样式表时,都会删除前一个样式表,所以不存在重复问题!

    【讨论】:

    • 虽然这对许多人来说是一个不错的选择,但它仍然比生成样式表要慢得多。在禁用自动生成之前,我已经尝试过了。
    • 如果小部件尺寸和容器尺寸也发生变化,我们不能使用您的方法
    猜你喜欢
    • 1970-01-01
    • 2015-01-01
    • 1970-01-01
    • 2018-08-14
    • 1970-01-01
    • 1970-01-01
    • 2011-10-22
    • 2011-03-08
    • 2013-02-23
    相关资源
    最近更新 更多