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

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

benchmark beta component demo dom frontend performance svelte svelte3 template vite2

Last synced: 18 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/tanangular/vite2-svelte3
• Owner: tanangular
• Created: 2021-01-31T12:56:32.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-02-21T05:03:01.000Z (almost 4 years ago)
• Last Synced: 2024-11-14T05:32:01.929Z (3 months ago)
• Topics: benchmark, beta, component, demo, dom, frontend, performance, svelte, svelte3, template, vite2
• Language: Svelte
• Homepage: https://svelte.dev
• Size: 65.4 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vite2-svelte3

ทดสอบการ 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=A6rsdYfF9IY)