Google Chrome core 10sec freeze with 100 columns and ScrollX: true

fedor57

We are using DataTables for a table with lots of columns most of which are dynamically hidden on the client side.

This table after loading from server and rendering freezes browser for 10+ seconds. It happens after loading ajax, sizing columns and drawing the table events. During this time the whole page is not responding to any events. The DevTools profiler shows 100% CPU spent in the browser core, most likely no java script is working at the moment.

This happens on OS X to Google Chrome and Yandex Browser which is also chrome based. This does not happen to OS X Safari which is able to draw the table in a fraction of second.

While tracking down the problem I found out that it does not depend on number of rows. Zero rows with only a th gives almost the same freeze. Increasing column count prolongs the freeze significantly.

Helped to remove ScrollX: true and set it to false. After this the freeze has completely gone.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

fedor57

Thank you for the response, I had time to build a test case:

https://jsfiddle.net/n9d7zLu8/3/

kthorngren

I use Chrome on a Mac and tried your test case. I didn't notice any problems. I have Chrome Version 81.0.4044.138 (Official Build) (64-bit) and Mac OSX version 10.15.4. What versions do you have?

Have you tried other machines?

Do you have problems running the test case you provided?

Kevin

colin

Works for me too - Chrome on Fedora - I'm not seeing any performance issues. Do you have any extensions that could be affecting it? Maybe try running in incognito mode.

Colin

fedor57

I had reports from collegues who experienced just the same problem and one collegue with MacBook Pro who doesn't.

That could be extensions or monitor configuration. I have two monitors:
- Built in Retina display: resolution scaled one step to Larger Text from Default
- External DELL U2715H with Resolution default of display

fedor57

I just tested with Google Chrome with all extensions disabled and cleared browsing data, the problem is still there:

https://yadi.sk/i/4TOye-PPjzryug

fedor57

Here is a screencast

https://share.icloud.com/photos/0VHv78NeX7teAQpi-9_6zeqsw

fedor57

The problem is there at least for a half a year - was reproducing over all versions of auto-updating browsers. Current Chrome is

Google Chrome 81.0.4044.138 (Official Build) (64-bit)
Revision 8c6c7ba89cc9453625af54f11fd83179e23450fa-refs/branch-heads/4044@{#999}
OS macOS Version 10.15.4 (Build 19E287)
JavaScript V8 8.1.307.32
Flash 32.0.0.371 /Users/fsromanenko/Library/Application Support/Google/Chrome/PepperFlash/32.0.0.371/PepperFlashPlayer.plugin
User Agent Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36

colin

I tried that Chrome version on Windows and again that worked fine. I'll see if we can find a MacOS environment to use.

Colin

allan

I've just tried with that exact same build (81.0.4044.138) on MacOS 10.15.4 (3.1Ghz dual core i7) and it was near instant for me. I'm afraid I'm not seeing the delay that is present in the video you linked above.

There is no question that using scrollX will slow things down a lot - it requires a massive number more calculations, particularly if you have lots of columns. And its worse if you have lots of rows in the table.

If you take a "CPU profile" during that 10 second period, does it show anything interesting? Send it over to me if you like and I'll take a look.

Allan