PJAX 还是比较好用 - Finer04's Blog

8月初的时候刚开始恢复博客的时候，感觉博客点击文章还是略慢略慢，然后上网看看有没有什么解决方案，毕竟我已经把 wordpress 的加速经验放到 typecho 用了，但那也只是性能优化而已，用户体验才是最重要的（呸！你的博客还有人看吗_(:зゝ∠)_）（想要速度吗？赶紧买个香港主机啊，贵啊；备案啊，嫌麻烦啊...）

然后就见到 PJAX 和 instantclick 这两个预加载的 JavaScript，我没怎么研究就看了大概的使用方法，然后参考了友人C的typecho博客实现pjax 的教程，博客也几乎实现了全站 pjax 效果，但是....好像 container 和 fragment 的元素我改成了 body，这tm还不如去使用instantclick啊..

引用下知乎大佬对pjax如何工作回答：

pjax是对ajax + pushState的封装，让你可以很方便的使用pushState技术。
同时支持了缓存和本地存储，下次访问的时候直接读取本地数据，无需在次访问。
并且展现方式支持动画技术，可以使用系统自带的动画方式，也可以自定义动画展现方式。

为了以后建站需要，我还是在这里写笔记吧

代码

放在footer.php

首先还是先导入 jquery 和 pjax 的 js。

<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>

然后将 pjax 初始化，就能实现全站 PJAX 了（当然这是为自用的，也很简单）

&lt;script&gt;
    $(document).pjax('a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[target="_blank"], a[no-pjax])', {
        container: '#page',
        fragment: '#page',
        timeout: 8000
    }).on('pjax:send',
    function() {
        /*这里是开始加载前的事件*/
    }).on('pjax:complete',
    function() {
       /*这里是加载complete的事件*/
    });
    </script>

其实也可以用一条代码初步实现

$(document).pjax(selector, [container], options)

selector 给哪些selector绑定pjax事件，一般的为："a", 如果要去掉一些外连的URL，
[container] 内容变换容器，是指哪个容器里的内容发生的变换，如： '#pjax-content'。就是页面中只刷新的这个部分。
options 官方文档提供了更多的选项，以便更好地自定义选项。具体查考官方文档。以下列出我使用的一些选项。
container 替换的容器的css选择器。填你的替换容器ID即可。
timeout 超时就会被迫页面就会完全刷新，单位毫秒。
fragment 这个作为整个pjax框架，必须写上。
（出自https://www.ihewro.com/archives/354/）

关于事件解释，此处不多说，更多直接去 Github的pjax 看吧

一些碰壁

为什么最近才回来开始使用 pjax 呢，毕竟我记得我当初因为动画效果放弃了使用了。而且之前为了实现 header 和 post 可以刷新，绞尽脑汁设置，却只能header有刷新，文章页出现空白的问题。我还想绑定两个容器，然而做不到

所以就绑定了 body 作容器（好好的局部刷新却变成全局刷新了2333）...然后上网看了下别的博客，绑定body的话还不如用 instantclick，毕竟部署简单，而且也是 body 全局刷新，而且原理是在用户点击链接的时候的一些小延迟来预加载（200-300ms中加载完），好是好，但是我还是喜欢现在这个loading画面啊，用 animate.css 感觉有点有点那啥

之所以之前放弃用 pjax，主要是没发现我tm之前改header文章带标题的效果的时候，忘记再加个</div>（因为要用一个元素罩住要刷新的页面），所以导致进入文章页的时候，只显示了header，却没有 post文章页的尴尬。

效果

TIM截图20171002162245.png

审查元素，点击 Network，随便点个链接，如果整个表没被刷新的话，应该是行了。

可惜评论没有兼容pjax，之前弄了ajax评论然而出现问题了，所以还是保持原样算了..

代码

一些碰壁

效果

发表评论