Page MenuHomePhabricator

Using data URI images in inline slugs (for chimeras) is slow in Chrome (and possibly others)
Closed, ResolvedPublic8 Estimated Story Points

Description

An inline slug contains a chimera, which is an <img> tag whose src attribute is a data URI. The image represented by this data URI is a 1x1px transparent GIF, and is never actually rendered because we set style="width: 0; height: 0;". IIRC it's there because Firefox misbehaves when <img>s don't have an src that resolves to a real image.

In Chrome, however, this is terribly slow. Cloning <img> nodes with this src, or parsing HTML containing an <img> with such an src, or calling imgNode.src = 'data:.....'; are all slow operations.

In setupSlugs, we create a single slug node (a "template") that is then cloned multiple times. Commenting out the src attribute caused the time spent cloning the slug template to decrease from 127ms to 4ms in my test case (the Barack Obama page). These images also end up being cloned by comparison code in renderContents (see also T91244), where time spent cloning decreased from 61ms to 4ms.

We should figure out if there's a way to not need to set the src of these <img> tags, at least in Chrome; and we should figure out if this is also slow in Firefox.

Event Timeline

Catrope raised the priority of this task from to Needs Triage.
Catrope updated the task description. (Show Details)
Catrope added subscribers: ori, dchan, Catrope.

In Chromium there is no need to set the src attribute. In Firefox, if the src attribute is not set the cursoring behaviour changes to something problematic.

Jdforrester-WMF renamed this task from Using data URI images in inline slugs (for chimeras) is slow in Chrome to Using data URI images in inline slugs (for chimeras) is slow in Chrome (and possibly others).Mar 2 2015, 3:36 PM
Jdforrester-WMF triaged this task as High priority.
Jdforrester-WMF set Security to None.

Change 196119 had a related patch set uploaded (by Catrope):
Only set a data URI src on inline slugs in Firefox

https://gerrit.wikimedia.org/r/196119

Change 196119 merged by jenkins-bot:
Only set a data URI src on inline slugs in Firefox

https://gerrit.wikimedia.org/r/196119

Change 311218 had a related patch set uploaded (by Catrope):
ve.ce.LinkAnnotation: Only set src on nails in Firefox

https://gerrit.wikimedia.org/r/311218

Benchmark: https://www.measurethat.net/Benchmarks/Show/251/1/img-src-slowness

In Firefox, I get 28k ops/sec for the "with src" case, and 670k ops/sec for the "without src" case. In Chrome, I get 5.7k/sec vs 454k/sec. So it looks like creating images with src is about 5x slower in Chrome than in Firefox, and the slowdown for having an src is about 20-25x in Firefox vs ~80x in Chrome.

Change 311218 merged by jenkins-bot:
ve.ce.LinkAnnotation: Only set src on nails in Firefox

https://gerrit.wikimedia.org/r/311218