PJAX是什么？简单介绍一下

2018年2月3日 1条评论

PJAX是什么？简单介绍一下

首先本站全站采用的pjax开发，也有幸注册到了pjax.cc 万幸~~~

什么是pjax?

pjax是对ajax + pushState的封装，让你可以很方便的使用pushState技术。
同时支持了缓存和本地存储，下次访问的时候直接读取本地数据，无需在次访问。
并且展现方式支持动画技术，可以使用系统自带的动画方式，也可以自定义动画展现方式。

现在很多网站( facebook, twitter ，包括本站)都支持这样的一种浏览方式，当你点击一个站内的链接的时候，不是做页面跳转，而是只是站内页面刷新。这样的用户体验，比起整个页面都闪一下来说，好很多。其中有一个很重要的组成部分，这些网站的ajax刷新是支持浏览器历史的，刷新页面的同时，浏览器地址栏位上面的地址也是会更改，用浏览器的回退功能也能够回退到上一个页面。那么如果我们想要实现这样的功能，我们如何做呢？我发现pjax提供了一个脚本支持这样的功能。 pjax项目地址在 https://github.com/defunkt/jquery-pjax 。实际的效果见： http://pjax.heroku.com/ 没有勾选pjax的时候，点击链接是跳转的。勾选了之后，链接都是变成了ajax刷新。

为什么要用pjax? pjax有好几个好处：

用户体验提升。

页面跳转的时候人眼需要对整个页面作重新识别，刷新部分页面的时候，只需要重新识别其中一块区域。自从我在自己的网站 GuruDigger 上面采用了pjax技术后，不由觉得访问其他只有页面跳转的网站难受了许多。同时，由于刷新部分页面的时候提供了一个loading的提示，以及在刷新的时候旧页面还是显示在浏览器中，用户能够容忍更长的页面加载时间。
极大地减少带宽消耗和服务器消耗。

由于只是刷新部分页面，大部分的请求（css/js）都不会重新获取，网站带有用户登录信息的外框部分都不需要重新生成了。虽然我没有具体统计这部分的消耗，我估计至少有40%以上的请求， 30%以上的服务器消耗被节省了。

坏处我觉得也有：

IE6等历史浏览器的支持

虽然我没有实际测试，但是由于pjax利用到了新的标准，旧的浏览器兼容会有问题。不过pjax本身支持fallback，当发现浏览器不支持该功能的时候，会回到原始的页面跳转上面去。
复杂的服务器端支持

服务器端需要根据过来的请求，判断是作全页面渲染还是部分页面渲染，相对来说系统复杂度增大了。不过对于设计良好的服务器代码，支持这样的功能不会有太大的问题。

综合起来，由于用户体验和资源利用率的提升，坏处是可以完全得到弥补的。我强烈推荐大家使用。

赞 (3) 打赏分享