stylo: Restyling is significantly slower than initial styling

RESOLVED WORKSFORME

Status

()

Core
CSS Parsing and Computation
RESOLVED WORKSFORME
11 months ago
9 months ago

People

(Reporter: bholley, Unassigned)

Tracking

(Depends on: 1 bug, Blocks: 1 bug)

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

11 months ago
STR:
(1) Start a recent build with STYLO_THREADS=1
(2) Start the gecko profiler
(3) Open up the web console
(4) Load a local obama wikipedia page
(5) Paste [1] into the web console.
(6) Stop the profiler.

Profile: https://perfht.ml/2sxsgRu

Note that the initial Servo_StyleSubtree takes 52 ms, whereas the second one takes 80ms, _and_ is followed by another 35ms of ProcessPostTraversal.

Restyling will always be _somewhat_ slower, because:
* We need to do slightly more work to determine which elements need styling.
* We need to compute change hints.
* We need to drop all the old data, in addition to allocating the new stuff.

But there's still a bunch of dumb stuff we're doing here that's costing us way too much. I'll file dependent bugs.



[1]
var count = 0; function traverseDescendants(root) { count++; let children = root.children; for (var i = 0; i < children.length; ++i) { let child = children[i]; traverseDescendants(child); } }; var start = performance.now(); traverseDescendants(document); console.log(performance.now() - start);
(Reporter)

Comment 1

11 months ago
(In reply to Bobby Holley (:bholley) (busy with Stylo) from comment #0)
> [1]
> var count = 0; function traverseDescendants(root) { count++; let children =
> root.children; for (var i = 0; i < children.length; ++i) { let child =
> children[i]; traverseDescendants(child); } }; var start = performance.now();
> traverseDescendants(document); console.log(performance.now() - start);

Whoops, wrong blob from my scratch textfile. I meant:

var start = performance.now();
var s = document.createElement('style');
s.innerHTML = '*|* { color: red }';
document.head.appendChild(s);
window.getComputedStyle(document.body).color;
console.log(performance.now() - start);
(Reporter)

Updated

11 months ago
Depends on: 1373430
(Reporter)

Comment 2

11 months ago
And I guess it makes a bit more sense to work on:

var start = performance.now();
var s = document.createElement('style');
s.innerHTML = '*|* { color: red }';
document.head.appendChild(s);
s.remove();
window.getComputedStyle(document.body).color;
console.log(performance.now() - start);

Which doesn't add the counfounding factor of actually styling with the *|* red rule. That gives us the following profile, with similar characteristics: https://perfht.ml/2sygSEC
(Reporter)

Updated

10 months ago
Depends on: 1372061
(Reporter)

Updated

10 months ago
Depends on: 1375764
(Reporter)

Comment 3

9 months ago
Just re-profiled, and I get comparable numbers ignoring considering accumulate_damage and ignoring the post-traversal.
Status: NEW → RESOLVED
Last Resolved: 9 months ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.