⁦Turbolog⁩: جھلک کا خاتمہ

⁦Text.js⁩ کا ہر فریم ایک console.log کال ہے۔ 0.4 تک، ہر فریم سے پہلے console.clear() بھی کال ہوتا تھا۔ لوڈ کے دوران، فریموں کے درمیان کونسول لمحے بھر کے لیے خالی نظر آتا تھا۔

#جھلک کی پیمائش

اس کی پیمائش کے لیے ہم نے bench/devtools بنایا۔ یہ ⁦Chrome for Testing⁩ چلاتا ہے، اصل DevTools فرنٹ اینڈ کو ایک صفحے کے طور پر کھولتا ہے اور اس میں پیمائش کا انتظام کرتا ہے:

• ⁦DevTools⁩ فرنٹ اینڈ میں ہر requestAnimationFrame پر یہ چیک کرتا ہے کہ آیا کونسول ویوپورٹ میں 32 قطاروں کا مکمل فریم موجود ہے۔ اس کے بغیر ہونے والے پینٹ خالی پینٹ ہیں۔
• یہ بعد میں Page.startScreencast فریموں کو ڈی کوڈ کرتا ہے تاکہ پکسلز میں نتیجے کی تصدیق ہو۔
• ہر فریم کی قطار 0 میں FRAME:<id> · T:<epochMs> موجود ہوتا ہے، تاکہ فرنٹ اینڈ جان سکے کہ وہ کون سا فریم دکھا رہا ہے اور وہ کتنا تاخیر سے آیا ہے۔

ہر فریم سے پہلے console.clear() کال کرنے پر، 15 fps پر ⁦100×32⁩ ڈیش بورڈ DevTools کے ⁦70.6%⁩ پینٹ میں خالی تھا۔ 60 fps پر، ⁦81.1%⁩۔

#وجہ

⁦DevTools⁩ کا ConsoleView دونوں کالز کو مختلف طریقوں سے ہینڈل کرتا ہے:

1. console.clear()، consoleCleared() کو کال کرتا ہے، جو ویوپورٹ کو سنکرونس طور پر انویلیڈیٹ کرتا ہے۔ ہر پیغام اسی ٹاسک میں غائب ہو جاتا ہے۔
2. console.log()، addConsoleMessage() کو کال کرتا ہے، جو صرف viewportThrottler سے ریفریش شیڈول کرتا ہے، یہ 50 ms ٹائم آؤٹ والا ایک Throttler ہے۔

اس لیے ہر فریم پرانا فریم فوراً ہٹاتا ہے اور نیا بعد میں پینٹ کرتا ہے۔ 15 fps پر، ہر 66 ms میں سے تقریباً 50 ms تک کچھ نظر نہیں آتا۔

#فریم آخر میں جوڑنا

0.4 سے، Turbolog فریم آخر میں جوڑتا ہے۔ DevTools کونسول کے نچلے سرے پر رہتا ہے، اس لیے ایک ہی پینٹ میں نیا فریم پرانے کی جگہ لے لیتا ہے۔ شروع میں موجود صفر چوڑائی والا span، جس پر margin-top:100vh لگا ہے (پردہ)، پہلے کے فریم نظروں سے باہر دھکیل دیتا ہے، اور اپنی لائن بھی ختم کرتا ہے تاکہ DevTools کا سورس لنک کبھی قطار 0 کو تنگ نہ کرے۔

کونسول کو پھر بھی آخرکار خالی کرنا پڑتا ہے۔ یہ صرف پہلے فریم پر، invalidate() کے بعد، 100 فریم جمع ہونے پر فارغ حالت میں، اور 300 کی حتمی حد پر صاف ہوتا ہے۔

#تھروٹلر کے مطابق رفتار

⁦DevTools⁩ کی پینٹ کرنے کی رفتار سے زیادہ تیزی سے فریم بھیجنے سے کچھ بھی تیز نہیں ہوتا۔ تھروٹلر کے انتظار کے دوران آنے والا لاگ اسے دوبارہ شروع کر دیتا ہے، اس لیے فریم چھوٹ جاتے ہیں: 60 fps پر DevTools نے بھیجے گئے 295 فریموں میں سے 67 پینٹ کیے۔ Turbolog فریموں کے درمیان کم از کم 66 ms کا وقفہ رکھتا ہے، یعنی تقریباً 15 fps، اور جب وقفہ اجازت دے تو اب بھی الگ الگ ان پٹ کو سنکرونس طور پر رینڈر کرتا ہے۔

#فیز لاک توڑنا

کونسول صاف کرنے سے ہر بعد کے فریم میں تقریباً 50 ms کی تاخیر بھی بڑھتی تھی۔ صاف کرنے کے بعد، DevTools ایک مصنوعی Console was cleared قطار شامل کرتا ہے۔ یہ تھروٹلر کا فوری سلاٹ لے لیتی ہے اور اگلا فریم 50 ms کے ٹائمر پر دھکیل دیتی ہے، اور 66 ms کے مستقل وقفے پر ہر بعد کا فریم اسی ٹائمر سے لاک رہتا ہے۔

رینڈرر اب کونسول صاف ہونے کے بعد ایک بار 110 ms انتظار کرتا ہے۔ اس کے بعد، ہر فریم پچھلا ریفریش مکمل ہونے کے 50 ms سے زیادہ وقت بعد آتا ہے اور DevTools کا فوری راستہ لیتا ہے۔ ڈسپلے کی میڈین تاخیر 63 ms سے 10.4 ms ہو گئی۔

#نتائج

bun bench/devtools/run.ts --strategy=native,clear --fps=15,60 --seconds=5، ⁦100×32⁩ ڈیش بورڈ، اصل DevTools فرنٹ اینڈ:

باقی ⁦1%⁩ پہلا فریم ہے، جو جان بوجھ کر کونسول صاف کرتا ہے۔ اس کے خالی پینٹ Console was cleared قطار ہیں، خالی کونسول نہیں۔

#ہر span پر کم پراپرٹیز

⁦DevTools⁩ کے سورس سے ایک اور لاگت سامنے آئی۔ یہ %c اسٹائل کی ہر لانگ ہینڈ کو ہر لائن ریپر پر کاپی کرتا ہے، اس لیے font: اور margin: شارٹ ہینڈز پھیل کر ہر span پر تقریباً 33 پراپرٹیز بن جاتی تھیں۔ اب span صرف لانگ ہینڈز استعمال کرتے ہیں، ہر ایک میں تقریباً 7، ہیکس رنگوں کے ساتھ۔

آخر میں جوڑنے کا موڈ ⁦Text.js 0.4⁩ میں جاری ہوا تھا، اور فیز لاک کی اصلاح 1.0 میں جاری ہو رہی ہے۔ کسی کے لیے بھی ایپلیکیشن کوڈ میں تبدیلی درکار نہیں۔