pace.js 原理(转)
pace.js监控了什么:
pace.js对于加载进度监控了什么呢?通过阅读源码,我们看到整体的进度有四个部分组成:document,elements,eventLag和ajax这四种监视器(Monitor)。
1.
那接下来就来看看它们分别是什么。
首先是document。document就是我们所熟悉的HTMLDocument节点。document节点有一个事件,onreadystatechange,当document的readyState状态变化时会触发。因为无法准确的知道document到底加载了多少百分比,所以就用这个状态来做一个估算。在pace.js中将document的readyState的三个状态loadong,interactive和complete分别定义为0%,50%和100%。通过监听document节点的readyState状态变更,形成了pace.js的DocumentMonitor。
2.
接下来是elements。我们可以通过配置传入一个css选择器列表,默认的选择器列表仅包含“body”。pace.js会按照设置的时间间隔搜索所有的选择器,如果能获得则认为这一项满足,所以elements这一项的加载进度就是 满足的选择器/全部的选择器。通过查询页面中制定的元素,就是pace.js的ElementMonitor。
3.
然后是eventLag。EventLagMonitor其实只是一个“假的”监视器。它就在那里安静匀速的更新进度,这一小小的措施却带来了不错的用户体验,让用户不会因为加载“卡住了”而慌张。
pace.js是如何监控ajax的:
最后是用来监控ajax进度的AjaxMonitor。这是最有趣的一部分。如何才能监控所有ajax请求,并且不需要开发者修改自己或第三方的业务逻辑呢?
如果了解原生js的话,应该了解这几个类:XMLHttpRequest,XDomainRequest,WebSocket。这三个类分别用来发送ajax请求,跨域的ajax请求,以及websocket。如果能监控所有这些请求的时间,包括progress,load,error等等,我们就可以更新我们的加载进度了。
既然我们知道了要监控的对象,那我们便可以“请君入瓮”了,而这个瓮,就是代理模式:我们可以把原生的类保存起来,再用我们自己写的埋藏了“间谍”的类覆盖原生的类,这样当其他代码建立这些类的实例的时候,我们的“间谍”便悄悄开始监听加载进度了。
让我们来看一下代码:
// 保存原生的XMLHttpRequest
_XMLHttpRequest = window.XMLHttpRequest; // 覆盖XMLHttpRequest
window.XMLHttpRequest = function(flags) {
var req;
// 调用原生的XMLHttpRequest
req = new _XMLHttpRequest(flags);
// 埋入我们的“间谍”
monitorXHR(req);
return req;
}; monitorXHR = function(req) {
var _open;
// “间谍”又对open方法埋入了间谍
_open = req.open;
return req.open = function(type, url, async) {
if (shouldTrack(type)) {
_this.trigger(‘request‘, {
type: type,
url: url,
request: req
});
}
return _open.apply(req, arguments);
};
};
通过代理模式埋了这些“间谍”后,我们就能对发起的ajax请求等做到监控,以更新加载进度。
当然pace.js也不是什么都监听了
除了以上这些,当然也有pace.js并没有监听的加载事件,比如script标签的加载。如果我们使用了sea.js或者require.js等,当js代码动态加载时并不会影响进度条,因为这里我们用动态建立script标签的方式加载js代码,而pace.js并没有对这方面进行监听。我们可以同样的代理appendChild方法,如果发现script标签被加到页面上,那么就监听它的加载进度。不过实际情况当然复杂的多,还有insertBefore,甚至innerHTML等方法都可以创建script标签加入文档并开始js的加载(当然一般就是appendChild和insertBefore啦)。
相似的还有css的加载,还要注意处理css的加载事件,在一些老的浏览器上,css并没有加载事件,还有加个定时不断检查css节点的cssRules和name来确定加载状况。
小结:
通过阅读pace.js的源码我们了解了pace.js的原理,同时学习了鸡贼的代理模式。比如在jasmine.js中也有个spy,可以监控制定函数被调用了几次,被什么参数调用了等等。灵活应用这种代理模式,可以方便我们扩展功能、进行调试等等。
pace.js 原理(转)的更多相关文章
- pace.js原理简介
简介: 不少童鞋可能都使用过pace.js:http://github.hubspot.com/pace/docs/welcome/ 只要在页面上引入pace.js和相关的css,并不需要对业务逻辑做 ...
- pace.js[转载]
pace.js监控了什么: pace.js对于加载进度监控了什么呢?通过阅读源码,我们看到整体的进度有四个部分组成:document,elements,eventLag和ajax这四种监视器(Moni ...
- Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果
在页面中引入 Pace.js 和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...
- pace.js和NProgress.js两个加载进度插件的一点小总结
这两个插件都是关于加载进度动画的,应该说各有特点吧,最起码对我来说是各有优势的.今天一天就捣鼓了加载进度动画,也研究了大量的(也就这两个)加载进度动画,也算对加载进度动画有了一个初步的了解了吧. NP ...
- pace.js – 加载进度条插件
这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容 ...
- 插件二之页面加载进度条pace.js
关于pace.js pace.js包含14样式,每种样式可以自定义颜色,官方下载中提供了几种颜色的主题,使用方式也很简单,引入pace的js文件跟所需样式文件即可 <link rel=" ...
- mark jquery 链式调用的js原理
我们在使用jquery的时候会用到类似$("#id").css('color','red').show(200); 这样写有点减少代码量,减少了逐步查询DOM的性能损耗: js 原 ...
- js模拟浏览器加载效果 pace.js 中文官方文档
2017年2月20日12:11:25 官网URL:http://github.hubspot.com/pace/docs/welcome/ 文档 http://github.hubspot.com/p ...
- react中用pace.js
pace.js不支持npm, 所以只能直接下载下来,当作普通js引入 我在用的时候怎么都引不到组件里去用 后来终于找到方法了,直接上图了 1.先将pace文件下载来放在公共js目录下,pace.les ...
随机推荐
- eclipse 启动程序时错误弹窗:multiple problems have occurred
.log内容如下: !ENTRY org.eclipse.ui 4 4 2017-04-14 09:31:05.341!MESSAGE An internal error has occurred.! ...
- 什么是2.5D与3D编辑模式
ZBrush®其实就是一个带有三维特性的二维软件,它不仅具有绘制二维图像的功能,而且也具有对三维物体进行编辑的功能,就是所谓的2.5D(Pixol技术). 学习ZBrush之前有必要了解一下2.5D的 ...
- HDU1231 最长连续子序列
最大连续子序列 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
- zabbix-agent端自定义监控项(free -m)服务器内存使用率
Agent端操作 [root@agent ~]# vim /usr/local/zabbix/etc/zabbix_agentd.conf 末行追加 UserParameter=memory_user ...
- Linux下安装Solr7.5.0,并部署到Tomcat
收藏地址:https://blog.csdn.net/qq_39135287/article/details/84260724
- windows关于定时执行的php脚本
根据业务需求,需要服务器每天定时执行一些脚本,如后台提交数据,定时处理数据库等. 最初的思路是在某个控制器里写好方法,加入code验证,定期的用计划任务去访问.由于window计划任务这方面比较low ...
- 【【henuacm2016级暑期训练】动态规划专题 I】Gargari and Permutations
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 注意这k个序列每个都是排列. 如果在每个序列中都满足y出现在x之后的话. 那么我们从x连一条有向边至y (有一个序列不满足就不连 ( ...
- android startservice无法启动服务
1.android startservice无法启动服务 之前MainActivity.java中启动service源代码如下: private void startMyService() { //启 ...
- angular-代码段
重复代码 <div ng-app="" ng-init="names=['Jani','Hege','Kai']"> <p>使用 ng- ...
- ZOJ 3556
终于做出来了,激动.... 这道题隐藏得深啊,但若推导下来,就变简单了. 首先,一个集合的子集的个数为2^n=s.注意了,题目求的是有序集合组,并且每个集合是可以重复使用的,怎么办呢?这就要想到多重集 ...