Google Chrome core 10sec freeze with 100 columns and ScrollX: true
Google Chrome core 10sec freeze with 100 columns and ScrollX: true
fedor57
Posts: 6Questions: 1Answers: 0
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.
Answers
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
Thank you for the response, I had time to build a test case:
https://jsfiddle.net/n9d7zLu8/3/
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
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
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
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
Here is a screencast
https://share.icloud.com/photos/0VHv78NeX7teAQpi-9_6zeqsw
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
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
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
scrollXwill 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