Closed Bug 1373416 Opened 3 years ago Closed 2 years ago

stylo: Restyling is significantly slower than initial styling

Categories

(Core :: CSS Parsing and Computation, defect)

defect
Not set

Tracking

()

RESOLVED WORKSFORME

People

(Reporter: bholley, Unassigned)

References

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

Details

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);
(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);
Depends on: 1373430
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
Depends on: 1372061
Depends on: 1375764
Just re-profiled, and I get comparable numbers ignoring considering accumulate_damage and ignoring the post-traversal.
Status: NEW → RESOLVED
Closed: 2 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.