RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-04 21:57:36 +00:00
Code Issues Activity Actions

LibWeb: Make CSS layout lazier

Browse source 
Instead of doing layout synchronously whenever something changes,
we now use a basic event loop timer to defer and coalesce relayouts.

If you did something that requires a relayout of the page, make sure
to call Document::set_needs_layout() and it will get coalesced with all
the other layout updates.

There's lots of room for improvement here, but this already makes many
web pages significantly snappier. :^)

Also, note that this exposes a number of layout bugs where we have been
relying on multiple relayouts to calculate the correct dimensions for
things. Now that we only do a single layout in many cases, these kind of
problems are much more noticeable. That should also make them easier to
figure out and fix. :^)
This commit is contained in:
Andreas Kling 2021-10-05 22:30:53 +02:00
parent 228a32effc
commit 0264ae23bc
10 changed files with 32 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Userland/Libraries/LibWeb/HTML/HTMLImageElement.cpp
View file

@ -21,7 +21,7 @@ HTMLImageElement::HTMLImageElement(DOM::Document& document, QualifiedName qualif
, m_image_loader(*this)
{
m_image_loader.on_load = [this] {
this->document().update_layout();
this->document().schedule_style_update();
queue_an_element_task(HTML::Task::Source::DOMManipulation, [this] {
dispatch_event(DOM::Event::create(EventNames::load));
});
@ -29,7 +29,7 @@ HTMLImageElement::HTMLImageElement(DOM::Document& document, QualifiedName qualif
m_image_loader.on_fail = [this] {
dbgln("HTMLImageElement: Resource did fail: {}", src());
this->document().update_layout();
this->document().schedule_style_update();
queue_an_element_task(HTML::Task::Source::DOMManipulation, [this] {
dispatch_event(DOM::Event::create(EventNames::error));
});