Per.js速度对比Vue.js
Posted 万象更新新
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Per.js速度对比Vue.js相关的知识,希望对你有一定的参考价值。
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/[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的主要内容,如果未能解决你的问题,请参考以下文章