博客决定取消使用pjax技术加载页面,简单分析
时间:2015-8-26 12:56 作者:admin 分类: 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
推荐阅读: