LibWeb: Make CSS layout lazier

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. :^)

2 files changed, 2 insertions, 3 deletions

diff --git a/Userland/Libraries/LibWeb/HTML/HTMLElement.cpp b/Userland/Libraries/LibWeb/HTML/HTMLElement.cpp
index cb01c626d8..21f350445f 100644
--- a/Userland/Libraries/LibWeb/HTML/HTMLElement.cpp
+++ b/Userland/Libraries/LibWeb/HTML/HTMLElement.cpp
@@ -97,7 +97,6 @@ void HTMLElement::set_inner_text(StringView text)
     append_child(document().create_text_node(text));
 
     set_needs_style_update(true);
-    document().invalidate_layout();
 }
 
 String HTMLElement::inner_text()
diff --git a/Userland/Libraries/LibWeb/HTML/HTMLImageElement.cpp b/Userland/Libraries/LibWeb/HTML/HTMLImageElement.cpp
index 14e79b1a87..4d6c32adb1 100644
--- a/Userland/Libraries/LibWeb/HTML/HTMLImageElement.cpp
+++ b/Userland/Libraries/LibWeb/HTML/HTMLImageElement.cpp
@@ -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));
         });