mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-09-20 09:49:15 +03: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:
parent
228a32effc
commit
0264ae23bc
Notes:
sideshowbarker
2024-07-18 03:00:19 +09:00
Author: https://github.com/awesomekling Commit: https://github.com/SerenityOS/serenity/commit/0264ae23bc3
@ -144,8 +144,6 @@ void EvaluateExpressionDialog::set_output(const StringView& html)
|
||||
paragraph->set_inner_html(html);
|
||||
|
||||
m_output_container->append_child(paragraph);
|
||||
m_output_container->document().invalidate_layout();
|
||||
m_output_container->document().update_layout();
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -24,8 +24,7 @@ void CharacterData::set_data(String data)
|
||||
if (m_data == data)
|
||||
return;
|
||||
m_data = move(data);
|
||||
// FIXME: This is definitely too aggressive.
|
||||
document().schedule_forced_layout();
|
||||
set_needs_style_update(true);
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -80,7 +80,7 @@ Document::Document(const AK::URL& url)
|
||||
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();
|
||||
});
|
||||
}
|
||||
@ -164,11 +164,11 @@ void Document::schedule_style_update()
|
||||
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;
|
||||
m_forced_layout_timer->start();
|
||||
m_layout_update_timer->start();
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
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()
|
||||
{
|
||||
invalidate_layout();
|
||||
tear_down_layout_tree();
|
||||
update_layout();
|
||||
}
|
||||
|
||||
void Document::ensure_layout()
|
||||
{
|
||||
if (!m_layout_root)
|
||||
if (m_needs_layout || !m_layout_root)
|
||||
update_layout();
|
||||
}
|
||||
|
||||
void Document::update_layout()
|
||||
{
|
||||
if (!m_needs_layout && m_layout_root)
|
||||
return;
|
||||
|
||||
if (!browsing_context())
|
||||
return;
|
||||
|
||||
@ -438,6 +444,8 @@ void Document::update_layout()
|
||||
if (auto* page = this->page())
|
||||
page->client().page_did_layout();
|
||||
}
|
||||
|
||||
m_needs_layout = false;
|
||||
}
|
||||
|
||||
static void update_style_recursively(DOM::Node& node)
|
||||
@ -461,7 +469,7 @@ void Document::update_style()
|
||||
if (!browsing_context())
|
||||
return;
|
||||
update_style_recursively(*this);
|
||||
update_layout();
|
||||
set_needs_layout();
|
||||
}
|
||||
|
||||
RefPtr<Layout::Node> Document::create_layout_node()
|
||||
|
@ -144,19 +144,20 @@ public:
|
||||
void set_visited_link_color(Color);
|
||||
|
||||
void force_layout();
|
||||
void invalidate_layout();
|
||||
void ensure_layout();
|
||||
|
||||
void update_style();
|
||||
void update_layout();
|
||||
|
||||
void set_needs_layout();
|
||||
|
||||
virtual bool is_child_allowed(const Node&) const override;
|
||||
|
||||
const Layout::InitialContainingBlock* layout_node() const;
|
||||
Layout::InitialContainingBlock* layout_node();
|
||||
|
||||
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_class_name(FlyString const&);
|
||||
@ -352,7 +353,7 @@ private:
|
||||
Optional<Color> m_visited_link_color;
|
||||
|
||||
RefPtr<Core::Timer> m_style_update_timer;
|
||||
RefPtr<Core::Timer> m_forced_layout_timer;
|
||||
RefPtr<Core::Timer> m_layout_update_timer;
|
||||
|
||||
String m_source;
|
||||
|
||||
@ -399,6 +400,8 @@ private:
|
||||
|
||||
// Used by evaluate_media_queries_and_report_changes().
|
||||
Vector<WeakPtr<CSS::MediaQueryList>> m_media_query_lists;
|
||||
|
||||
bool m_needs_layout { false };
|
||||
};
|
||||
|
||||
}
|
||||
|
@ -224,7 +224,7 @@ void Element::recompute_style()
|
||||
return;
|
||||
layout_node()->apply_style(*new_specified_css_values);
|
||||
if (diff == StyleDifference::NeedsRelayout) {
|
||||
document().schedule_forced_layout();
|
||||
document().set_needs_layout();
|
||||
return;
|
||||
}
|
||||
if (diff == StyleDifference::NeedsRepaint) {
|
||||
@ -270,7 +270,6 @@ ExceptionOr<void> Element::set_inner_html(String const& markup)
|
||||
return result.exception();
|
||||
|
||||
set_needs_style_update(true);
|
||||
document().invalidate_layout();
|
||||
return {};
|
||||
}
|
||||
|
||||
|
@ -142,7 +142,6 @@ void Node::set_text_content(String const& content)
|
||||
}
|
||||
|
||||
set_needs_style_update(true);
|
||||
document().invalidate_layout();
|
||||
}
|
||||
|
||||
RefPtr<Layout::Node> Node::create_layout_node()
|
||||
|
@ -49,7 +49,6 @@ ExceptionOr<void> ShadowRoot::set_inner_html(String const& markup)
|
||||
return result.exception();
|
||||
|
||||
set_needs_style_update(true);
|
||||
document().invalidate_layout();
|
||||
return {};
|
||||
}
|
||||
|
||||
|
@ -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()
|
||||
|
@ -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));
|
||||
});
|
||||
|
@ -82,6 +82,8 @@ void BrowsingContext::set_viewport_rect(Gfx::IntRect const& rect)
|
||||
|
||||
if (m_size != rect.size()) {
|
||||
m_size = rect.size();
|
||||
if (auto* document = active_document())
|
||||
document->set_needs_layout();
|
||||
did_change = true;
|
||||
}
|
||||
|
||||
@ -105,6 +107,9 @@ void BrowsingContext::set_size(Gfx::IntSize const& size)
|
||||
return;
|
||||
m_size = size;
|
||||
|
||||
if (auto* document = active_document())
|
||||
document->set_needs_layout();
|
||||
|
||||
for (auto* client : m_viewport_clients)
|
||||
client->browsing_context_did_set_viewport_rect(viewport_rect());
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user