標籤：net component 輸出 16px col data 瀏覽器 button document
Per.js速度對比Vue.js首先，我要承諾，儘管我是Per.js的作者，但是我在這次測試中完全保持公平公正的原則，不對測試結果有一點改動。
由於Vue.js和Per.js的功能巨多，所以無法測試全部功能，我就在這次測試裡先測試2個有代表性的功能，分別為：for和component。
同時，為了避免糾紛，現在我就先簡單介紹一下具體的參數：
現在讓我們先開始測試for指令：（效果：瀏覽器ul標籤輸出20000條資料）
【以下是Vue.js代碼】
<!DOCTYPE html><html> <head> <title>SPEED TEST</title> <meta charset="UTF-8"> </head> <body> <ul id="v-for-object" class="demo"> <li v-for="value in object"> {{ value }} </li> </ul> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <script src="Per.js"></script> <script> var arr = new Array(); for(var i=0;i<=20000;i++){ arr[arr.length] = i; } //請看清console.time語句位置！避免產生不必要糾紛 console.time("Vue.js time"); new Vue({ el: ‘#v-for-object‘, data: { object: arr } }); console.timeEnd("Vue.js time"); </script> </body></html>
執行時間具體說明： 經過測試，在chrome瀏覽器中，第一次Vue的執行時間大約為220ms，之後每次的執行時間在160到202ms之間。在firefox瀏覽器中，第一次的執行時間為213ms，之後每次的測試時間在158~182ms之間。 接下來我們來看看Per.js的執行時間 【以下是Per.js代碼】
<!DOCTYPE html><html> <head> <title>SPEED TEST</title> <meta charset="UTF-8"> </head> <body> <ul id="v-for-object" class="demo"> </ul> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <script src="Per.js"></script> <script> var arr = new Array(); for(var i=0;i<=20000;i++){ arr[arr.length] = i; } arr[arr.length] = ""; //請看清console.time語句位置！避免產生不必要糾紛 console.time("Per.js time"); Per().do({ el: "#v-for-object", for: arr }); console.timeEnd("Per.js time"); </script> </body></html>
執行時間具體說明： 經過測試，Per.js在chrome瀏覽器裡的第一次的執行時間大約為46.5ms，之後每次的執行時間在38~41ms之間。在firefox瀏覽器裡，Per.js的第一次執行時間為39ms，之後每次的執行時間在36~39ms之間。
結論：由此可以得出，在google chrome瀏覽器中，Per.js在“使用for指令輸出20000條資訊”的測試中，比Vue.js速度快大約5倍。在firefox瀏覽器中，Per.js的速度比Vue.js的速度快大約4.5倍。
接下來，我們來測試組件的註冊與繪製。 以下代碼使用組件功能在100個元素中間繪製組件。 【以下是Vue.js代碼】
<!DOCTYPE html><html> <head> <title>SPEED TEST</title> <meta charset="UTF-8"> </head> <body id="body"> <div id=‘components-demo‘></div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <script src="Per.js"></script> <script> for(var i=0;i<=100;i++){ document.getElementById("components-demo").innerHTML += "<button-counter></button-counter>"; } console.time("Vue.js time"); Vue.component(‘button-counter‘, { data: function () { return { count: 0 } }, template: ‘<h1>Hello World</h1>‘ }); new Vue({ el: ‘#components-demo‘ }); console.timeEnd("Vue.js time"); </script> </body></html>
執行時間具體說明： 經過測試，在chrome瀏覽器中，案頭搜尋引擎，第一次Vue的執行時間大約為67ms，之後每次的執行時間在51到70ms之間。在firefox瀏覽器中，多肉植物，第一次的執行時間為106ms，之後每次的測試時間在78~87ms之間。 下面我們來測試Per.js的效能。 【以下是Per.js代碼】
<!DOCTYPE html><html> <head> <title>SPEED TEST</title> <meta charset="UTF-8"> </head> <body id="body"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <script src="Per.js"></script> <script> for(var i=0;i<=100;i++){ document.getElementById("body").innerHTML += "<button-counter></button-counter>"; } console.time("Vue.js time"); Per().use("Per.component"); Per().component().set("button-counter","<h1>Hello World</h1>"); Per().component().apply("button-counter"); console.timeEnd("Vue.js time"); </script> </body></html>
執行時間具體說明： 令人及其驚奇的是（包括我），Per.js在chrome瀏覽器裡的第一次的執行時間居然大約只有1.5ms，之後每次的執行時間在1.2~1.4ms之間。在firefox瀏覽器裡，Per.js的第一次執行時間為2ms，之後每次的執行時間在2~3ms之間。
結論：由此可以得出，在google chrome瀏覽器中，Per.js在“註冊組件並在100的元素中渲染組件”的測試中，比Vue.js速度快大約45倍。在firefox瀏覽器中，Per.js的速度比Vue.js的速度快大約30倍。
Per.js速度對比Vue.js
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
