Per.js速度对比Vue.js
首先，我要承诺，尽管我是Per.js的作者，但是我在这次测试中完全保持公平公正的原则，不对测试结果有一点改动。
由于Vue.js和Per.js的功能巨多，所以无法测试全部功能，我就在这次测试里先测试2个有代表性的功能，分别为：for和component。
同时，为了避免纠纷，现在我就先简单介绍一下具体的参数：
- 测试电脑为macbook air 2015 13英寸款，mac os版本号为10.11.6 (15G31)
- 测试浏览器为google chrome（52.0.2743.116 (64-bit)版）和firefox（61.0.2 (64 位)）
- 测试Vue.js版本为2.5.17
- 测试Per.js版本为1.3
现在让我们先开始测试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/vue@2.5.17/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/vue@2.5.17/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/vue@2.5.17/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/vue@2.5.17/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
原文地址：https://www.cnblogs.com/asdf89/p/9560770.html