Thanks to Pjax, you can reduce the page transition time of your website, save memory and CPU resource and implement unique page transition. Here, we are going to explain what is Pjax and its pros and cons.
Pjax is super cool technique, composed of History API(Pushstate/Popstate) and Ajax.
First of all, please see the demo below.
When you click “Click Me” button, the background color of the page change between red and orange. It seems like there are no page reload between them because of no page refreshment. But, the URLs(in iframe) changes between them. And it’s one of the demos you can make by Pjax. Now, let’s see how it works.
The Procedure of Pjax Transition
Pjax procedure is basically following:
- Get anchored page content when a link clicked.
- Push browser state to browser history via History API and change URL at the same time.
- Manipulate DOM and change page layout or some elements of the page.
Here is the basic sequence of Pjax process. What’s the difference between Pjax and Ajax is the manipulation of browser history. Thanks to it, visitors can go back to previous status by clicking browser back button. This is not achievable by only Ajax.
Tips : Ajax
Tips : History API
The Pros of Using Pjax
1. Much Faster Page Transition
The page transition using Pjax is usually faster than normal page transition because Pjax is generally used for partial page refreshment. It means it doesn’t reload
<head> tag on each page transition. Moreover, one of the major Pjax library called “Barba.js” provides Prefetch functionality which pre-fetch anchored content where mouse hovering. Since there is a 100-300ms delay during the user hover and the click, we can use this time to start prefetching the page. On the contrary, It generates more requests to your server. So please consider the traffic volume when you activate Prefetch function.
2. Fluid and smooth Transition Animation
Fluid and smooth transition between your website’s pages could be implemented by Pjax. It’s good news for developers to make unique website.
See how to develop smooth transition by Barba.js
3. Reduce Server Load
The Cons of using Pjax
2. Putting Code for Organizing Tags in <head> Tag
There are some tags you should replace in
<head> tag such as
<og:*>. Normally you don’t have to care about the refreshment of these elements. But you need to look after them to replace theme for each page if you use Pjax.
3. Designating Non-Pjax Transition Links
In the middle of developing your pjax website, you must find there are some links where Pjax cannot be used. For instance, links to media file like PDF and images should not be Pjax links. It’s not tough to deal with it when your website is small but it becomes much harder on huge website.
- Fast page transition
- Smooth and fruid page transition(animation)
- Reduce server load
- Putting code for organizing tags in <head> tag
- Designating non-Pjax transition links
Sure that there are some cons you have to be concerned about but Pjax is quite useful technique. So I recommend you to use it if you have chance. But keep it in your mind. Please carefully consider website architecture.
The next article is basic Pjax coding.