HTML5 DOM Preloading on Cloud Architecture

Abhishek Ghosh

By Abhishek Ghosh September 2, 2014 6:10 am Updated on September 2, 2014

HTML5 DOM Preloading on Cloud Architecture

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) :

<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>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<![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 :

preload(
				"//cdn.domain.tld/gallery/image-001.jpg",

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.

Tagged With preload images in dom

About Abhishek Ghosh

Here’s what we’ve got for you which might like :

Take The Conversation Further ...

Get new posts by email: