Web Performance is a Journey, Not a Destination

Mehdi Daoudi

Subscribe to Mehdi Daoudi: eMailAlertsEmail Alerts
Get Mehdi Daoudi: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


Related Topics: Marketing and Sales

Blog Feed Post

Shadow DOMs: Encapsulation in Progressive Web Applications

Most modern websites include widgets from different sources for enhanced user engagement. These widgets often include social media buttons so the user can ‘like’ or share content, a video-playing widget that will automatically play content on the sidebar, etc. As the structure of the webpage becomes more complex, it’s necessary for the developers to ensure that the third-party code doesn’t collide with the base page code and create conflicts. Otherwise, the JavaScript of the base page could end up unintentionally modifying the parts of the widget and vice versa.

How do we ensure that encapsulation is achieved? Shadow DOMs to the rescue! Just as Batman is the mysterious ‘shadow’ of Bruce Wayne in protecting Gotham city, shadow DOMs provide a way to isolate portions of the main DOM, thereby achieving protection from styling, access, and modification via common means.

What is shadow DOM?

Shadow DOMs are used while building web widgets to hide the implementation details of the widget from the JavaScript and CSS that are included on the webpage. The encapsulation is achieved by overlaying the normal DOM subtree with a special document fragment that contains another subtree of nodes.

The building blocks of shadow DOM are:

Shadow Host: The element that is responsible for creating a scoped Shadow DOM subtree.

Shadow Root: The root of the DOM subtree containing the shadow DOM nodes. It is a special node, which creates the boundary between the normal DOM nodes and the Shadow DOM nodes. This boundary is what is responsible for encapsulation.

Here is an Illustration of shadow DOM:

http://blog.catchpoint.com/wp-content/uploads/2017/10/shadow1-300x160.png 300w, http://blog.catchpoint.com/wp-content/uploads/2017/10/shadow1-768x411.png 768w" sizes="(max-width: 1023px) 100vw, 1023px" />

The nodes in green represent the main DOM tree, which also contains the shadow host. This shadow host contains references to several other shadow DOM trees. At the root of each shadow DOM subtree is a shadow root. The shadow root is a special document fragment DOM node type which encapsulates its child nodes from the outside world.

However, when the webpage is rendered, the main DOM, as well as the shadow DOM, would be rendered as a single tree. While parsing, whenever the browser encounters the shadow host, the browser disregards the subsequent children nodes of the main DOM and instead the focus is shifted to the node’s shadow DOM subtree.

http://blog.catchpoint.com/wp-content/uploads/2017/10/shadow2-300x263.png 300w" sizes="(max-width: 581px) 100vw, 581px" />

Implementation Details:

Creation of shadow host and root nodes can be done through JavaScript.

Example: If this is the HTML element for which the host should be created –

<div>Hi there! </div>

We just add the following JavaScript code to create the shadow DOM:

http://blog.catchpoint.com/wp-content/uploads/2017/10/shadow3-300x73.png 300w" sizes="(max-width: 371px) 100vw, 371px" />

Now, the <div> tag becomes the hosting element of the shadow root whose content is “Yo!” And the original textual content (“Hi there!”) is “hidden,” as the DOM subtree under the shadow root is encapsulated.

This is how the page is rendered:

http://blog.catchpoint.com/wp-content/uploads/2017/10/shadow4-300x174.png 300w" sizes="(max-width: 351px) 100vw, 351px" />

Shadow DOMs vs. iFrames

Now that we have a basic understanding of what shadow DOMs are, it is necessary for us to know why they are preferred over the traditional iFrames.

iFrames are used to assure separate scope and styling. It is designed to embed a full document within HTML documents. This means accessing values in a DOM element that is within an iFrame, from the parent document, is quite troublesome.

In contrast, shadow DOMs will provide easier encapsulation by creating another clone of the DOM or part of it.

How can we monitor the performance of pages containing iFrames or shadow DOMs?

While it is definitely possible to monitor individual pages containing such elements through Catchpoint’s web test feature, ensuring that users can complete every action (for example: click/type) is also very important and this can be done through Catchpoint’s ability to create multi-step transaction tests.

Transaction scripts in Catchpoint use Selenium commands for execution. Logic can be inserted into these scripts to perform actions like click/type, validate a text pattern, and so on.

Accessing the elements within an iFrame from the same domain can be done via Web APIs along with JavaScript.

http://blog.catchpoint.com/wp-content/uploads/2017/10/shadow5-300x134.png 300w, http://blog.catchpoint.com/wp-content/uploads/2017/10/shadow5-768x344.png 768w, http://blog.catchpoint.com/wp-content/uploads/2017/10/shadow5-1024x459.png 1024w" sizes="(max-width: 1235px) 100vw, 1235px" />

Similarly, accessing shadow DOM elements could be done through JavaScript using the top-down approach to interact with the page.

http://blog.catchpoint.com/wp-content/uploads/2017/10/shadow6-300x143.png 300w" sizes="(max-width: 638px) 100vw, 638px" />

Also, to monitor the performance of specific elements, for example, the load time of a specific button on the page (even if it is included within an iframe/shadow DOM), Catchpoint allows you to create custom metrics using the Insights feature. This feature provides greater visibility into end-to-end application performance, correlate external monitoring data to internal performance indicators, and faster identification of performance problems.

The post Shadow DOMs: Encapsulation in Progressive Web Applications appeared first on Catchpoint's Blog - Web Performance Monitoring.

Read the original blog entry...

More Stories By Mehdi Daoudi

Catchpoint radically transforms the way businesses manage, monitor, and test the performance of online applications. Truly understand and improve user experience with clear visibility into complex, distributed online systems.

Founded in 2008 by four DoubleClick / Google executives with a passion for speed, reliability and overall better online experiences, Catchpoint has now become the most innovative provider of web performance testing and monitoring solutions. We are a team with expertise in designing, building, operating, scaling and monitoring highly transactional Internet services used by thousands of companies and impacting the experience of millions of users. Catchpoint is funded by top-tier venture capital firm, Battery Ventures, which has invested in category leaders such as Akamai, Omniture (Adobe Systems), Optimizely, Tealium, BazaarVoice, Marketo and many more.