您现在的位置是：首页 > 文章详情

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

日期：2018-09-23点击：725收藏

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

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