HTML5 DOM Preloading on Cloud Architecture is a Nice, Modern Method Used Since 2008. Here is about HTML5 Preloading for Document Object Model (DOM). Regular readers of this website can recall about DNS Prefetch. HTML5 Vocabularies are explained here. It is the uncanny browser’s team, the Internet Explorer Team thought about the lookahead downloader, now DOM Preloader first. DOM Preloading is now done for most of the social networks with lot of static materials like images – Google Plus, Pinterest.
HTML5 DOM Preloading on Cloud Architecture – Basic Theory
Document Object Model (DOM) is language independent. We are expelling only for HTML files. HTML parser creates Document Object Model (DOM). In that time, if it faces a synchronous script, it halts the DOM creation process. Instead the script get executed. So if there is/are pending external CSS request to load, there is a chance that the script running would be waiting until these external CSS resources arrive.
Preloader uses results from an early parsing phase to look into the various tags in the HTML document. The parsing phase output is sent to the working HTML parser, side by side the URLs are sent to the fetcher obviously with the initialization to download the resources.
There is no preload HTML markup unlike DNS Prefetch.
---
HTML5 DOM Preloading on Cloud Architecture – Practical Part
On Cloud architecture, we will load the static elements either from another node (server) behind the loadbalancer or from a CDN. In both cases, preloading significantly decreases the page loading time. Pure Javascript preloading for the common objects is the best method (the script is by Jeff, Perishable Press; slightly modified by us) :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <div class="hidden"> <script type="text/javascript"> <!--//--><![CDATA[//><!-- var images = new Array() function preload() { for (i = 0; i < preload.arguments.length; i++) { images[i] = new Image() images[i].src = preload.arguments[i] } } preload( "//cdn.domain.tld/gallery/image-001.jpg", "//domain.tld/gallery/image-002.jpg", "//cdn2.domain.tld/gallery/image-003.jpg" ) //--><!]]> </script> </div> |
Now, look at the preload array of urls :
1 2 | preload( "//cdn.domain.tld/gallery/image-001.jpg", |
We can easily convert this logic to PHP script for WordPress to preload post images when the first CSS is loaded. We have to precisely look at the specific website’s waterfall and implement it.
