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:
parent
228a32effc
commit
0264ae23bc
10 changed files with 32 additions and 23 deletions
|
@ -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();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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()
|
||||||
|
|
|
@ -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 };
|
||||||
};
|
};
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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()
|
||||||
|
|
|
@ -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 {};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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()
|
||||||
|
|
|
@ -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));
|
||||||
});
|
});
|
||||||
|
|
|
@ -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());
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue