Without layers, animating any element (e.g. Layers have a significant impact on rendering performance. 3D transforms), or interaction with other layer-generating elements. ), presence of certain CSS properties (e.g. Among the reasons for this are element type (e.g. All pages have a root layer corresponding to the document itself, but any DOM element can cause a new layer to be created. It is these layers which are then composited in a particular order to produce the resulting appearance of the web page.
#Web page layers series#
After the position and size of each element has been calculated, they are drawn onto a series of surfaces called layers. While web developers are intimately familiar with the DOM tree as the structure of elements on a page, the way in which these elements end up rendered on screen tends to only be learned as a need arises.ĭOM elements are not just painted to the screen one by one. At first glance, a layer visualization may appear quite similar to a DOM visualization (such as Firefox’s Tilt), yet compositing layers and DOM elements are conceptually different entities. A Whirlwind Introduction to Layersīefore introducing any debugging tool, it’s important to clarify what we’re aiming to debug in the first place. In this post, we’ll look at how the Layers tab can be used to find unexpected memory consumption or excessive repaints on a web page. Building upon the legacy Layers sidebar, this tab introduces a 3D visualization of the inspected page’s compositing layers, to provide developers with a more hands-on (and hopefully fun!) way to understand where layers are being generated and in what order they will render. Recent releases of Safari Technology Preview contain a new experimental feature for Web Inspector: the Layers tab.
0 kommentar(er)
