Home » React JS » So sánh tốc độ giữa VueJS vs ReactJS

So sánh tốc độ giữa VueJS vs ReactJS

Môi trường

Macbook Pro 2017 15′ – 2.8 GHz Intel Core i7 – 16 GB

macOS Sierra 10.16.6

Google Chrome 66

React v16.3.2

VueJS v2.5.3


Thiết lập

 

Tạo project mới hoàn toàn từ create-react-app và vue-cli



Tất cả benchmark logic viết trong 1 file component duy nhất

Library hỗ trợ


  • Bootstrap 4.1.0
  • Lodash 4.17.5
  • Faker 4.1.0

Các mục so sánh

  • Create n row sau khi load page
  • Replace toàn bộ row sau khi tạo
  • Select 1 row để highlight (5 lần chuẩn bị)
  • Update nội dung tất cả các row thứ 10, 20, 30 … (5 lần chuẩn bị)
  • Delete 1 row (5 lần chuẩn bị)
  • Swap 2 row (5 lần chuẩn bị)
  • Append 1000 row vào cuối bảng
  • Clear all

Thực hiện benchmark với cài đặt có sử dụng key và không sử dụng key khi render bảng


Kết quả

VueJS – ReactJS Benchmark – Results

Nhận xét

==> React nhìn chung chậm hơn VueJS


  • Hầu hết các hạng mục VueJS đều nhanh hơn React chỉ trừ clear all
  • VueJS đặc biệt nhanh hơn ở 2 mục selectswap, có thể lên đến 400%
  • Tại mốc 100,000 row, React mất hơn 90s để Create còn VueJS chỉ mất dưới 20s
  • Giữa keyednon-keyed của React nhìn chung có sự khác biệt
    • keyed nhanh hơn ở các tác vụ appenddelete
    • non-keyed nhanh hơn ở các tác vụ khác
    • tuy nhiên khi số lượng row nhiều lên thì keyed chậm đi nhiều hơn
  • keyednon-keyed của VueJS nhìn chung là tương đương

Source code

React



Vue



Tham khảo

http://www.stefankrause.net/js-frameworks-benchmark6/webdriver-ts-results/table.html

Tagged width:, , , ,