pjax虽然不是什么新的技术，然而本人是最近才发现这个比较牛叉的技术。下面是对pjax的介绍：

pjax是在HTML5里面引用的新技术，是对ajax + pushState的封装，是实现无刷新ajax加载并解决浏览器前进和后退问题的一个开源实现。同时支持了缓存和本地存储，下次访问的时候直接读取本地数据，无需在次访问。并且展现方式支持动画技术，可以使用系统自带的动画方式，也可以自定义动画展现方式。

目前ajax为了实现更改页面URL，并支持前进后退的一些问题：

1、可以无刷新改变页面内容，但无法改变页面URL

2、为了更好的可访问性，内容发生改变后，通常改变URL的hash

3、hash的方式不能很好的处理浏览器的前进、后退等问题

4、进而浏览器引入了onhashchange的接口，不支持的浏览器只能定时去判断hash是否改变，这种方式对搜索引擎很不友好

Pjax的操作流程

1、用ajax加载新内容。

2、用history.pushState将原来的页面加入历史记录。

3、加载完成新页面后，用history.replaceState方法修改当前的url。

4、使用document.title修改当前页的标题。

使用pjax的好处

1、用户体验提升

用户在刷新页面的时候浏览器会闪一下，而使用pjax只刷新部分页面，而且在刷新部分页面的时候提供了一个loading的提示，此时旧页面还是显示在浏览器中， 用户能够容忍更长的页面加载时间。

2、减少带宽和服务器消耗

由于只是刷新部分页面， 大部分的请求(css/js)都不会重新获取， 网站带有用户登录信息的外框部分都不需要重新生成了。

转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/1998.html

微信打赏

支付宝打赏

感谢您对作者terry的打赏，我们会更加努力！    如果您想成为作者，请点我