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

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

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

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

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