Question about Automatic Lazy Rendering

[Garnet-Fox]

Good day.

An academic question. Why in the wpr-beacon.js script, on line 325
const can_push_hash = element.parentElement && this._getElementDistance(element.parentElement) < this.config.lrc_threshold && distance >= this.config.lrc_threshold;

The expression
this._getElementDistance(element.parentElement) < this.config.lrc_threshold
has a less than sign?

Why does a child element need to have a parent with a distance close to the viewport in order to be deferred?

[DahmaniAdame]

Why does a child element need to have a parent with a distance close to the viewport in order to be deferred?

parent with a distance close to the viewport, it's actually parent within a distance below the threshold, not the viewport.

That check helps with 2 things:

If the parent beyond the threshold, it means the parent itself is render delayed. Consequently, delaying the rendering of individual child elements is unnecessary since they all inherit the behavior from the parent.

If the parent is below the threshold, we process its child elements to see if any of them is located beyond the threshold. That allows additional coverage.

This reduces the number of items the browser needs to track for content-visibility while ensuring all eligible elements remain covered by the property.