Trigger prefetching after page is fully loaded
Question
My scenario is:
- user visits domain.com (home page)
- domain.com/products page contains large image library and quite large CSS and JS libraries
- when user visits domain.com and the home page has fully loaded , we start to prefetch resources & if possible at least some % of images from the archive.
Currently on some pages JS "eats" quite a lot of resources therefor triggering prefetch in some cases during page load is not the best answer - as it will cause a small lag when user interacts with JS created events and elements.
My questions are:
- Is it even possible (will it work) to trigger
<link rel="prefetch" href="image.png">or CSS file to be added to<head>so it can prefetch data from another page after current page is fully loaded ? - Should I do it similar like rendering additional stylesheet using JS where I add new tag within
<head>as a stylesheet file so it can then render.. or is there another way?
5 answers
solution1
5 ACCPTED 2018-05-24 08:41:06
You might use Cache Storage to prefetch (precache) assets. I work on an open-source project which uses this approach . Although, to serve precached assets you need a service worker . The logic of finding assets in my project looks like this .
The demo of this project is here . Also, I wrote an article which explains technical details of the project.
Assets get prefetched once the lib is loaded, so I don't wait for the entire page load. Maybe I should use requestIdleCallback to wait until the browser is idle.
Hopefully, it gives you some inspiration.
solution2
1 2018-05-29 00:11:32
Just to note that you could add aditional stylesheet after the page load completly or whenever you want with somethig like this:
document.addEventListener("DOMContentLoaded", function(event) {
var script = document.createElement("link");
script.rel = "stylesheet";
script.href= "stylesOfAnotherPage2.css";
document.getElementsByTagName("body")[0].appendChild(script);//or head
});
When you load page1, stylesOfAnotherPage2.css is cached, so when page2 is called, stylesOfAnotherPage2.css is already cached if page2 call the same file.
solution3
1 2018-05-29 18:20:28
You might use HTTP Caching and Link prefetching to use your browser idle time to download or prefetch documents that the user might visit in the near future.
Prefetching hints
The browser observes all of these hints and queues up each unique request to be prefetched when the browser is idle. There can be multiple hints per page, as it might make sense to prefetch multiple documents. For example, the next document might contain several large images.
<link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css">
<link rel="next" href="2.html">
Also, you can read this thread: Preload, Prefetch And Priorities in Chrome There you can read the different states and priorities about the execution, load and preload times, some tips to improve them.
solution4
0 2018-05-22 19:07:04
preload of CSS and JS using https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content might be a good fit and has good support in most modern browsers: https://caniuse.com/#search=preload
There are probably better solutions, such as the one suggested by @soulshined, but another crude way to do this is the other page contains etags or cache control headers would be to use AJAX to send requests to the resources you expect to load. This would cause the browser to request those resources and prefill the user agent cache so that when the user requests that resource on the other page there is a higher change the cache would contain the resources and it'd load faster than if it had to fetch everything for the first time.
solution5
0 2018-05-29 16:56:28
To prefetch assets there are some prefetching methods such as DNS-prefetch, pre-connect, pre-render & prefetch. As per the requirement, you may use them appropriately. Each method has its own purpose this would be useful to know each one specifically.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.