8000 Very slow operation in 11.2.0 and higher with large blocks, using "sizeToContent" and crippled cellHeight values · Issue #2978 · gridstack/gridstack.js · GitHub
[go: up one dir, main page]

Skip to content
Very slow operation in 11.2.0 and higher with large blocks, using "sizeToContent" and crippled cellHeight values #2978
Closed
@IgorA100

Description

@IgorA100

Subject of the issue

I need all the blocks to be placed close to each other (maximum distance should not exceed 2px) and "sizeToContent" should be used. For this I used cellHeight: '1px' || '2px' and everything worked fine for both small and large blocks. With other cellHeight values, the distance between the blocks vertically will be large.
Up to version 11.1.2 (inclusive) I had no problems with initialization:

Starting with version 11_2_0 and up to 11.4.0, terrible slowdowns begin during initialization. If I specify cellHeight: '50px' or I do not specify cellHeight, then everything will work quickly, but there will be a gap between the blocks vertically.

Your environment

  • version of gridstack.js - 11.1.2 & 11.2.0 & 11.4.0
  • which Chrome, Chromium/Windows 8.1, 10

Steps to reproduce

This behavior cannot be simulated on jsfiddle.net, because it requires a large browser window.
On the HTML page, create more than 15 image blocks of size 3840x2160
Expand the browser window to full screen.
and after the page loads, initialize:

window.onload = function() {
  const opts = {
    margin: '0px',
    cellHeight: '1px',
    sizeToContent: true,
    column: 48,
  };
  var objGridStack = GridStack.init({...opts});
};

Attached is an archive that you can deploy on your server and check the execution speed. In the index.html file, you can connect either 11.1.2 or 11.4.0
gs.zip

Expected behavior

The speed of initialization in 11.2.0 and subsequent versions should not be several (3-10) times lower than in 11.1.2
"addCSSRule" in GS works very slowly

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      0