Too Old To Rocket Load, Too Young To Die

Cloudflare Railgun is available when using Cloud Server Webuzo, Cloud Web Apps. Contact us to find out our latest offers!

Too Old To Rocket Load, Too Young To Die

Rocket Loader is in the news again. One of Cloudflare’s earliest web performance products has been re-engineered for contemporary browsers and Web standards.

No longer a beta product, Rocket Loader controls the load and execution of your page JavaScript, ensuring useful and meaningful page content is unblocked and displayed sooner.

For a high-level discussion of Rocket Loader aims, please refer to our sister post, We have lift off – Rocket Loader GA is mobile!

Below, we offer a lower-level outline of how Rocket Loader actually achieves its goals.

Prehistory

Early humans looked upon Netscape 2.0, with its new ability to script HTML using LiveScript, and ed to ensure themselves they weren’t dreaming. They decided to use this technology, soon to be re-christened JavaScript (a story told often and elsewhere), for everything they didn’t know they needed: form input validation, image substitution, frameset manipulation, popup windows, and more. The sole requirement was a few interpreted commands enclosed in a ...body markup... ...more body markup...

becomes:



  
    
    
  
  
    ...body markup... 
    
    ...more body markup... 
    
  


  
Hey!

The buffered, dynamically inserted, markup after script execution will be


and the string that we’ll feed to the DOMParser will be



  
  

The parser will produce the following document structure from the provided markup (note that

is not allowed in and was squeezed out to the ):




  


  

Now we move all nodes that we found in parsed document's to the original document:



  
  
  


  
Hey!

We see that parsed document's contains some nodes, so we prepend them to the original document’s :



  
  
  


  
Hey!

And as a final step, we move all nodes in the , that initially followed the current script, to after the nodes that we’ve just inserted in the :



  
  


  
Hey!
 

Quirks IV: Handling handlers

There is one edge case which drastically changes the behaviour of our script-loading simulation. If we encounter elements with inline event handlers in the HTML markup, we need to execute all scripts that precede such elements since the handlers may rely on them.

We insert the Rocket Loader client side script in special "bailout" mode immediately before such elements. In bailout mode, we activate scripts the same way as in regular mode, except we do it in a blocking manner (remember, we need to prevent element from being parsed while we activate all preceding scripts).

As noted, it’s impossible to dynamically create blocking external scripts using DOM APIs such as document.appendChild. However, we have a solution to overcome this limitation.

Since the page is still loading, we can document.write the outerHTML of activatable script into the document, forcing the browser to mark it as parser-inserted and, thus, blocking. However, the script will be inserted in a DOM position different from its original, intended, position, which may break traversing of surrounding nodes from within the script (e.g. using document.currentScript as a starting point).

There is a trick. We leverage browser behaviour which parses generated content in the same execution tick as the document.write that produced it. We have immediate access to the written element. The execution of the external script is always scheduled for one of the next execution ticks. So, we can just move script to its original position right after we write it and have it in the correct DOM position, awaiting its execution.

"I can resist everything except temptation"[1]

The need to account for every quirk, every variation in browser parsing, is strong, but implementation would eventually only weaken our product. We've dealt with the best part of browser parser behaviours, enough to benefit the majority of our customers.

Too Old To Rocket Load, Too Young To Die

What's Next?

As Rocket Loader matures, and inevitably is affected by changes in Web technologies, it may be expanded and improved. For now, we're monitoring its use, identifying issues, and ensuring that it's worthy of its predecessor, which lasted through so many advances and changes in Web technology.


  1. Oscar Wilde, Lady Windermere's Fan (1892), and apologies to Jethro Tull for the blog post title. ↩︎

Cloudflare Railgun is available when using Cloud Server Webuzo, Cloud Web Apps. Contact us to find out our latest offers!

Comments are closed.

>
WhatsApp WhatsApp us