What’s Pjax and why should we use it.

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.

What’s Pjax?

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:

  1. Get anchored page content when a link clicked.
  2. Push browser state to browser history via History API and change URL at the same time.
  3. 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
AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and Java Script. Ajax uses XHTML for content, CSS for presentation, along with Document Object Model and JavaScript for dynamic content display.

www.tutorialspoint.com

Tips : History API
History API, introduced from HTML5, gives developers the ability to modify a website’s URL without a full page refresh. This is particularly useful for loading portions of a page with JavaScript, such that the content is significantly different and warrants a new URL.

developer.mozilla.org

 

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

How to Add Cool Page Transition Animation by Pjax(Barba.js)[Demo and Code attached]

3. Reduce Server Load

Most of websites there are some common elements across the entire website like Header, Sidebar and Footer. These areas normally don’t need to be refreshed on every page, if the elements are the same across the website. Pjax can be redundant to reload them and just reload necessary parts of your page. It eventually reduce server cost, (if your website is well designed to reduce cost).

The Cons of using Pjax

1. More Complicated Javascript Coding Required

When you try to make a website using Pjax, you must find javascript coding becomes more complicated than you thought. It’s because there are no page refreshment between page transition. Originally, website is designed to be refreshed/initialized between pages and it makes javascript coding much easier because developers don’t have to consider pervious page status. On the other hand, Pjax just injects the new content in the current page, so there are still JS Objects of previous page after page transition. It’s really unpleasant for developers because they have to take them in their account and sometimes destory and initialize instances by adding code manually.  Furthermore, they have to care about memory leak caused by forgetting destroying previous page obejcts.

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.

Summary

Pros

  • Fast page transition
  • Smooth and fruid page transition(animation)
  • Reduce server load

Cons

  • Complication of javascript coding
  • 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.

Increase page transition speed dramatically by Barba.js and Prefetch! [Code and Demo attached]

Latest Posts