今天在碼雲遇到一個頗有意思的人 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】