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

今天在码云遇到一个颇有意思的人，他在个人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，他解决了什么问题，那么就请参考这篇文章：http://www.javashuo.com/article/p-xnzrqihq-kk.html】