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, 当发现浏览器不支持该功能的时候, 会回到原始的页面跳转上面去。

  • 复杂的服务器端支持

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

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


本文标签:

版权声明:若无特殊注明,本文皆为《Leek》原创,转载请保留文章出处。

本文链接:PJAX是什么?简单介绍一下 - https://pjax.cc/36.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

未显示?请点击刷新

允许邮件通知

评论

1条评论
  1. avatar

    蓝果庄园 Lv.1 Chrome 45.0.2454.101 Chrome 45.0.2454.101 Windows 7 x64 Edition Windows 7 x64 Edition 回复

    学到了,讲的很不错

    上海市 电信