文档章节

今天在码云遇到一个很有意思的人 for Per.js

Skyogo
 Skyogo
发布于 09/23 10:08
字数 1014
阅读 1182
收藏 7

今天在码云遇到一个很有意思的人,他在我的Per.js项目下面评论了一句,大意为“你试试这句代码,看看速度到底是你快还是Vue快”【当然,这个评论被我手残不小心删掉了...】。

然后我就试了,结果发现:WDF?

代码:

var arr = [];
for(var i=0;i<=20000;i++){
    arr[arr.length] = i;
}
console.time("Vue.js");
var c = new Vue({
    el: "#ul1",
    data: {
        object: []
    }
});
c.object = arr;
console.timeEnd("Vue.js");
arr[arr.length] = "";
console.time("Per.js");
var a = Per("#ul2");
a.do({
    for: arr
});
console.timeEnd("Per.js");

ok,这我就不服了,于是我又写了一段代码:

var arr = [];
for(var i=0;i<=20000;i++){
    arr[arr.length] = i;
}
console.time("time");
var html = "";
for(var a=0;a<arr.length;a++){
    html+="<li>"+arr[a]+"</li>";
}
document.querySelector("#ul2").innerHTML = html;
console.timeEnd("time");

看,这就是最最普通的遍历数组的JS代码,现在我们来运行一下:

好,现在结果出来了,就连最最普通的遍历数组的JS代码都需要58ms,那么Vue又是怎么做到只需要24ms的呢?

现在我们继续往下推理。

普遍的初、中级开发者都会认为,js代码是阻塞式的,但是结果并非如此。

接下来我们再来做一个实验。

我们把之前的代码都删掉,写上这段代码:

var arr = [];
for(var i=0;i<=20000;i++){
    arr[arr.length] = i;
}
console.time("Vue.js");
var c = new Vue({
    el: "#ul1",
    data: {
        object: []
    }
});
c.object = arr;
console.timeEnd("Vue.js");
alert(document.querySelector("#ul1").innerHTML);

这段代码的意思是说,我们在vue运行完毕之后,获取一下Vue设置的ul里的innerHTML值,看看是什么。

结果输出:

好了,那么现在大家发现Vue输出的居然是空白了吧。

那么我们接下来这么做,写上这段代码:

var arr = [];
for(var i=0;i<=20000;i++){
    arr[arr.length] = i;
}
arr[arr.length] = "";
console.time("Per.js");
var a = Per("#ul2");
a.do({
    for: arr
});
console.timeEnd("Per.js");
alert(document.querySelector("#ul2").innerHTML);

这段代码的意思是说,我们在per.js运行完毕之后,获取一下Per.js设置的ul里的innerHTML值,看看是什么。

结果输出:

好的,现在只要稍微有点智商的开发者都能看出来差别是什么了吧?

但是你可能还会疑惑,Vue是如何实现这一切的?

很简单,我们只需要这么写:

var arr = [];
for(var i=0;i<=20000;i++){
    arr[arr.length] = i;
}
arr[arr.length] = "";
console.time("Per.js");
setTimeout("var a = Per('#ul2');a.do({for: arr});");
console.timeEnd("Per.js");

那么现在让我们运行一下,看看运行时间是多少。

只有0.06ms,对吧?

你看着很快,但实际上,它在真实世界的执行速度还是没有变慢。

这就是为什么Vue响应式会比Per.js快这么多的原因。

顺便推荐一下Per.js:

Per.js - 快速、简便的响应式JavaScript开发框架

Per.js是一个开源的渐进式+响应式的大型JavaScript开发框架,他拥有一系列简便的DOM操作函数,例如Vue的模板渲染、双向绑定等等。

同时他的执行速度还是Vue的7~8倍。

尽管他的DOM操作已经如此方便,但是他不只可以作用于DOM操作上。您还可以使用他的Ajax、Component(组件)等等操作。

  • 他可以有效的帮助你减少需要编写的代码量

  • 他完全是开源可扩展的

  • 他的执行速度几乎是Vue.js的8~7倍

  • 他对于JavaScript新手极其友好,文档极其易学

他类似Safe.js和Vue.js,但功能比Safe.js更强大,速度比Vue.js更快

欢迎使用Per.js!

【同时也欢迎查看Per和Vue的速度对比,链接:https://gitee.com/skyogo/Per.js/blob/master/速度对比VueJS.md

【如果你不知道为何要使用Per.js,他解决了什么问题,那么就请参考这篇文章:https://my.oschina.net/u/3754126/blog/2051925

© 著作权归作者所有

共有 人打赏支持
Skyogo

Skyogo

粉丝 24
博文 10
码字总数 8204
作品 12
程序员
加载中

评论(22)

满树繁花
一个方法快零点几秒,在一个大项目中可能放大到几秒,为什么不能当做优势宣传
大明二代
"普遍的初、中级开发者都会认为,js代码是阻塞式的,但是结果并非如此", 感觉高级黑
Skyogo
Skyogo

引用来自“pantrick”的评论

与reactjs比较性能快几倍,与angular比较性能快几倍,都列出来,让大家选择
Vue都比Angular快,哈哈
pantrick
pantrick
与reactjs比较性能快几倍,与angular比较性能快几倍,都列出来,让大家选择
公孙二狗
公孙二狗
天天碰瓷式宣传,挺累也挺烦
Skyogo
Skyogo

引用来自“蓝水晶飞机”的评论

跟 Vue 比我觉得你会很累。

@蓝水晶飞机 是啊
蓝水晶飞机
蓝水晶飞机
跟 Vue 比我觉得你会很累。
Skyogo
Skyogo
特此说明一下,Per.js在3.0版本(有可能提前)将会支持异步DOM更新
Skyogo
Skyogo

引用来自“Skyogo”的评论

性能快一点总是好事,另外我们的框架易学习度也是远高于vue。而且最近我们也在超级努力的完善生态

引用来自“银杏果果”的评论

加油!想当初vue.js从angular react中脱颖而出的时候也是有很多坎坷,遭受很多质疑的。听取意见、认真求证、坚持自我,我觉得开源作者都是伟大的!
我们真的非常感谢您的支持!谢谢!
银杏果果
银杏果果

引用来自“Skyogo”的评论

性能快一点总是好事,另外我们的框架易学习度也是远高于vue。而且最近我们也在超级努力的完善生态
加油!想当初vue.js从angular react中脱颖而出的时候也是有很多坎坷,遭受很多质疑的。听取意见、认真求证、坚持自我,我觉得开源作者都是伟大的!
Per.js 1.0 发布,超快执行速度的 JavaScript 响应式框架

Per.js 1.0 版本发布了,Per.js 是一个有着超快执行速度的 JavaScript 响应式框架。 他可以有效的帮助你减少需要编写的代码量 他完全是开源可扩展的 他的执行速度几乎是 Vue.js 的5~13分之一...

Skyogo
08/24
0
0
小楼昨夜又东风 - Per.js 2.4 版本发布,获得码云 GVP

Per.js 在前天的时候向码云提交了 GVP 项目的申请,仅在 2 小时后,申请就通过了。 所以今天特别准备发布 2.4 版本! 那么让我们来看看这次版本更新了哪些内容: 增加Per.animation模块 Per....

Skyogo
09/21
0
0
Per.js 1.2 版本发布,速度超快的 JS 响应式框架

Per.js 1.2版本今天发布了,那么让我们来看看这次更新了哪些内容: 增加了Per.page模块 优化了执行速度 【点赞是开源中国的必备礼仪(红薯说的),前往码云给个star吧!Per.js链接】 Per.js...

Skyogo
08/28
0
0
Per.js 1.3 版本发布,速度超快的 JS 响应式框架

Per.js 1.3版本今天发布了,那么让我们来看看这次更新了哪些内容: 增加了Per.page模块的remove方法和get方法 增加了Per.check模块 【点赞是开源中国的必备礼仪(红薯说的),前往码云给个s...

Skyogo
08/29
0
0
Per.js 2-beta.1 发布,更新数据模板和其它6项内容

Per.js 2.0-beta.1 版本今天发布了,那么让我们来看看这次2.0版本相比1.5版本更新了哪些内容: 增加Per.browser模块 增加Per.each模块 do方法增加data属性 for支持data属性【p-for-in参数】 ...

Skyogo
09/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

kubeadm部署kubernetes集群

一、环境要求 这里使用RHEL7.5 master、etcd:192.168.10.101,主机名:master node1:192.168.10.103,主机名:node1 node2:192.168.10.104,主机名:node2 所有机子能基于主机名通信,编辑...

人在艹木中
今天
6
0
Shell特殊符号总结以及cut,sort,wc,uniq,tee,tr,split命令

特殊符号总结一 * 任意个任意字符 ? 任意一个字符 # 注释字符 \ 脱义字符 | 管道符 # #号后的备注被忽略[root@centos01 ~]# ls a.txt # 备注 a.txt[root@centos01 ~]# a=1[root@centos01...

野雪球
今天
2
0
OSChina 周二乱弹 —— 程序员圣衣

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @达尔文:分享Skeeter Davis的单曲《The End of the World》 《The End of the World》- Skeeter Davis 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
14
0
[ python import module ] 导入模块

import moudle_name ----> import module_name.py ---> import module_name.py文件路径 -----> sys.path (这里进行查找文件) # from app.web import Personimport app.web.Person as Pe......

_______-
昨天
5
0
Redis性能问题排查解决手册

一、性能相关的数据指标 通过Redis-cli命令行界面访问到Redis服务器,然后使用info命令获取所有与Redis服务相关的信息。通过这些信息来分析文章后面提到的一些性能指标。 nfo命令输出的数据可...

IT--小哥
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部