«

博客决定取消使用pjax技术加载页面,简单分析

admin 发布于 2015-8-26 12:56   11394 次阅读   PHP   


pjax是对ajax + pushState的封装,让你可以很方便的使用pushState技术。

同时支持了缓存和本地存储,下次访问的时候直接读取本地数据,无需在次访问。

并且展现方式支持动画技术,可以使用系统自带的动画方式,也可以自定义动画展现方式。

这是它的开源主页 : https://github.com/welefen/pjax

我的博客也在前不久使用这项技术,具体的教程请前往Finlly博客查看:关于PJAX局部刷新 ;


但是使用之后,发现有如下几个问题:

1:我得服务器资源占用比不使用pjax之前多了30%,大神勿笑,也可能是我小菜不会优化;

2:加载之后会发现,会出现不能够加载其他的js,比如不能够加载第三方分享的js文件,或者是代码高亮插件的js,导致代码的高亮,复制,又或者是图片highslide插件等功能失效;

下面几点来至于互联网:

3:这个技术使用的场景很受限制,据我所知真正用这个技术的网站很少

因为html5的新api:pushState和replaceState的出现,让url脱离了#号。更重要的是支持了浏览器前进后退的事件触发onpopstate

4:不利于SEO,当然,你可以针对爬虫做处理,但那是自找麻烦

5:不同页面引用的资源很可能不同,切换页面需要动态加载新的js和css,容易和旧的CSS和JS产生冲突

6:不刷新页面,意味着页面占用的资源得不到释放,如果有内存泄露问题,页面会越来越卡

不知道各位有什么好的优化方案没,或者是在使用pjax过程中有哪些问题。

题外话:还是HTML5方便,赶紧学习html5,因为html5的新api:pushState和replaceState的出现,支持浏览器前进后退的事件触发onpopstate,pushState的功能具体来说就是修改url而页面无跳转,并且该url会被存放在历史记录中

当然为了满足某些需要你不需要存放在历史记录中就需要使用replaceState

而浏览器上前进和后退都会触发onpopstate能获取你设置的State对象


拿welefen的pjax说下原理:

1.在用户超链请求的时候拦截超链

2.拦截后同时发出两种行为 ajax请求 以及 pushState


实际上他的设计是线性的,在超链被拦截后才会触发。

我更倾向于观察者模式,state被改变的时候触发。

如果你真的想用在项目中我推荐你直接使用 balupton/history.js · GitHub

在不支持html5的浏览器上采用了hash作为代替并且监听了statechange事件


编程 ajax pjax pushState html5

版权所有:Mrxn's Blog
文章标题:博客决定取消使用pjax技术加载页面,简单分析
文章链接:https://mrxn.net/php/365.html
本站文章均为原创,未经授权请勿用于任何商业用途

扫描二维码,在手机上阅读

推荐阅读:

收到12条评论
avatar
老虎不吃人 2019-07-16 10:46
额,2015年,,,我火星了
回复
avatar
老虎不吃人 2019-07-16 10:45
大佬,PJAX加载不出JS问题重载函数应该可以解决
回复
commentator
Mrxn 2019-07-18 11:10
@老虎不吃人:嗯嗯 多谢建议 现在没时间折腾
回复
avatar
Eric 2016-08-29 16:48
确实,这东西限制太多,加载的页面没法继续运行js了
回复
avatar
红颜玖月 2015-09-11 18:15
貌似你说的挺在理的,你不说我还没发现呢
回复
commentator
Mrxn 2015-09-14 17:08
@红颜玖月:额
回复
avatar
alen 2015-09-10 18:41
路刷存在感
回复
commentator
Mrxn 2015-09-10 21:49
@alen:额 欢迎 已回访
回复
avatar
Joy 2015-09-02 18:46
来回访一下,挺不错的。羡慕你们这些博客做得好的
回复
commentator
admin 2015-09-05 16:38
@Joy:额 其实 都是一个自己的爱好而已
回复
avatar
鬼鬼 2015-09-01 20:42
不懂pjax我觉得就不要发表意见了吧,免得影响新人。呵呵
回复
commentator
Mrxn 2015-09-05 15:49
@鬼鬼:额 是 大神
回复