خانه \\ Angular JS \\ مقایسه اجمالی ReactJS ، KnockoutJS و AngularJS از لحاظ Performance

  • مقایسه اجمالی ReactJS ، KnockoutJS و AngularJS از لحاظ Performance
مقایسه اجمالی ReactJS ، KnockoutJS و AngularJS از لحاظ Performance
1395/08/28 - 10:05:09 // Angular JS // 2 نظر // 5151 بازدید

در این تحقیق کوتاه به صورت اجمالی قصد داریم سرعت اجرا و با پایان رساندن یک Task ساده را در این 3 پلتفرم معروف مقایسه و نتیجه را در Browser های مختلف بررسی نماییم.باشد که پند گیرید !. در کنار این سه تکنولوژی، اقدام به بررسی Raw Javascript هم خواهیم نمود، باشد که بیشتر پند گیرید !.

بسمه تعالی

مقایسه اجمالی ReactJS ، KnockoutJS و AngularJS از لحاظ Performance

در این تحقیق کوتاه به صورت اجمالی قصد داریم سرعت اجرا و با پایان رساندن یک Task ساده را در این 3 پلتفرم معروف مقایسه و نتیجه را در Browser های مختلف بررسی نماییم.باشد که پند گیرید !.

در کنار این سه تکنولوژی، اقدام به بررسی Raw Javascript هم خواهیم نمود، باشد که بیشتر پند گیرید !.

برای اینکار یک لیست دارای 1000 آیتم توسط این تکنولوژیها درون صفحه ریخته شده و زمان شروع و پایان از زمان کلیک تا پایان و انتهای فرایند اجرا محاسبه و بر روی نمودار نمایش داده خواهد شد. این 1000 آیتم درون یک UL Tag به نمایش در خواهد آمد .

لینک اجرایی تست مورد نظر : http://chrisharrington.github.io/demos/performance

 

React JS

  1. var Class = React.createClass({  
  2.     select: function(data) {  
  3.         this.props.selected = data.id;  
  4.         this.forceUpdate();  
  5.     },  
  1.     render: function() {  
  2.         var items = [];  
  3.         for (var i = 0; i < this.props.data.length; i++) {  
  4.             items.push(  
  5.                 React.createElement("div", { className: "row" },  
  6.                     React.createElement("div", { className: "col-md-12 test-data" },  
  7.                         React.createElement("span", { className: this.props.selected === this.props.data[i].id ? 
  8. "selected" : "", onClick: this.select.bind(null, this.props.data[i]) }, this.props.data[i].label)  
  9.                     )  
  10.                 )  
  11.             );  
  12.         }  
  13.   
  14.         return React.createElement("div", null, items);  
  15.     }  
  16. });  
  17.   
  18. $("#run-react").on("click", function() {  
  19.     var built = new Class({ data: data, selected: null });  
  20.   
  21.     var data = _buildData(),  
  22.     date = new Date();  
  23.   
  24.     React.render(built, $("#react")[0]);  
  25.     $("#run-react").text((new Date() - date) + " ms");  
  26. });  
 
 

Angular JS 

  1. <div>  
  2.     <div class="row" ng-repeat="item in data">  
  3.         <div class="col-md-12 test-data">  
  4.             <span ng-class="{ selected: item.id === $parent.selected }" ng-click="select(item)">{{item.label}}</span>  
  5.         </div>  
  6.     </div>  
  7. </div>  
  8.   
  9. angular.module("test", []).controller("controller", function($scope) {  
  10.     $scope.run = function() {  
  11.         var data = _buildData(),  
  12.         date = new Date();  
  13.   
  14.         $scope.selected = null;  
  15.         $scope.$$postDigest(function() {  
  16.             $("#run-angular").text((new Date() - date) + " ms");  
  17.         });  
  18.   
  19.         $scope.data = data;  
  20.     };  
  21.   
  22.     $scope.select = function(item) {  
  23.         $scope.selected = item.id;  
  24.     };  
  25. });  
 

Knockout JS

  1. <div id="knockout" class="col-md-3">  
  2.     <div class="row">  
  3.         <div class="col-md-7">  
  4.             <h3>Knockout</h3>  
  5.         </div>  
  6.         <div class="col-md-5 text-right time" id="run-knockout" data-bind="click: run">Run</div>  
  7.     </div>  
  8.     <div data-bind="foreach: data">  
  9.         <div class="row">  
  10.             <div class="col-md-12 test-data">  
  11.                 <span data-bind="click: $root.select.bind($root, $data), text: $data.label, css: { selected: $data.id === $root.selected() }"></span>  
  12.             </div>  
  13.         </div>  
  14.     </div>  
  15. </div>  
  16. ko.applyBindings({  
  17.     selected: ko.observable(),  
  18.     data: ko.observableArray(),  
  19.   
  20.     select: function(item) {  
  21.         this.selected(item.id);  
  22.     },  
  23.   
  24.     run: function() {  
  25.         var data = _buildData(),  
  26.         date = new Date();  
  27.   
  28.         this.selected(null);  
  29.         this.data(data);  
  30.         $("#run-knockout").text((new Date() - date) + " ms");  
  31.     }  
  32. }, $("#knockout")[0]);  
 

Raw DOM Manipulation

  1. <script type="text/html" id="raw-template">  
  2.     <div class="row">  
  3.         <div class="col-md-12 test-data">  
  4.             <span class="{{className}}">{{label}}</span>  
  5.         </div>  
  6.     </div>  
  7. </script>  
  8. $("#run-raw").on("click", function() {  
  9.     document.getElementById("raw").innerHTML = "";  
  10.     var data = _buildData(),  
  11.         date = new Date(),  
  12.         template = $("#raw-template").html(),  
  13.         html = "";  
  14.   
  15.     for (var i = 0; i < data.length; i++) {  
  16.         var render = template;  
  17.         render = render.replace("{{className}}", "");  
  18.         render = render.replace("{{label}}", data[i].label);  
  19.         html += render;  
  20.     }  
  21.   
  22.     document.getElementById("raw").innerHTML = html;  
  23.   
  24.     $("#raw").on("click", ".test-data span", function() {  
  25.         $("#raw .selected").removeClass("selected");  
  26.         $(this).addClass("selected");  
  27.     });  
  28.   
  29.     $("#run-raw").text((new Date() - date) + " ms");  
  30. });  
 همه تکنولوژیها به صورت جداگانه دارای کد می باشند و حالا با اجرای آنها میتوان یک روند ثابت را برای هر یک شبیه سازی و زمان را محاسبه نمود.
 
 
  
 
 

حال می توان نتیجه گیری نمود. سرعت React در مجموع بیشتر است و این برای من به شخصه عجیب به نظر میرسد. باید سرعت Rar Javascript بیشتر می بود. نکته بعدی که عجیب و مسخره است، سرعت بسیار پایین تر React در دومین Click پس از سرعت خوب آن در اولین بار است که در Chrome فقط رخ میدهد و کسی هم نمیداند چرا در دومین تست، سرعت این پلتفرم فقط در Chrome پایین تر است.

در کل Raw Javascript در جایگاه دوم قرار میگیرد که خوب تعجبی هم ندارد. باید اصلن در جایگاه اول قرار میگرفت. Angular در جایگاه سوم و Knockout هم در جایگاه بعدی است. سرعت Knockout در FireFox افتضاح است و باز کسی نمیداند چرا .

 

در کل برای دیتای سنگین، React منطقی و سریع به نظر میرسد.

نکته : صدا زدن 1000 رکورد ، شاید احمقانه به نظر برسد و سوال شود پس Paging و ... چه میشود؟. پاسخ این است اینجا فقط یک تست ساده بود و هدف مشاهده سرعت در این تست خاص میباشد. شاید اگر دیتا را صفحه بندی و منظم نمایید ، سرعت یکی دیگر از تکنولوژیها در ردیف اول قرار گیرد . اصولن اینگونه مقایسه ها نسبی است و نمی شود حکم قطعی بر روی این گونه تست ها صادر نمود.

 
علی کلاهدوزان
معرفی نویسنده : علی کلاهدوزان

سلام بر دوستان ،
شاید رایج است به عنوان پروفایل کاربر ، چند خطی راجع به خودم بنویسم ، ولی وضعیت کاری و سوابق من با یک جستجوی ساده در گوگل مشخص خواهد شد ، لذا سرتان را با مطالب بی مورد به درد نیاورم بهتر است . اگر نکته خاصی لازم بود بدانید در قسمت "ایلیا سافت در یک نگاه" به احتمال زیاد یافت خواهد شد . جزئیات بیشتر را سوال کنید ، آدرس ایمیل Ali@Kolahdoozan.com همیشه جوابگوی شماست .امیدوارم از مطالب سایت استفاده کرده باشید . شاد و پیروز باشید .

امتیاز به مطلب
           
برچسب ها
Reactjs AngularJS Knockoutjs 
مطالب مرتبط
نظرات کاربران

  • امیر حسین زاده
    1395/08/30 - 19:16:07

    2
    0
    مقایسه کوتاه و مفیدی بود البته برای شروع یک مقایسه و تحقیق مناسب بنظر می رسید ولی برای تحقیق مفصل تر نیاز به بررسی های بیشتر و دقیق تر از این خواهد بود. علی آقای عزیز سپاس فراوان برای انتشار این مطلب ارزنده امیر حسین زاده www.amirhome.com

  • سعید
    1395/09/24 - 14:03:05

    1
    0
    اگر نسخه استفاده شده هم کدوم از این کتابخونه ها رو هم میگفتید بد نبود.
ارسال نظر