简单易懂教你给网站加上pjax，载速瞬间提高

什么是pjax？不是ajax吗？

pjax是jquery的一个插件，它使用ajax和pushState两个技术改善用户的网页浏览体验。简单来说，就是用户点击a标签切换页面的时候，只是局部刷新的技术。

pjax发生过程是怎样的？

首先就是用户通过a标签发送一个ajax请求到服务端，之后服务端收到请求返回需要更新的html前端片段代码，然后客户端接受到数据之后就插入到需要更新的地方，待页面完善后，pushstate就会更新当前页面的url。

pjax好处：

按需加载–>只会加载当前请求所需要的html片段，无需再次解析css和js，再次渲染；

怎么操作？

引入相关js文件:

可放在头部或者尾部，需要注意的是js引入顺序，因为pjax是jquery的插件，所以必须先有jquery再有pjax。还有就是pjax 1.9.6版本应配合jq2..版本使用，否则无法正常工作。如果要使用jq3..版本，应使用pjax2.0.1以上版本。

加上pjax代码：

解释一下哈~

selector 用于绑定pjax事件，一般的为：”a”, 如果要去掉一些外连的URL， 这里的selector可以为: “a[href^=’https://www.jefsky.com‘]”

[container] 就是内容变换容器，就是需要更新html的区域，如： ‘#pjax-content’。那么页面就只刷新的这个部分。

options 官方文档提供了更多的选项，以便更好地自定义选项。具体查考官方文档https://github.com/defunkt/jquery-pjax。下面是一些比较常用的：

container 替换的容器的css选择器。填你的替换容器ID即可。

timeout 超时就会被迫页面就会完全刷新，单位毫秒。

fragment 这个作为整个pjax框架，必须写上。

以本站为例，代码如下：

<script>

// pjax

$(document).pjax('a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[target="_blank"], a[no-pjax])', {

    container: '#kratos-blog-post',

    fragment: '#kratos-blog-post',

    timeout: 8000

})

</script>

当然你也可以加些等候动画等等：

<div style="display:none; z-index:9999; background-color: #ccc; position:fixed; top:0px; width:100%; height:100vh;" class="pjax_loading">

<script>

$(document).on('pjax:send', function() { //pjax链接点击后显示加载动画；
   //$(".pjax_loading").css("display", "block");});
$(document).on('pjax:complete', function() { //pjax链接加载完成后隐藏加载动画；
   //$(".pjax_loading").css("display", "none");

</script>