记录自己的一次pjax性能优化
什么是pjax?
pjax = ajax + pushState
通过ajax让页面进行局部刷新,然后通过pushstate让url发生改变,再让pushState,让页面产生一个回退的记录,从而让页面的性能进行大幅度的优化
简单demo感受一下
准备两个页面 index.html content.html
- index.html
<!DOCTYPE html>
<html class="font-auto" lang="zh-cmn-hans">
<head>
<meta charset="UTF-8">
<title>残梦博客园</title>
<script src="https://cdn.jsdelivr.net/npm/pjax/pjax.js"></script>
</head>
<body>
<loader>
<div class="plane"></div>
</loader>
<header>
页眉内容...
</header>
<main>
<a href="content.html">中间</a>
</main>
<footer>
页尾内容...
</footer>
</body>
<script>
var pjax = new Pjax({
// 在页面进行 PJAX 时需要被替换的元素或容器,一条一个 CSS 选择器,数组形式
selectors: [
"title",
"meta[name=description]", // 如果是全部 meta 替换的话,只需要写 meta
"main"
],
cacheBust: false
})
</script>
</html>
- content.html
<!DOCTYPE html>
<html class="font-auto" lang="zh-cmn-hans">
<head>
<meta charset="UTF-8">
<title>残梦博客园</title>
<script src="https://cdn.jsdelivr.net/npm/pjax/pjax.js"></script>
</head>
<body>
<loader>
<div class="plane"></div>
</loader>
<header>
页眉内容...
</header>
<main>
<a>中间</a>
</main>
<footer>
页尾内容...
</footer>
</body>
<script>
var pjax = new Pjax({
// 在页面进行 PJAX 时需要被替换的元素或容器,一条一个 CSS 选择器,数组形式
selectors: [
"title",
"main"
],
cacheBust: false
})
</script>
</html>
发现真的是神速啊,用f12看了一下,发现就中间的dom结构发生了改变(这里面也就是main发生了改变),页面的js,css脚本也不用重新下载
深度学习一下
感受到了他的牛逼之后,我们不如让我们的页面也能这样去渲染,岂不是很快
在github上面,我们可以找到pjax,主要分为两个版本
- 不需要jquery插件的pjax (这里面我们使用这种方式)
- 需要jquery的pjax
引入脚本
引入pjax的CDN加速脚本
<script src="https://cdn.jsdelivr.net/npm/pjax/pjax.js"></script>
首先我们要实例化Pjax,并且传入一个对象
第一个参数一般是指我们想让点击哪里去触发pjax(这里面只能指向a或者form)
第二个参数为一个选择器数组,我们传递的是我们需要更新的dom节点(更新的dom越少,性能越好,当然尽量不要写重复的结构)
var pjax = new Pjax({
elements: "a",
selectors: [
"title",
".l_main",
".l_side .toc-wrapper",
"#links",
".comments",
"#pages",
]
})
这样我们就成功的配置完了pjax
但是新的页面可能需要渲染的dom结构很大,可能产生一瞬间的停顿,这样就会让页面像卡主了一样,没有给用户良好的反馈,我们可以自己做一个loading的加载或者使用nprogress,据说github就是使用的nprogress+pjax(发现自己之前真的是故落寡闻了)
优化加载
准备css文件
.loading{display:none}
.loading{height:100%;width:100%;position:fixed;top:0;left:0;z-index:999999;background-color:rgba(250,250,250,.9)}
.loading img{width: 280px;height:210px;position: relative;top: 45%;left: 50%;margin-left:-140px;margin-top: -105px;}
#loader{display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #ff5a5a; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite;}
#loader:before{content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #5af33f; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite;}
#loader:after{content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #6dc9ff; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite;}
@-webkit-keyframes spin{0%{-webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);} 100%{-webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}}
@keyframes spin{0%{-webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);} 100%{-webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}}
准备一个html结构的div,选择器的名字和上面对应上就好,怎么写就看个人爱好了
<div class="loading"><div id="loader"></div></div>
准备一个js
// 开始 PJAX 执行的函数
document.addEventListener('pjax:send', function (){
$(".loading").css("display", "block");
});
// PJAX 完成之后执行的函数
document.addEventListener('pjax:complete', function (){
$(".loading").css("display", "none");
});
这样子我们的页面就可以进行快速跳转了,主需要渲染一部分哦!
效果可以在我的个人博客上面去看
记录自己的一次pjax性能优化的更多相关文章
- MySQL单表百万数据记录分页性能优化
背景: 自己的一个网站,由于单表的数据记录高达了一百万条,造成数据访问很慢,Google分析的后台经常报告超时,尤其是页码大的页面更是慢的不行. 测试环境: 先让我们熟悉下基本的sql语句,来查看下我 ...
- MySQL 单表百万数据记录分页性能优化
文章转载自:http://www.cnblogs.com/lyroge/p/3837886.html 背景: 自己的一个网站,由于单表的数据记录高达了一百万条,造成数据访问很慢,Google分析的后台 ...
- MySQL单表百万数据记录分页性能优化,转载
背景: 自己的一个网站,由于单表的数据记录高达了一百万条,造成数据访问很慢,Google分析的后台经常报告超时,尤其是页码大的页面更是慢的不行. 测试环境: 先让我们熟悉下基本的sql语句,来查看下我 ...
- React性能优化记录(不定期更新)
React性能优化记录(不定期更新) 1. 使用PureComponent代替Component 在新建组件的时候需要继承Component会用到以下代码 import React,{Componen ...
- Spark记录-Spark性能优化解决方案
Spark性能优化的10大问题及其解决方案 问题1:reduce task数目不合适解决方式:需根据实际情况调节默认配置,调整方式是修改参数spark.default.parallelism.通常,r ...
- [性能优化] perf 高级用法:完整记录程序性能指标,并按照时间段对程序进行有针对性的性能分析
如题: 假设你已经熟悉了基本用法,知道perf是干嘛的,以及会用 perf top [性能优化] perf 背景:目标程序在运行的某时间段内会出现性能下降,需要了解这个时间内,程序发生了什么. 方法: ...
- oracle性能优化(项目中的一个sql优化的简单记录)
在项目中,写的sql主要以查询为主,但是数据量一大,就会突出sql性能优化的重要性.其实在数据量2000W以内,可以考虑索引,但超过2000W了,就要考虑分库分表这些了.本文主要记录在实际项目中,一个 ...
- chrome标签记录——关于各类性能优化
概述 详情 概述 平时经常浏览各大博客,总感觉要学习和需要学习的内容太多太多,而自己的个人能力还不足够写出一些好的文章出来,就只能通过学习他人的东西不断提升自己的实力,然后就会记录收藏各种优秀的博客资 ...
- Mysql 性能优化记录
记录工作中有关mysql性能优化的心得和经验 1. where条件中的字段 尽量建立索引 2. where条件中的查询条件等号左边尽量不做处理 如查询日期相关字段,尽量不使用date_fromat 或 ...
随机推荐
- LNMP-Nginx负载均衡
Nginx负载均衡介绍 Nginx提供负载均衡的模块upstream,这个模块是默认的,不需要重新编译模块.通常情况下,负载均衡一般用于后端两台机器同时提供服务供用户访问,但是用户经常访问的其中一台服 ...
- python爬虫--爬虫介绍
一 爬虫 1.什么是互联网? 互联网是由网络设备(网线,路由器,交换机,防火墙等等)和一台台计算机连接而成,像一张网一样 2.互联网建立的目的? 互联网的核心价值在于数据的共享/传递:数据是存放于一台 ...
- ORACLE存储过程详解
1.定义 所谓存储过程(Stored Procedure),就是一组用于完成特定数据库功能的SQL语句集,该SQL语句集经过编译后存储在数据库系统中.在使用时候,用户通过指定已经定义的存储过程名字并给 ...
- pipelinedb学习笔记 - 1. Continuous Views (连续视图)
Continuous Views 一.Continuous Views 英文直译过来叫连续视图, 在pipelindb中是被定义为专门用来展示 Stream中数据用的.例如:Stream中有一些用户信 ...
- 自制导纳信号发生器 [原创cnblogs.com/helesheng]
最近正在研制一种通过测量人体导纳,估算体内血液变化率,进而评估心血管系统泵血功能的医疗仪器.为测量人体导纳,我们设计了一套巧妙的激励信号幅度反馈电路,该电路由于涉及商业机密就不在这里讨论了.这里主要分 ...
- 消息队列MQ简介
项目中要用到RabbitMQ,领导让我先了解一下.在之前的公司中,用到过消息队列MQ,阿里的那款RocketMQ,当时公司也做了简单的技术分享,自己也看了一些博客.自己在有道云笔记上,做了一些整理,但 ...
- Windows系统下解决PhPStudy MySQL启动失败
报错 Apache\Nginx服务正常启动了,但是MySQL却一直启动失败. 解决流程 查看端口是否被占用 打开系统自带的资源管理器,查看监听端口3306是不是被占用,下图中3306端口被mysqld ...
- adb shell常用命令
一.文件操作相关命令 1.文件操作命令 子命令 参数 说明 cd 无 进入目录 cat [-beflnstuv] [-B bsize] [file...] 查看文件内容-n:显示行号-b:显示行号,但 ...
- ESP32的NVS使用指南
NVS总的来说,就是非易失性存储,类似MCU EEPROM,但实际上调用ESP32这些函数,数据是存储在FLASH中的. 它的管理方式类似数据库的表,在NVS里面可以存储很多个不同的表,每个表下面有不 ...
- Java之Hashmap中value为null,则返回json数据中key不存在
前两天干活儿的时候,将实例对象放在Hashmap中返回给前端: ArtificialEntity artificialEntity = artificialService.getInfoById(id ...