1373416 - stylo: Restyling is significantly slower than initial styling

Status: RESOLVED WORKSFORME

(Core :: CSS Parsing and Computation, defect)

Description

[Bobby Holley (:bholley)]

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);

Comment 1

[Bobby Holley (:bholley)]

(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);

Comment 2

[Bobby Holley (:bholley)]

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

Comment 3

[Bobby Holley (:bholley)]

Just re-profiled, and I get comparable numbers ignoring considering accumulate_damage and ignoring the post-traversal.