https://github.com/tanangular/vite2-vue3

ทดสอบการ update DOM ด้วย timer กับ vite2 + vue3
https://github.com/tanangular/vite2-vue3

benchmark dom frontend javascript js performance template vite vite2 vue vue3 vuejs

Last synced: 22 days ago
JSON representation

ทดสอบการ update DOM ด้วย timer กับ vite2 + vue3

• Host: GitHub
• URL: https://github.com/tanangular/vite2-vue3
• Owner: tanangular
• Created: 2021-01-31T12:25:51.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2021-02-21T05:04:47.000Z (almost 4 years ago)
• Last Synced: 2024-11-14T05:32:00.975Z (3 months ago)
• Topics: benchmark, dom, frontend, javascript, js, performance, template, vite, vite2, vue, vue3, vuejs
• Language: Vue
• Homepage: https://vuejs.org/
• Size: 28.3 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vite2-vue3

ทดสอบการ update DOM ด้วย timer กับ vite2 + vue3

เปรียบเทียบจากโจทย์เดียวกัน และใช้ vite (vitejs.dev) เป็น web dev server (โดยหยิบยืม default template ของ vue3 มาเป็นโจทย์) ดังนี้

- มี Hello World Component  แสดง Logo framework และ ปุ่ม counter เพิ่มนับค่าจำนวนครั้งของการกดปุ่ม

- มี Timer Component  โดยมี dummy text "Lorem Ipsum" .... วางแบบเปลือยๆ เอาไว้ และใช้ setInterval() เพื่อนับเวลาและ update DOM ทุกๆ 1 วินาที

ลองเปรียบเทียบผลลัพธ์ตาม video ด้านล่าง

เราจะเห็นว่า ถึงแม้ผลลัพธ์บน browser จะเห็นผลลัพธ์ที่ไม่แตกต่างกัน

แต่ถ้าเมื่อเราเปิด developer tool ดู จะเห็นว่า vue3 (https://vuejs.org) มีการกระพริบของ DOM ทั้งก้อน เมื่อ DOM ถูก update อยู่ตลอดเวลา

ส่วน svelte3 (https://svelte.dev) จะ update เฉพาะเลข timer ที่เพิ่มขึ้นเท่านั้น และส่วน dummy text "Lorem Ipsum" จะไม่ถูก update เลย ตรงนี้จะเห็นว่า svlelte3 ทำเรื่อง rendering performance ได้ดีมากๆ

😃👏🎉🎉👍👍👍

[](https://www.youtube.com/watch?v=pjVbgxy_qdM)