文档章节

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

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

今天在码云遇到一个很有意思的人,他在我的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

粉丝 33
博文 12
码字总数 9323
作品 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
1K
11
小楼昨夜又东风 - Per.js 2.4 版本发布,获得码云 GVP

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

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

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

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

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

Skyogo
08/29
1K
0
Per.js 1.1 版本发布,速度超快的 JS 响应式框架

Per.js 1.1版本今天发布了,那么让我们来看看这次更新了哪些内容: 取消getAllModuleName和version方法 增加getAllModuleNameAndVersion use方法支持字符串类型的模块名称,不必再使用数组加...

Skyogo
08/25
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring源码学习笔记-1-Resource

打算补下基础,学习下Spring源码,参考书籍是《Spring源码深度解析》,使用版本是Spring 3.2.x,本来想试图用脑图记录的,发现代码部分不好贴,还是作罢,这里只大略记录下想法,不写太细了 ...

zypy333
今天
10
0
RestClientUtil和ConfigRestClientUtil区别说明

RestClientUtil directly executes the DSL defined in the code. ConfigRestClientUtil gets the DSL defined in the configuration file by the DSL name and executes it. RestClientUtil......

bboss
今天
17
0

中国龙-扬科
昨天
2
0
Linux系统设置全局的默认网络代理

更改全局配置文件/etc/profile all_proxy="all_proxy=socks://rahowviahva.ml:80/"ftp_proxy="ftp_proxy=http://rahowviahva.ml:80/"http_proxy="http_proxy=http://rahowviahva.ml:80/"......

临江仙卜算子
昨天
11
0
java框架学习日志-6(bean作用域和自动装配)

本章补充bean的作用域和自动装配 bean作用域 之前提到可以用scope来设置单例模式 <bean id="type" class="cn.dota2.tpye.Type" scope="singleton"></bean> 除此之外还有几种用法 singleton:......

白话
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部