Bug 272889

Summary: CSS Highlights API poor performance compared to Chrome
Product: WebKit Reporter: Keith Cirkel <webkit>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: bramus, karlcow, megan_gardner, rik, thorton, webkit-bug-importer
Priority: P2 Keywords: BrowserCompat, InRadar
Version: WebKit Nightly Build   
Hardware: All   
OS: All   
Attachments:
Description Flags
Web Inspector Timeline none

Keith Cirkel
Reported 2024-04-18 03:51:16 PDT
Steps to reproduce: 1. Visit https://codepen.io/bramus/pen/MWxLjEo 2. Visit https://code.jquery.com/jquery-3.7.1.js and copy the contents 3. Paste the contents into the codepen demo textarea 4. Try scrolling around 5. Observe the stark performance difference between Safari & Chrome
Attachments
Web Inspector Timeline (191.10 KB, image/png)
2024-04-19 02:36 PDT, Karl Dubost 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Anthony Ricaud
Comment 1 2024-04-18 04:40:03 PDT
ccing Megan for awareness as she was involved in the implementation
Radar WebKit Bug Importer
Comment 2 2024-04-19 02:26:25 PDT
<rdar://problem/126741543>
Karl Dubost
Comment 3 2024-04-19 02:29:59 PDT
It takes a long time to highlight everything. Once all the code is highlighted the scrolling is working fine.
Karl Dubost
Comment 4 2024-04-19 02:36:57 PDT
Created attachment 471004 [details] Web Inspector Timeline it takes on my machine ~120s before being fully highlighted, with the CPU maxing out. On the JS side it doesn't do much it seems.
Anthony Ricaud
Comment 5 2024-04-19 04:01:23 PDT
> Once all the code is highlighted the scrolling is working fine. I notice a big difference in scrolling behaviour: With the focus outside the contenteditable area, going from the top to the bottom of the page (or vice versa, with Home/End keys) is pretty quick but with a flash of white screen. With the focus inside the contenteditable area, the same action takes tens of seconds.
Note You need to log in before you can comment on or make changes to this bug.