Gridster add_widget is slow

2019-05-17 17:57发布

站内问答 / 移动开发
1294 3 6

I want use Gridster for my web site, but i need to add lot of widgets with "add_widget" command. I do a test and i think there is a problem with "add_widget" function : grid is more and more slow and there are memory leak.

You can see that in this video : grister problem video

However, as you can see on the video, if i add widget at beginning (not with add_widget function) there is no problem. Can you help me ? Something wrong with my code ?

Thanks in advance !

标签： gridster
举报
3条回答
劳资没心，怎么记你
2楼-- · 2019-05-17 17:59

In my own experience, the main culprit was using the autogenerate_stylesheet setting. The problem is that it regenerates the css on every call to add_widget(), and this just absolutely kills browsers. Additionally, gridster has/had a bug where stylesheets get duplicated, filling the <head> with tons of duplicate style rules, making it tough on the browser(this bug was supposedly fixed, but my experience was that the fix only worked in specific scenarios, definitely not in mine).

When I used gridster, my widgets were always the same size. So, in my case, I was able to generate the stylesheet once, never needing to regenerate it.

I don't think its part of the public api, but you can just call generate_stylesheet() method once manually.

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

Since you're only going to generate the stylesheet once, you need to make sure gridster will generate style rules for enough rows and columns to accommodate all your widgets, otherwise once you exceed the range, you'll experience broken layouts. Just supply an upper bound on rows and cols when calling generate_stylesheet(opts). If you don't, it seems like it defaults to whatever value your gridster instance is using for max_rows and max_cols.

The nice thing is by manually generating the stylesheet, is that you completely avoid the duplicate style bug too.

The exponential slowdown will be gone. Happy gridstering.

查看更多
0人赞 添加讨论(0) 举报
时光不老，我们不散
3楼-- · 2019-05-17 17:59

I know I'm a bit late on this but I had the same problem and none of the above solutions worked.

However, I found that I was generating the size and coordinates of the widgets as a string rather than an integer on the back-end.

By making sure they were integers I managed to speed things up loads.

查看更多
0人赞 添加讨论(0) 举报
Root（大扎）
4楼-- · 2019-05-17 18:09

The best way to fix it, is not to disable the autogenerated stylesheet, but to edit the fn.generate_stylesheet function in jquery.gridster.js

At the end of the function, just before these lines: 

    return this.add_style_tag(styles);
};

add this line:

this.remove_style_tags();

The final result would look like this:

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

With this, each time a stylesheet is generated, the previous one is removed, so there no duplication problem!

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)