SVAR یک دیتاگرید رو سه بار ساخت
فرانتاند
ریاکت
جاوااسکریپتخلاصهٔ کاملتر
به گفتهٔ تیم SVAR، اونا کامپوننتهای سنگین مثل دیتاگرید و گانتچارت رو همزمان برای React و Vue و Svelte میسازن، برای همین یه دید دستاول از مقایسهٔ این سه تا دارن. تو این مقاله اومده که وقتی مجبور بشی یه کامپوننت رو سه بار سریع کنی، میفهمی گرونترین بخشهای کار تقریبا هیچ ربطی به فریمورک ندارن. نویسنده هم عمدا هیچ برندهای اعلام نمیکنه.
سلسلهمراتب هزینه از نگاه نویسنده روشنه: تولید HTML کندترین کاره، محاسبات جاوااسکریپت ارزونن ولی تو مقیاس یه کامپوننت دیگه مجانی نیستن، و سربار خود فریمورک (ویرچوال دام در برابر عملیات کامپایلشدهٔ دام) کنار اون دوتا فقط یه خطای گرد کردنه. برای همین اولین کار virtualization ـه، یعنی گرید فقط همون پونزده ردیفی رو رندر میکنه که تو دید کاربره و بقیه رو با یه جایگیر مخفی شبیهسازی میکنه.
جالبه که هیچکدوم از این سه تا ابزار آمادهای برای virtualization ندارن؛ کار خالص DOM ـه و خودت باید بنویسیش. تنها برتری واقعی React همینجاست: useLayoutEffect بعد از ساختهشدن DOM و قبل از اینکه مرورگر صفحه رو بکشه اجرا میشه، پس میتونی اندازهٔ کانتینر رو بگیری و نتیجهٔ درست تو همون فریم اول دیده بشه. Svelte و Vue معادلی ندارن، ولی نویسنده میگه در عمل باز هم ResizeObserver لازمه چون CSS و فونتها ممکنه هنوز لود نشده باشن.
عددهای خودشون هم همین حرف رو تایید میکنن. با هزار ردیف و پونزده ردیف قابلدیدن، Svelte حدود ۹، Vue حدود ۱۲ و React حدود ۱۳ میلیثانیه وقت میگیرن. رفتن از هزار به صد هزار ردیف فقط حدود ۳۰ میلیثانیه به هر سه اضافه میکنه، چون ردیفهای اضافه اصلا به DOM نمیرسن. ولی وقتی هزار ردیف رو کامل رندر کنی، عددها به ۴۱۲ تا ۴۶۹ میلیثانیه میپرن و فاصلهٔ سه فریمورک زیر ۱۵ درصد میمونه.
بخش دیگهای که نویسنده روش تاکید داره، جریان دادهست. تو React، بالا بردن تغییر یه سلول تا سطح جدول یعنی بازسازی صدها آبجکت المنت برای یه ریپینت کوچیک، پس استور با اشتراک مستقیم دیگه لوکس نیست و اجباریه. Svelte و Vue خودشون محاسبه رو به همون زیردرخت محدود میکنن. جمعبندی نویسنده اینه که اگه اپت کنده، فریمورک آخرین متهمه؛ محدودیت واقعی فریمورک کمیابه و اشتباه پیادهسازی رایج.
نکات کلیدی:
- هستهٔ گرید مستقل از فریمورکه و برای هر کدوم از React و Vue و Svelte فقط یه لایهٔ نازک اتصال نوشته شده.
- ترتیب هزینه: تولید HTML، بعد محاسبات جاوااسکریپت، و آخر از همه سربار خود فریمورک.
- با virtualization رفتن از هزار به صد هزار ردیف فقط حدود ۳۰ میلیثانیه گرونتره؛ بدون اون، رندر هزار ردیف ۴۱۲ تا ۴۶۹ میلیثانیه طول میکشه.
- useLayoutEffect تنها برتری ساختاری React تو اندازهگیری اولیهست؛ $effect.pre و onBeforeUpdate زودتر از موعد اجرا میشن.
- React آرایهٔ وابستگیها رو دستی میخواد، ولی Svelte و Vue خودکار ردیابی میکنن.
