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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171217B0HB7V00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励