Use Mutation observer for BigPipe replacements

Created on 6 February 2021, over 3 years ago
Updated 4 June 2023, about 1 year ago

Motivation

This issue is to investigate an alternative approach for finding big pipe replacements using a MutationObserver.

To improve the perceived loading speed of pages, the big pipe module on the server-side replaces the dynamic parts of html pages with placeholders while printing and flushing the output of their replacements just after the static part. During page load on the client-side those placeholders are being replaced with their replacements.

For the placholders <span data-big-pipe-placeholder-id="…"> elements are being used, for their replacements a <script type="application/vnd.drupal-ajax" data-big-pipe-replacement-for-placeholder-with-id> element per placeholder.

The replacement of the placeholders is done using Javascript. To find the replacements during page load a setTimeout() callback is being used with a short interval of 50ms (20 times per second). The callback starts looking for replacement script elements once a special <script type="application/vnd.drupal-ajax" data-big-pipe-event="stop"> element is printed and found. The interval is stopped once a <script type="application/vnd.drupal-ajax" data-big-pipe-event="stop"> element is printed and found or on the page load event.

This interval is not very efficient. For example the callback needs to account for newly found replacement elements not having fully arrived yet; parsing their content would fail.

Now we no longer have to support IE10 we can start using a MutationObserver to find the big pipe replacements.

As we no longer have to account for partial big pipe replacement elements we can also immediately remove these elements on processing. This allows us to remove the dependency upon jquery.once and jquery all together.

As a second step we can also remove big pipe's start and stop signals as they are no longer needed to start and stop the interval to look for replacement elements.

Remaining tasks

Test, refactor, decide.

API changes

Big pipe's replacement detection process will work totally different, but this can be considered internal.

πŸ“Œ Task
Status

Fixed

Version

10.1 ✨

Component
BigPipeΒ  β†’

Last updated about 13 hours ago

Created by

πŸ‡³πŸ‡±Netherlands casey

Live updates comments and jobs are added and updated live.
  • JavaScript

    Affects the content, performance, or handling of Javascript.

  • Performance

    It affects performance. It is often combined with the Needs profiling tag.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Through the article I can't understand what is being mentioned, I'm only interested in which websites are mobile devices now aggregated on.

  • Hmm tests are going to fail.. they assert their presence and content.

    Not sure what to do. Remove/rewrite those tests, or revert to jquery.once?

  • I think we might need to keep the timing concept and only use the mutation observer to fill in a queue of things that needs to be processed. This would remove some uncertainties (no need for the try/catch around json.parse) while keeping the performance profile.
    Or maybe do a debounce type of thing and start processing elements when things are idle for a few hundred miliseconds.

Production build 0.69.0 2024