webrender: Bad performance when rendering long list of links separated with commas.
Hi,
I noticed that one page works really slow with webrender enabled. It turned out to be a list of links. It tanks compositor performance and CPU backed to a lesser degree. With 5000 links I get 45ms mean when scrolling on decent CPU. And it spikes to 160ms when selecting text. You can see the attached screenshot for profiler view after little bit of scrolling the page.
Click for screenshot

It happens when links are separated with commas. Probably matter of having alternating text color or something.
Here is the page that you can reproduce the issue.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script>
for (let i = 0; i < 5000; ++i) {
const str = (Math.random() + 1).toString(36).substring(7);
document.body.insertAdjacentHTML('beforeend', `<a href="https://example.com/">${str}</a>, `);
}
</script>
</body>
</html>
Regards, Kacper
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 2
- Comments: 17 (15 by maintainers)
Improvement is huge. On 2560x1400 resolution I get around 30fps when scrolling. (i7 5820k and R9 390) but it is no longer visible on first glance in real websites. Still pure CPU rendering is faster tho.
On my end it takes 1800-2200 ms on DL IPC. Basically when anything is selected on page it tanks the performance. Maybe we should keep this issue open for further improvements?
I think the “IPC” time might just be us choking on https://bugzilla.mozilla.org/show_bug.cgi?id=1435931#c4 which is largely an upstream gecko bug
Picture caching is sort of a universal answer to anything:
I’d like to see an orthogonal solution here. For instance, what’s stopping us to render all the underline (given that it’s solid rects) in the opaque pass?