pjax实现网站无刷新加载

前言#

一般情况下，当我们点击一个超链接，浏览器就会发送一次请求，然后将请求到的页面渲染出来，页面也就会刷新一次。

为了避免网页加载过慢白屏导致体验不好，我们可以使用pjax实现网站无刷新加载

当然，pjax 对vue等单页面无用，常用于多页面

原理#

pjax=ajax+pushState,在用户点击超链接时，pjax会拦截请求，并发送ajax请求并使用pushState，使用ajax局部刷新页面，使用pushState修改url而不跳转页面，从而实现无刷新加载。

安装#

pjax分为两个版本，jquery版和无jquery版 jquery版 无jquery版

npm引入

npm i pjax

cdn引入

<script src="https://cdn.jsdelivr.net/npm/pjax/pjax.js"></script>

使用#

使用pjax，需要相同的dom结构 一般网站可分为header,main,footer,而<head></head>中的script,style和link一般是无需变化的。

也就是说pjax加载时只需要对title和main发生变化即可

const pjax = new Pjax({
    selector:['title','#main']
})

重载JS脚本#

一般地，每个网页有单独的脚本，pjax在加载时不会让网页脚本从上到下再次执行，所以我们需要重载JS函数

document.querySelectorAll("script[data-pjax],.js-pjax script").forEach((item: any) => {
        const newScript = document.createElement("script");
        const content = item.text || item.textContent || item.innerHTML || "";
        Array.from(item.attributes).forEach((attr: any) =>
            newScript.setAttribute(attr.name, attr.value)
        );
        newScript.appendChild(document.createTextNode(content));
        item.parentNode.replaceChild(newScript, item);
    });