PJAX技术：让你的网站速度更快！

21CTO社区导读：本文介绍 Ajax 的增强版 Pjax。主要介绍了 HTML5 history API中有几个新特性，分别是history.pushState和history.replaceState，我们把pushState+AJAX进行封装，合起来称为PJAX。希望对大家有价值。

我想大家都不太喜欢一些打开缓慢的网站，比如显示一阵加载状态，然后才能开始使用或浏览。

互联网架构在减少加载时间方面还有很长的路要走，网站速度是非常重要的指标，缓慢会让用户不耐烦，企业错失订单。

有数据表明，平均来说，用户不会等待超过4秒的网页加载时间。在这样的时间要求下，即使加载时间只增加几毫秒也会对网站造成较大的影响。在移动客户端，改善网络连接显然是更快加载网站的一种方式，开发者可以用多种技术来开发网站，使用各种让网站有更快的加载速度。

我们今天就来谈一个新技术——Pjax。

Pjax 由 pushState 和 Ajax 两个术语组成。在深入研究pjax之前，我们来简要了解一下 Ajax 与 pushState。

Ajax 代表异步的JavaScript 和 XML。简而言之，就是使用浏览器提供的 XMLHttpRequest 对象与服务器端进行通信。它可以发送和接收各种格式的信息，包括 JSON，XML，HTML 和文本文件。 Ajax最吸引人的特点就是它的“异步”特性，这意味着它可以与服务器通信、交换数据，更新内容不必刷新整个页面。

pushState 是 HTML5中引入的History API的一种方法。 HTML5 History API 使开发人员能够修改网站URL而无需整页刷新。这对于使用 JavaScript 加载页面很有用，内容显示不同且还能够保证使用新的 URL。

举一个例子。有一位用户从网站主页浏览到帮助页面，我们使用Ajax加载帮助页面的内容。然后该用户前往产品页面，我们再次加载并用Ajax替换页面中的内容。此时用户如果想分享这个网址，分享会是帮助页面的URL。我们可以通过使用 HTML5 History API，做到在用户改变导航的时候就能够更改页面URL，保证他们看到（共享后或保存）的URL是完全正确的。

HTML5的History API提供的 pushState方法可以将浏览器的当前URL更改为你指定的新地址，而且还可以控制浏览器历史记录，即使用户按了浏览器的后退按钮也不会产生问题。

比如，假设我们在https://www.foobar.com。现在我们点击一个按钮链接，重定向到 https://www.foobar.com/foo.html。

在后面，我们每再次点击一个按钮，该事件都会触发 pushState 方法，将URL更改为 https://www.foobar.com/bar.html，但不会更新页面，因此除浏览器URL外没有任何更改。现在如果我们点击后退按钮，它将带我们到https://www.foobar.com/foo.html。这种情况意味着，pushState 不仅改变页面的 URL，而且在幕后还操作浏览历史，以便将后面改变URL再使用时将元素添加到堆栈。因此，后退按钮将带我们到以前的网址，而不是之前的网页。

Pjax就是这两个概念的结合。

Pjax的工作原理是通过Ajax从服务器获取HTML，并用加载的HTML替换页面上的容器元素的内容，再然后使用pushState更新浏览器中的当前URL。

它会加快页面加载速度，主要有两个原因：

没有页面资源（JavaScrpt，CSS）被重新运行或重新加载）。

如果服务器配置为Pjax，则它只需渲染部分页面内容，从而避免潜在的昂贵的完整布局渲染。

好的，现在我们准备好一只深入pjax的例程。

首先，先让我们快速安装它。建议你使用这里提供的JavaScript独立模块：https://github.com/MoOx/pjax。它不需要任何类型的依赖，甚至不需要jQuery库。

一个典型的例子

我们可以使用 npm 来安装 pjax:

$npm install pjax

接下来通过浏览器安装：

$bower install pjax

这需要在html文件包含pjax的相关文件来访问pjax功能。

在本例中，我用的是npm安装，并使用npm来启动服务器。不管你用什么来启动服务器，或者你使用MVC框架，它都适合其中一个方法。

安装完成后，我们就可以转到代码里来了。为了演示pjax的工作，我们将制作两个链接，一个用pjax来更改div的内容，并更改URL地址。另个页面不使用pjax，整体刷新页面。这两个链接将重新指向同一个页面，以便我们能够清晰的看到差异。

好，现在我们来一起我们的主页 main.html，它看起来像这个样子：

接下来是公用的页面文件 common.html，它是这个样子的：

我的 JavaScript 文件看起来是这样子的：

在这段源代码里，我们初始化了pjax类，并传递了一些值。Elements 是用pjax处理的逗号分隔的元素。在本例中，a.js-Pjax是js-Pjax的锚点元素。

Selectors是将被pjax 替换的容器。请注意，用pjax的两个HTML页面必须在同一位置并具有相同的布局，相同数量的DOM元素。如果这些内容有任何修改，Pjax将进入fall-back回退模式（不做任何操作），并且像通常情况一样加载页面。因此，在selector选择器中，我们会使用元素的id或者类的内容替换为其它页面的DOM元素，这些在element中被定义的元素会在点击时被调用。

我在JavaScript中添加了一个alext对话框，因为在一个没有多少CSS和JS的站点使用加载时间来分辨将非常困难，这样会更方便我们清楚的区分这两个链接。

现在为止，我们已经构建了一个pjax驱动的站点。现在我们来启动我们的服务器。Npm用户可以使用如下命令启动：

npm run

现在，当我们打开这个站点，可以看到main.html构建的首页。当你点击“First Link”，你可以看到链接下的div和div内容已经发生改变了。它看起来和你通过网站导航链接，没有什么本质的改变，除了我们在构建Pjax时定义的东西。现在你再次返回点击“Second Link”时，可以看JS弹出的对话框窗口。虽然我们在这两个页面上都用了相同的JS，但从“First Link”到“Second Link”时并未显示JS的对话框。这是因为Pjax只改变了构建时定义的容器URL与内容，甚至不重新执行JS或者重新应用任何CSS样式。从而在网站加载内容时可以节省大量时间。

您还可以看下面的视频，它记录了我们刚刚构建的Pjax网站的行为：

本文中代码的GitHub仓库：

https://github.com/akshanshjain95/pjax-tutorial

Pjax的GitHub仓库：

https://github.com/MoOx/pjax

参考文档：

https://github.com/MoOx/pjax

https://www.npmjs.com/package/pjax

编译：前端老白

作者：Akshansh Jain

原文：https://dzone.com/articles/pjax-loading-your-website-faster