Chrome 125 causes a major lag in page rendering
Asked Answered
C

1

7

The F12 window shows that the content downloaded within 3 seconds (like normal). But the Load, DOM, and Finish will say 3 minutes.

But the page only displays a tiny bit. The CPU sticks at around 33%, RAM sticks around 1.8 to 2 GB. The RAM looks normal, but the CPU wouldn't normally spike for that long.

The top left of the tab (the favicon area) cycles like the page isn't finished loading. 3 minutes later the page will display.

I have sanitized a sample page you can load locally, which behaves the same way (times may be different).

This page worked fine under Chrome 124, but 125 breaks usability.

full sample file at https://file.io/7m4n7lMuFDIA

Or take the sample and add 24,000 rows to the dropdown (I understand that's a problem in itself, but the point is that it used to work)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
Template
<select id="Template" name="Template" style="width:270px"><option value="0">Select A Value</option>
<option value="00001">00001</option>
<option value="00002">00002</option>
<option value="00003">00003</option>
<option value="00004">00004</option>
<option value="00005">00005</option>
<option value="00006">00006</option>
</select>
text after
</body>
</html>
Contingence answered 16/5 at 19:41 Comment(1)
Chiming in: it's not just you, anyhow.Lauro
L
3

The issue appears to be in the html parser; having thousands of options in div rather than select works fine. Adding thousands of options via JS works fine. Parsing them even in a <template> or via the JS parser apis does not - i.e., this is clearly a bug in the Chrome 125 HTML parser.

Workaround I'm using now until chrome fixes this: move the options via JS from a data-attribute on the <select> element into its content via JS:

for (const el of document.querySelectorAll("[data-hackhack-chrome125]")) {
    el.innerHTML = el.getAttribute("data-hackhack-chrome125") || "";
    el.removeAttribute("data-hackhack-chrome125");
}

Link to codepen demonstration of this workaround: https://codepen.io/emn13/full/pomyQjB

The bug was reported in chromium yesterday: https://issues.chromium.org/issues/341095522; a fix exists in v126 and there seems to be progress in backporting it to v125.

Edit: The fix appears to have been released in Chrome version 125.0.6422.76/.77 according to a bug-tracker post on 2024-05-21 19:09Z.

Lauro answered 17/5 at 13:54 Comment(2)
this hack does not work for me - page still loads very long, around 1 minute...Connotation
@Connotation I added a demo-link codepen.io/emn13/full/pomyQjB - I suspect your innerHTML contained a <select> or something; because the hack works reliably for me in various cases (I've already applied it to dozens of large selects). In any case, feel free to compare with the demo.Lauro

© 2022 - 2024 — McMap. All rights reserved.