QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • BlockClusterBuild Private Blockchains
  • Home
  • QIdea
  • QTrack
Home Home Pre-rendering In Browser using rel=”prerender”

Pre-rendering In Browser using rel=”prerender”

pre-feteching

In this article I will show you how to download and render a webpage before its actually requested. Before you continue with this article please read my article on preloading resources. In that article I explained critical time, caching requirement and many other basic concepts which will be used in this article.


What is pre-rendering?

Preloading resources using the rel=”prefetch” is just to store a file in browser cache for faster retrieval later on. Resources like HTML files, images etc needs to be downloaded and rendered before displayed to the user. Preloading only downloads and stores in cache whereas pre-rendering downloads and renders it, actually in opens the resource in a new invisible tab.

Pre-rendering is an advanced feature, and misusing it can lead to a bad experience for your users. It can increase bandwidth usage, high memory consumption etc.

If a resource cannot be pre-rendered by the browser then its downloaded and stored in cache which is pre-loading.

Pre-rendering can be done using rel=”prerender” attribute on the link tag.

<link rel="prerender" href="/page/to/prerender"/>

Aug 7, 2014Narayan Prusty
Python like Multiline Strings In JavaScriptPrefetching DNS using rel="dns-prefetch"

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

Image4 years ago Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • Preloading Resources In Browser using rel=”prefetch”
  • Creating Offline Applications using HTML5 Tutorial
  • What is Server Push and Promises in HTTP/2?
  • Measure Web Page Performance Using JavaScript
  • Prefetching DNS using rel=”dns-prefetch”
Our Sponsor
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license