Per.js

有人一开始看到Per.js时，会觉得它就是一个普通的JavaScript响应式开发框架，和Vue比几乎完全一样，我并不需要使用它，也不想了解它。如果你也有这样的问题，那么这篇文章也许会让你重新思考这个问题。 接下来，我就来详细说明一下Per.js的优势与劣势： Per和Vue有70%的相似度，那么我们就从他们对比。 首先，性能往往是决定一个框架好坏的最重要的一条，而Per.js的平均执行速度要比Vue快出7到8倍去。（至少在2.3版本之前是这样，之后可能会越来越慢，因为功能越加越多）这就表示当你从服务器里获取20000条数据并使用for属性输出时，使用Vue时的执行时间大约为200ms，而使用Per的执行时间仅有45ms。所以可以说Per.js在for属性上面的执行速度大约是Vue.js的5倍还要多。 仅凭一个for属性的执行速度可能还不足让你信服，那么现在就让我们看看组件的渲染速度。 使用Vue在100个元素中绘制组件大约需要67ms，而使用Per在100个元素中绘制相同组件则只需要1.5ms，这就说明Per.js在渲染组件方面，比Vue要快出大约45倍。 可能你会说，我根本就不用Vue渲染那么多组件，而且Vue虽然比Per.js慢，但是也够用了。 那么如果你这样认为的话，我们就继续来看看Vue和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>"; }