Browser cache mechanism in-depth understanding and practice (2): The pre-loaded

We mentioned above the browser for the first time get the resources, it will be cached for subsequent reuse and improve efficiency. Do you think this all? not at all. Conscious of their program ape thinking: In addition to the browser to automatically cache resources, we can not load those resources might be used in the subsequent advance it? This can be taken directly from the memory when we later use. So preload was born. We will be following image resource as an example, step by step how to expand pre-loaded. Later will automatically cache strategy focuses on pre-loaded with the browser differences. Ado direct begin!

First, we named a few pictures decentralization law in the engineering path, respectively, G + index name, so we can have them automatically cycle load

Then we want a new Image object and image resources by assigning an address to the src attribute of an object to be saved to the cache image resources. By introducing an Image object cache:

var imageArr = [];
 var index = 1 ;
 var img = new new Image ();
 // every time the image is loaded, will trigger loadHandler 
img.addEventListener ( "the Load" , loadHandler);
 // order not to affect the original main page loading operation, we passed after the main page rendering is complete initialization trigger onload event, in case the user does not perceive, secretly resources to acquire 
the window.onload = function () {
   // by assigning pictures to the src address to request resources, and this load event code triggers 
  img.src = "./image/" + "G" + index + ".jpg" 
} 
function loadHandler (E) { 
   // before loading the next picture, the first picture save into array 
  // the addEventListener img object to call, so this here is img 
  // function which object is invoked, this is the object 
  imageArr.push (the this );
   // get the resource objects should be removed off load event listener, otherwise would have been occupied by memory     
  the this .removeEventListener ( "load" , loadHandler)
   // The following picture at the beginning of the load 
  index ++ ;
   IF (index> . 4 ) { 
    the console.log (imageArr); 
    return ;   // recursive end here 
  }
   var imgNext = new new Image (); 
  imgNext.addEventListener ( "load" , loadHandler);
   // for each will be loaded once again loadHandler recursive method 
  imgNext = .src "./image/" + "G" + index + ".jpg" ;   
}

 running result:

But this has a downside primary writing, I take each set of pictures is not the same resources would have to modify the code, so we can improve it: the business logic pulled out, leaving only the public part of playing a tool method. Each time pre-loaded, just call a public method, passing the business logic we prepared the resource path, and the specific need to do things to the rest of the utility methods to do it!

var imageArr = []; // first of all to be loaded into the image path in imageArr 
for ( var I =. 1; I <=. 4; I ++ ) { 
  imageArr.push ( "./src/image/" + "G "+ index +" .jpg " ) 
} 
myFunction (imgList) { 
　　the console.log (imgList); 
} 
// secretly resources preload 
the window.onload = function () { 
    the getImage (imageArr, myFunction) // call the tool-step method 
} 


// tool follows 
function the getImage (imageArr, callBackFunc) {
   var image = new new image (); 
  img.srcList = imageArr; // placed path photos
  = callBackFunc img.callback; // placement service processing method 
  img.imgList = []; // placed photos resources 
  img.index = 0; // record the first few images 
  img.addEventListener ( "Load", loadHandler); / / Add load event 
  img.src = img.srcList [img.index]   // trigger event loading 
}
 function loadHandler (E) {
   // first cloneNode by this function, that is, the image into an array of 
  this .imgList .push ( the this .cloneNode ( false ));
   // start loading the next image in 
  the this .index ++ ;
   IF ( the this .index> = the this .srcList.length) {
    the this .removeEventListener ( "the Load", loadHandler) // remove the event listener 
    the this .callBackFunc ( the this .imgList); // get all the resources, interrupt recursive processing business 
    return ; 
  } 
  the this .src = the this .srcList [img. index]; // this will trigger a new round of loadHandler 
}

from disk cache和from memory cache

We know that the pre-load is to save resources in memory, but this automatic browser's cache and what difference does it. Let's take a look F5 to refresh the page, how the same cache resource is acquired

 

We see this loading.gif resources or fetched from memory after F5 to refresh. This is because the refresh and the original thread will not end the current page, so it is access to resources from the thread. But when we re-open a new page of it?

We can see that the resource becomes available from the disk, where it confirms the browser from the side into the cache memory policy and in fact we manually pre-loaded into memory is the same, are in the process of the current page (of course there are on browser in a separate process ServiceWorker). And while getting content from the cache memory cache thread of the current page, the browser will ignore, for example  max-age=0,  no-cache (not including the no-store) and other head configuration, direct access to resources.

关于from memory cache、from disk cache、预加载，这三种方式是如何受上文提到的响应头 Cache-control 的影响，大家可以看这位百度前端大佬的文章，文末有详细的比较过程，这里就不赘述了，请戳https://github.com/easonyq/easonyq.github.io/blob/master/%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/others/cache.md