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

2015-8-26 / 12 评论 PHP / Mrxn

本文共计 1132 字,感谢您的耐心浏览与评论.

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

转载:转载请注明原文链接 - 博客决定取消使用pjax技术加载页面,简单分析


12条回应:“博客决定取消使用pjax技术加载页面,简单分析”

  1. 额,2015年,,,我火星了

  2. 大佬,PJAX加载不出JS问题重载函数应该可以解决

  3. Eric

    确实,这东西限制太多,加载的页面没法继续运行js了

  4. 貌似你说的挺在理的,你不说我还没发现呢

  5. Joy

    来回访一下,挺不错的。羡慕你们这些博客做得好的

  6. 不懂pjax我觉得就不要发表意见了吧,免得影响新人。呵呵


发表评论

{view_code_no}