问题描述
我想在我的网站上使用Gridster，但是我需要使用"add_widget"命令添加许多小部件.我进行了测试，我认为"add_widget"功能存在问题:网格越来越慢，并且存在内存泄漏.
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
但是，正如您在视频中看到的那样，如果我在开始时添加小部件(不使用add_widget函数)就没有问题.你能帮助我吗 ?我的代码有问题吗?
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 ?
提前谢谢！
推荐答案
以我自己的经验，罪魁祸首是使用autogenerate_stylesheet设置.问题在于，它每次调用add_widget()时都会重新生成css，这绝对会杀死浏览器.此外，gridster有一个错误，即样式表被复制，用大量重复的样式规则填充<head>，这在浏览器上很难解决(该错误被修复，但我的经验是，该修复仅在特定情况下有效，绝对不是我的.)
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).
当我使用gridster时，我的小部件始终是相同大小.因此，就我而言，我能够生成一次样式表，而无需重新生成它.
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.
我认为它不是公共api的一部分，但是您可以手动调用一次generate_stylesheet()方法.
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
由于只生成一次样式表，因此需要确保gridster能够为足够的行和列生成样式规则，以容纳所有小部件，否则，一旦超出范围，就会遇到布局混乱的情况.只需在调用generate_stylesheet(opts)时提供行和列的上限即可.如果您不这样做，似乎它默认为您的gridster实例用于max_rows和max_cols的任何值.
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.
这篇关于Gridster add_widget很慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！