1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-24 22:17:42 +00:00

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

View file

@ -144,8 +144,6 @@ void EvaluateExpressionDialog::set_output(const StringView& html)
paragraph->set_inner_html(html); paragraph->set_inner_html(html);
m_output_container->append_child(paragraph); m_output_container->append_child(paragraph);
m_output_container->document().invalidate_layout();
m_output_container->document().update_layout();
} }
} }

View file

@ -24,8 +24,7 @@ void CharacterData::set_data(String data)
if (m_data == data) if (m_data == data)
return; return;
m_data = move(data); m_data = move(data);
// FIXME: This is definitely too aggressive. set_needs_style_update(true);
document().schedule_forced_layout();
} }
} }

View file

@ -80,7 +80,7 @@ Document::Document(const AK::URL& url)
update_style(); update_style();
}); });
m_forced_layout_timer = Core::Timer::create_single_shot(0, [this] { m_layout_update_timer = Core::Timer::create_single_shot(0, [this] {
force_layout(); force_layout();
}); });
} }
@ -164,11 +164,11 @@ void Document::schedule_style_update()
m_style_update_timer->start(); m_style_update_timer->start();
} }
void Document::schedule_forced_layout() void Document::schedule_layout_update()
{ {
if (m_forced_layout_timer->is_active()) if (m_layout_update_timer->is_active())
return; return;
m_forced_layout_timer->start(); m_layout_update_timer->start();
} }
bool Document::is_child_allowed(const Node& node) const bool Document::is_child_allowed(const Node& node) const
@ -402,25 +402,31 @@ AK::URL Document::parse_url(String const& url) const
return m_url.complete_url(url); return m_url.complete_url(url);
} }
void Document::invalidate_layout() void Document::set_needs_layout()
{ {
tear_down_layout_tree(); if (m_needs_layout)
return;
m_needs_layout = true;
schedule_layout_update();
} }
void Document::force_layout() void Document::force_layout()
{ {
invalidate_layout(); tear_down_layout_tree();
update_layout(); update_layout();
} }
void Document::ensure_layout() void Document::ensure_layout()
{ {
if (!m_layout_root) if (m_needs_layout || !m_layout_root)
update_layout(); update_layout();
} }
void Document::update_layout() void Document::update_layout()
{ {
if (!m_needs_layout && m_layout_root)
return;
if (!browsing_context()) if (!browsing_context())
return; return;
@ -438,6 +444,8 @@ void Document::update_layout()
if (auto* page = this->page()) if (auto* page = this->page())
page->client().page_did_layout(); page->client().page_did_layout();
} }
m_needs_layout = false;
} }
static void update_style_recursively(DOM::Node& node) static void update_style_recursively(DOM::Node& node)
@ -461,7 +469,7 @@ void Document::update_style()
if (!browsing_context()) if (!browsing_context())
return; return;
update_style_recursively(*this); update_style_recursively(*this);
update_layout(); set_needs_layout();
} }
RefPtr<Layout::Node> Document::create_layout_node() RefPtr<Layout::Node> Document::create_layout_node()

View file

@ -144,19 +144,20 @@ public:
void set_visited_link_color(Color); void set_visited_link_color(Color);
void force_layout(); void force_layout();
void invalidate_layout();
void ensure_layout(); void ensure_layout();
void update_style(); void update_style();
void update_layout(); void update_layout();
void set_needs_layout();
virtual bool is_child_allowed(const Node&) const override; virtual bool is_child_allowed(const Node&) const override;
const Layout::InitialContainingBlock* layout_node() const; const Layout::InitialContainingBlock* layout_node() const;
Layout::InitialContainingBlock* layout_node(); Layout::InitialContainingBlock* layout_node();
void schedule_style_update(); void schedule_style_update();
void schedule_forced_layout(); void schedule_layout_update();
NonnullRefPtr<HTMLCollection> get_elements_by_name(String const&); NonnullRefPtr<HTMLCollection> get_elements_by_name(String const&);
NonnullRefPtr<HTMLCollection> get_elements_by_class_name(FlyString const&); NonnullRefPtr<HTMLCollection> get_elements_by_class_name(FlyString const&);
@ -352,7 +353,7 @@ private:
Optional<Color> m_visited_link_color; Optional<Color> m_visited_link_color;
RefPtr<Core::Timer> m_style_update_timer; RefPtr<Core::Timer> m_style_update_timer;
RefPtr<Core::Timer> m_forced_layout_timer; RefPtr<Core::Timer> m_layout_update_timer;
String m_source; String m_source;
@ -399,6 +400,8 @@ private:
// Used by evaluate_media_queries_and_report_changes(). // Used by evaluate_media_queries_and_report_changes().
Vector<WeakPtr<CSS::MediaQueryList>> m_media_query_lists; Vector<WeakPtr<CSS::MediaQueryList>> m_media_query_lists;
bool m_needs_layout { false };
}; };
} }

View file

@ -224,7 +224,7 @@ void Element::recompute_style()
return; return;
layout_node()->apply_style(*new_specified_css_values); layout_node()->apply_style(*new_specified_css_values);
if (diff == StyleDifference::NeedsRelayout) { if (diff == StyleDifference::NeedsRelayout) {
document().schedule_forced_layout(); document().set_needs_layout();
return; return;
} }
if (diff == StyleDifference::NeedsRepaint) { if (diff == StyleDifference::NeedsRepaint) {
@ -270,7 +270,6 @@ ExceptionOr<void> Element::set_inner_html(String const& markup)
return result.exception(); return result.exception();
set_needs_style_update(true); set_needs_style_update(true);
document().invalidate_layout();
return {}; return {};
} }

View file

@ -142,7 +142,6 @@ void Node::set_text_content(String const& content)
} }
set_needs_style_update(true); set_needs_style_update(true);
document().invalidate_layout();
} }
RefPtr<Layout::Node> Node::create_layout_node() RefPtr<Layout::Node> Node::create_layout_node()

View file

@ -49,7 +49,6 @@ ExceptionOr<void> ShadowRoot::set_inner_html(String const& markup)
return result.exception(); return result.exception();
set_needs_style_update(true); set_needs_style_update(true);
document().invalidate_layout();
return {}; return {};
} }

View file

@ -97,7 +97,6 @@ void HTMLElement::set_inner_text(StringView text)
append_child(document().create_text_node(text)); append_child(document().create_text_node(text));
set_needs_style_update(true); set_needs_style_update(true);
document().invalidate_layout();
} }
String HTMLElement::inner_text() String HTMLElement::inner_text()

View file

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

View file

@ -82,6 +82,8 @@ void BrowsingContext::set_viewport_rect(Gfx::IntRect const& rect)
if (m_size != rect.size()) { if (m_size != rect.size()) {
m_size = rect.size(); m_size = rect.size();
if (auto* document = active_document())
document->set_needs_layout();
did_change = true; did_change = true;
} }
@ -105,6 +107,9 @@ void BrowsingContext::set_size(Gfx::IntSize const& size)
return; return;
m_size = size; m_size = size;
if (auto* document = active_document())
document->set_needs_layout();
for (auto* client : m_viewport_clients) for (auto* client : m_viewport_clients)
client->browsing_context_did_set_viewport_rect(viewport_rect()); client->browsing_context_did_set_viewport_rect(viewport_rect());