تیم ری‌اکت دارن چیکار می‌کنن؟ (قسمت پنجم)

سلام. امروز می‌خوام راجب یکی از micro optimization هایی که روی ری‌اکت اتفاق افتاد بگم :)
البته چیز خیلی گفتنیی نیست ولی دوست داشتم راجبش حرف بزنم که هم ببینید چقدر ریز به بحث performance نگاه می‌شه هم ببینید تازه وارد ها چجوری به سورس ری‌اکت کانتریبیوت می‌کنن و چقدر کامیت هاشون ریزه.

خب این اسم کامیت هست Slightly improve performance of hydration. همونطور که از اسم کامیت هم معلومه, تغییراتی که اتفاق افتادن قراره یه کوچولو پرفورمنس hydration رو بهتر کنن.

برا دیدن تغییرات می‌تونید به اینجا برید یا عکس زیر رو ببینید:

خب همونطور که توی تغییرات مشخصه اولین اتفاقی که افتاده اینه که تابع getNextHydrateSibling کوچیک‌تر شده و یه تابع دیگه به اسم getNextHydrate ساخته شده که بخش اعظم کد به داخل این تابع منتقل شده. دلیلش هم این هست که کد بتونه داخل هردوی getNextHydrateSibling و getFirstHydrateChild استفاده بشه. بعد اینکه یه نگاهی به نحوه فراخوانی getNextHydrate بندازید متوجه میشیم که این تابع چقدر کد رو تمیزتر کرده و چقدر منطقی تره بودنش, پس تا همینجا شانس خیلی زیادی داریم که این کامیت روی مستر بره و منتشر بشه :).

حالا یه نگاه به بدنه getNextHydrate بندازیم. وظیفه این تابع اینه که بین داداشای node ای که ورودی می‌گیره بگرده و اولین برادری که میشه hydrate اش کرد رو برگردونه. با توجه به کد node های زیر قابل hydrate ان:
۱- ELEMENT_NODE و TEXT_NODE که همون المنت ها و تکست های خودمونن.
اگر suspense روی سرور روشن باشه:
۲- COMMENT_NODE
۳- SUSPENSE_START_DATE
۴- SUSPENSE_FALLBACK_START_DATE
۵- SUSPENSE_PENDING_START_DATE

و اگر node ما هر type ای غیر از این‌ها داشته باشه, break اتفاق نمی‌افته و اگر به حلقه for نگاه کنیم هر مرحله node = node.nextSibling قرار می‌گیره.
بنظرم کد مینیمال و جذابی میاد, یه نمونه موفق از خیلی مینیمال ریفاکتور کردنه.

اما پرفورمنسش کجا بود؟؟؟ الان بهتون میگم :)
اگه به کد قدیمی نگاه کنید اینجا که data داره چک میشن, این اتفاق مستقیم توی تک تک شرط‌های while افتاده. پس توی یک بار اجرای حلقه while, ما سه بار node.data رو اینجا و اینجا و اینجا صدا زدیم که بهرحال هرچقدر کم ولی یکم downside پرفورمنسی داره. اما توی کد جدید تو این خط nodeData گرفته شده و داخل if زیرش سه بار از رفرنسی که داریم برای چک کردن استفاده شده.

نکته‌ای که باید بهش تاکید کنم اینه که تو کد خودتون حتی ۱ درصد هم نیاز نیست به فکر این مدل optimization ها باشید. ری‌اکت یه کتابخونه خیلی خیلی معروفه که هرکدوم از این فانکشن هاش چند میلیارد بار در روز شاید صدا زده بشن. پس حتی یه کندی 0.1ms ای ‌میتونه قطره قطره جمع بشه و در نهایت تبدیل بشه به چند‌ ده ساعت در روز. پس منطقیه که بیشتر از ما به فکر باشن.

و در آخر توجه شمارو به این کامنت از سباستین جلب می‌کنم:

We’re moving to a selective hydration approach driven by interaction which effectively makes the paths lazy but also able to warm up in preparation for an interaction. So the characteristics are about to change.

https://github.com/facebook/react/pull/15998

دیگر مقالات من: