script|layout: Do not force restyle when doing script queries (#37677)

Instead of doing a restyle whenever layout is requested, only do one if
script believes that the `Document` has changed in a way that needs a
restyle. In addition, track the different reasons this might be the
case. This will be used later to provide better debugging output.

In layout, when a restyle isn't requested, provide:
 - an early return if layout is up-to-date enough for the reflow goal.
 - skipping restyle and reflow if it isn't necessary.

Testing: This should not change observable behavior, and thus is covered
by existing tests.

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Martin Robinson 2025-06-26 10:02:15 +02:00 committed by GitHub
parent f9880637e9
commit 3e1cdacd07
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 168 additions and 127 deletions

View file

@ -42,7 +42,9 @@ use hyper_serde::Serde;
use ipc_channel::ipc;
use js::rust::{HandleObject, HandleValue};
use keyboard_types::{Code, Key, KeyState, Modifiers};
use layout_api::{PendingRestyle, ReflowGoal, TrustedNodeAddress, node_id_from_scroll_id};
use layout_api::{
PendingRestyle, ReflowGoal, RestyleReason, TrustedNodeAddress, node_id_from_scroll_id,
};
use metrics::{InteractiveFlag, InteractiveWindow, ProgressiveWebMetrics};
use net_traits::CookieSource::NonHTTP;
use net_traits::CoreResourceMsg::{GetCookiesForUrl, SetCookiesForUrl};
@ -383,11 +385,11 @@ pub(crate) struct Document {
/// Information on elements needing restyle to ship over to layout when the
/// time comes.
pending_restyles: DomRefCell<FnvHashMap<Dom<Element>, NoTrace<PendingRestyle>>>,
/// This flag will be true if the `Document` needs to be painted again
/// during the next full layout attempt due to some external change such as
/// the web view changing size, or because the previous layout was only for
/// layout queries (which do not trigger display).
needs_paint: Cell<bool>,
/// A collection of reasons that the [`Document`] needs to be restyled at the next
/// opportunity for a reflow. If this is empty, then the [`Document`] does not need to
/// be restyled.
#[no_trace]
needs_restyle: Cell<RestyleReason>,
/// <http://w3c.github.io/touch-events/#dfn-active-touch-point>
active_touch_points: DomRefCell<Vec<Dom<Touch>>>,
/// Navigation Timing properties:
@ -841,32 +843,34 @@ impl Document {
}
}
pub(crate) fn set_needs_paint(&self, value: bool) {
self.needs_paint.set(value)
pub(crate) fn add_restyle_reason(&self, reason: RestyleReason) {
self.needs_restyle.set(self.needs_restyle.get() | reason)
}
pub(crate) fn needs_reflow(&self) -> Option<ReflowTriggerCondition> {
pub(crate) fn clear_restyle_reasons(&self) {
self.needs_restyle.set(RestyleReason::empty());
}
pub(crate) fn restyle_reason(&self) -> RestyleReason {
let mut condition = self.needs_restyle.get();
if self.stylesheets.borrow().has_changed() {
condition.insert(RestyleReason::StylesheetsChanged);
}
// FIXME: This should check the dirty bit on the document,
// not the document element. Needs some layout changes to make
// that workable.
if self.stylesheets.borrow().has_changed() {
return Some(ReflowTriggerCondition::StylesheetsChanged);
}
let root = self.GetDocumentElement()?;
if root.upcast::<Node>().has_dirty_descendants() {
return Some(ReflowTriggerCondition::DirtyDescendants);
if let Some(root) = self.GetDocumentElement() {
if root.upcast::<Node>().has_dirty_descendants() {
condition.insert(RestyleReason::DOMChanged);
}
}
if !self.pending_restyles.borrow().is_empty() {
return Some(ReflowTriggerCondition::PendingRestyles);
condition.insert(RestyleReason::PendingRestyles);
}
if self.needs_paint.get() {
return Some(ReflowTriggerCondition::PaintPostponed);
}
None
condition
}
/// Returns the first `base` element in the DOM that has an `href` attribute.
@ -4141,7 +4145,7 @@ impl Document {
base_element: Default::default(),
appropriate_template_contents_owner_document: Default::default(),
pending_restyles: DomRefCell::new(FnvHashMap::default()),
needs_paint: Cell::new(false),
needs_restyle: Cell::new(RestyleReason::DOMChanged),
active_touch_points: DomRefCell::new(Vec::new()),
dom_interactive: Cell::new(Default::default()),
dom_content_loaded_event_start: Cell::new(Default::default()),
@ -5194,9 +5198,10 @@ impl Document {
self.has_trustworthy_ancestor_origin.get() ||
self.origin().immutable().is_potentially_trustworthy()
}
pub(crate) fn highlight_dom_node(&self, node: Option<&Node>) {
self.highlighted_dom_node.set(node);
self.set_needs_paint(true);
self.add_restyle_reason(RestyleReason::HighlightedDOMNodeChanged);
}
pub(crate) fn highlighted_dom_node(&self) -> Option<DomRoot<Node>> {
@ -6827,14 +6832,6 @@ impl PendingScript {
}
}
#[derive(Clone, Copy, Debug, PartialEq)]
pub(crate) enum ReflowTriggerCondition {
StylesheetsChanged,
DirtyDescendants,
PendingRestyles,
PaintPostponed,
}
fn is_named_element_with_name_attribute(elem: &Element) -> bool {
let type_ = match elem.upcast::<Node>().type_id() {
NodeTypeId::Element(ElementTypeId::HTMLElement(type_)) => type_,

View file

@ -103,9 +103,7 @@ use crate::dom::customelementregistry::{
CallbackReaction, CustomElementDefinition, CustomElementReaction, CustomElementState,
is_valid_custom_element_name,
};
use crate::dom::document::{
Document, LayoutDocumentHelpers, ReflowTriggerCondition, determine_policy_for_token,
};
use crate::dom::document::{Document, LayoutDocumentHelpers, determine_policy_for_token};
use crate::dom::documentfragment::DocumentFragment;
use crate::dom::domrect::DOMRect;
use crate::dom::domrectlist::DOMRectList;
@ -4693,10 +4691,7 @@ impl Element {
.and_then(|data| data.client_rect.as_ref())
.and_then(|rect| rect.get().ok())
{
if matches!(
doc.needs_reflow(),
None | Some(ReflowTriggerCondition::PaintPostponed)
) {
if doc.restyle_reason().is_empty() {
return rect;
}
}

View file

@ -52,7 +52,7 @@ use js::rust::{
MutableHandleValue,
};
use layout_api::{
FragmentType, Layout, PendingImageState, QueryMsg, ReflowGoal, ReflowRequest,
FragmentType, Layout, PendingImageState, QueryMsg, ReflowGoal, ReflowRequest, RestyleReason,
TrustedNodeAddress, combine_id_with_fragment_type,
};
use malloc_size_of::MallocSizeOf;
@ -124,7 +124,7 @@ use crate::dom::bluetooth::BluetoothExtraPermissionData;
use crate::dom::crypto::Crypto;
use crate::dom::cssstyledeclaration::{CSSModificationAccess, CSSStyleDeclaration, CSSStyleOwner};
use crate::dom::customelementregistry::CustomElementRegistry;
use crate::dom::document::{AnimationFrameCallback, Document, ReflowTriggerCondition};
use crate::dom::document::{AnimationFrameCallback, Document};
use crate::dom::element::Element;
use crate::dom::event::{Event, EventBubbles, EventCancelable, EventStatus};
use crate::dom::eventtarget::EventTarget;
@ -2128,34 +2128,30 @@ impl Window {
/// NOTE: This method should almost never be called directly! Layout and rendering updates should
/// happen as part of the HTML event loop via *update the rendering*.
#[allow(unsafe_code)]
fn force_reflow(
&self,
reflow_goal: ReflowGoal,
condition: Option<ReflowTriggerCondition>,
) -> bool {
self.Document().ensure_safe_to_run_script_or_layout();
fn force_reflow(&self, reflow_goal: ReflowGoal) -> bool {
let document = self.Document();
document.ensure_safe_to_run_script_or_layout();
// If layouts are blocked, we block all layouts that are for display only. Other
// layouts (for queries and scrolling) are not blocked, as they do not display
// anything and script excpects the layout to be up-to-date after they run.
let layout_blocked = self.layout_blocker.get().layout_blocked();
let pipeline_id = self.pipeline_id();
if reflow_goal == ReflowGoal::UpdateTheRendering && layout_blocked {
if reflow_goal == ReflowGoal::UpdateTheRendering &&
self.layout_blocker.get().layout_blocked()
{
debug!("Suppressing pre-load-event reflow pipeline {pipeline_id}");
return false;
}
if condition != Some(ReflowTriggerCondition::PaintPostponed) {
debug!(
"Invalidating layout cache due to reflow condition {:?}",
condition
);
let restyle_reason = document.restyle_reason();
document.clear_restyle_reasons();
if restyle_reason.needs_restyle() {
debug!("Invalidating layout cache due to reflow condition {restyle_reason:?}",);
// Invalidate any existing cached layout values.
self.layout_marker.borrow().set(false);
// Create a new layout caching token.
*self.layout_marker.borrow_mut() = Rc::new(Cell::new(true));
} else {
debug!("Not invalidating cached layout values for paint-only reflow.");
}
debug!("script: performing reflow for goal {reflow_goal:?}");
@ -2170,10 +2166,7 @@ impl Window {
debug_reflow_events(pipeline_id, &reflow_goal);
}
let document = self.Document();
let stylesheets_changed = document.flush_stylesheets_for_reflow();
let for_display = reflow_goal.needs_display();
let pending_restyles = document.drain_pending_restyles();
let dirty_root = document
.take_dirty_root()
@ -2185,6 +2178,7 @@ impl Window {
// Send new document and relevant styles to layout.
let reflow = ReflowRequest {
restyle_reason,
document: document.upcast::<Node>().to_trusted_node_address(),
dirty_root,
stylesheets_changed,
@ -2209,12 +2203,6 @@ impl Window {
self.emit_timeline_marker(marker.end());
}
// Either this reflow caused new contents to be displayed or on the next
// full layout attempt a reflow should be forced in order to update the
// visual contents of the page. A case where full display might be delayed
// is when reflowing just for the purpose of doing a layout query.
document.set_needs_paint(!for_display);
for image in results.pending_images {
let id = image.id;
let node = unsafe { from_untrusted_node_address(image.node) };
@ -2295,31 +2283,8 @@ impl Window {
self.Document().ensure_safe_to_run_script_or_layout();
let mut issued_reflow = false;
let condition = self.Document().needs_reflow();
let updating_the_rendering = reflow_goal == ReflowGoal::UpdateTheRendering;
let for_display = reflow_goal.needs_display();
if !updating_the_rendering || condition.is_some() {
debug!("Reflowing document ({:?})", self.pipeline_id());
issued_reflow = self.force_reflow(reflow_goal, condition);
// We shouldn't need a reflow immediately after a completed reflow, unless the reflow didn't
// display anything and it wasn't for display. Queries can cause this to happen.
if issued_reflow {
let condition = self.Document().needs_reflow();
let display_is_pending = condition == Some(ReflowTriggerCondition::PaintPostponed);
assert!(
condition.is_none() || (display_is_pending && !for_display),
"Needed reflow after reflow: {:?}",
condition
);
}
} else {
debug!(
"Document ({:?}) doesn't need reflow - skipping it (goal {reflow_goal:?})",
self.pipeline_id()
);
}
let issued_reflow = self.force_reflow(reflow_goal);
let document = self.Document();
let font_face_set = document.Fonts(can_gc);
@ -2420,7 +2385,6 @@ impl Window {
self.layout_blocker
.set(LayoutBlocker::FiredLoadEventOrParsingTimerExpired);
self.Document().set_needs_paint(true);
// We do this immediately instead of scheduling a future task, because this can
// happen if parsing is taking a very long time, which means that the
@ -2777,7 +2741,8 @@ impl Window {
return;
}
self.theme.set(new_theme);
self.Document().set_needs_paint(true);
self.Document()
.add_restyle_reason(RestyleReason::ThemeChanged);
}
pub(crate) fn get_url(&self) -> ServoUrl {
@ -2811,7 +2776,14 @@ impl Window {
// The document needs to be repainted, because the initial containing block
// is now a different size.
self.Document().set_needs_paint(true);
self.Document()
.add_restyle_reason(RestyleReason::ViewportSizeChanged);
// If viewport units were used, all nodes need to be restyled, because
// we currently do not track which ones rely on viewport units.
if self.layout().device().used_viewport_units() {
self.Document().dirty_all_nodes();
}
}
pub(crate) fn suspend(&self, can_gc: CanGc) {
@ -2906,6 +2878,18 @@ impl Window {
);
self.set_viewport_details(new_size);
// The document needs to be repainted, because the initial containing
// block is now a different size. This should be triggered before the
// event is fired below so that any script queries trigger a restyle.
self.Document()
.add_restyle_reason(RestyleReason::ViewportSizeChanged);
// If viewport units were used, all nodes need to be restyled, because
// we currently do not track which ones rely on viewport units.
if self.layout().device().used_viewport_units() {
self.Document().dirty_all_nodes();
}
// http://dev.w3.org/csswg/cssom-view/#resizing-viewports
if size_type == WindowSizeType::Resize {
let uievent = UIEvent::new(
@ -2920,10 +2904,6 @@ impl Window {
uievent.upcast::<Event>().fire(self.upcast(), can_gc);
}
// The document needs to be repainted, because the initial containing block
// is now a different size.
self.Document().set_needs_paint(true);
true
}