L Art du Pré-chargement : Éliminer le "Flash" de Thème avec JavaScript et CSS

منظر Tasveer لیں: آپ نے اپنی ویب ایپلیکیشن کے لیے ایک خوبصورت دارك थीم ڈیزائن کرنے کے لئے گھنٹے گزار دیے۔ رنگوں مکمل طور پر متوازن ہیں، 대비 کے سطح پر بہترین ہے، اور آپ کے صارفین اس اختیار سے محبت کرتے ہیں۔ ليکن ایک شرmandeہ کن مسئلہ ہے: ہر بار صفحہ ریلوڈ ہونے پر، ایک جزوی سیکنڈ کے لیے، ڈیفالٹ ہلکا theme ظاہر ہوتا ہے، قبل کہ دارك theme اس کی جگہ لے لیتا ہے۔

یہ بصری 'فлэش'، اگرچہ مختصر ( گاهی 100ms سے کم )، انسانی آنکھ کے لیے فوراً محسوس ہوتا ہے اور ایک ناہم تجربہ بناتا ہے۔ ڈارک تھیم یا بصری آرام یا رسائی کے لیے چنے گئے استعمال کرنے والوں کے لیے، یہ جھلمل دردناک بھی ہو سکتا ہے، خاص طور پر کم روشنی والے ماحول میں۔

یہ phenomenon ایک قسم ہے جسے "`Flash of Unstyled Content` (FOUC)" کہا جاتا ہے، ویب ڈویلپمنٹ کی ایک کلاسیکی مسئلے جو CSS کے ابتدائی اوقات سے متصالح ہے۔ FOUC اس وقت پیش آتا ہے جب براؤزر temporarily HTML کے محتوى کو CSS کے اسٹائلز لاگ किए बिना دکھاتا ہے، جس سے غیر اسٹائلڈ مواد کا فلیش پیدا ہوتا ہے۔

ہمارے مخصوص صورت حال میں، ہم پوری طرح غیر‑استائل شدہ محتوا کے بارے میں بات نہیں کر رہے ہیں، بلکہ ایک کے بارے میںغلط تھیم کی چمک(FOWT) - مواد اسٹائل کی گئی ہے، لیکن غلط थीم کے ساتھ۔ یہ خاص طور پر ناگوار ہے کیونکہ یہ دکھاتا ہے کہ ہماری ایپلیکیشن "oublie" استعمال کرنے والی کی ترجیح کو ہر صفحے کے لوڈ پر۔

یہ مسئلا، اگرچہ ٹیکنیکل ہے، آپ کے ایپلیکیشن کی کیفیت کے ادراک پر اہم اثرات ڈالتا ہے:

صقیلگی کی کمیجھلملاہٹ سے محسوس ہوتا ہے کہ ایپلیکیشن مکمل نہیں یا بهتر طرح سے optimize نہیں کی گئی۔ صارف اکثر اس چھوٹی بصری نقصانات کو عام نقصان پیشہ ورانگی سے جوڑتے ہیں۔

اتساق میں انقطاع: لاگ لگے 'بھول' جاتی ہے استعمال کرنے والے کی ترجحات، جس سے انٹرفیس اور امیدوں کے درمیان بے synchronization کا احساس پیدا ہوتا ہے۔

بصری تھکاوٹروشَنائی کے حساس استعمال کرنے والوں یا میگرن سے جھپٹے والے افراد کے لیے، یہ چمکدار فлэش صرف ایک سادہ زیبائی‑مرتبط بے‑اراحتی سے زیادہ ہو سکتا ہے۔

محسوس کردگیآئرانیک، اگرچہ آپ کی ویب سائیٹ جلد سے لوڈ ہوتی ہے، یہ جھلملاٹ سست یا کم متجاوب application جیسا محسوس دلایا سکتا ہے۔

آئسے مسئلے کو حل کرنے کا طریقہ سمجھنے کے لیے، پہلے اس کا سبب سمجھنا ضروری ہے۔ جھلملات تین اہم واقعات کے درمیان وقت کی انحراف کی وجہ سے ویب پیج کے زندگی چکر میں پیش آتی ہیں۔

مشکل یہ پیش آتی ہے جب واقعہ نمبر 3 (JavaScript کی execution) اس وقت آتا ہے جب براؤزر پہلے سے ہی واقعہ نمبر 2 (style کی application) کا شروع یا اختتام کر چکا ہوتا ہے۔ اس موقع پر براؤزر نے پہلے سے ہی فیصلہ کر لیوتا ہے کہ کون سا تمہ دکھانا ہے اور آپ کا کوڈ پہلا رینڈر ہونے سے پہلے اس پر اثرانداز ہونے کے لیے Bohut دیر سے پہنچتا ہے۔

ایک ڈویلپر کے لیے سب سے طبیعی انحصار یہ ہوگا کہ وہ ہمارے…​ کے آخر میں ایک سکرپٹ رکھے۔`<body>`جو استعمال کرنے والے کے محفوظ تمہ کی جانچ کرتا ہے اور اسے لاگو کرتا ہے۔ یہ رویہ ویب کی riwajati behteen maSLaaqon ka pAltaa hai jo script ko safah ke akhir mein load karne ki sifaarish karte hain taake render block na ho.

یہ طریق کار پہلے نظر میں منطقی لگتی ہے۔ ہم DOM کے تیار ہونے کا انتظار کرتے ہیں، پھر ہم ธีม لاگو کرتے ہیں۔ سادہ، نہیں؟ متاسفانه، یہ سادگی بنیادی خرابی کو چھپاتی ہے جو براؤزر کے رینڈرنگ سائیکل کے ٹائمنگ سے متعلق ہے۔

واقعہ`DOMContentLoaded`یہ جب HTML کا ابتدائی ڈॉकومینٹ مکمل طور پر لوڈ ہو کر براؤزر سے تجزیہ کر لیا جاتا ہے،فورااسٹائل شیٹس، تصاویر، اور سب فریمز کے لوڈ ہونے کا ختم ہونا۔ یہ ایک اہم نقطہ ہے جسے سمجھنا ضروری ہے۔

یہ واقعات کی نمادینی تسلسل ہے:

مسئلہ؟ سٹاپ 6 (DOMContentLoaded) اور سٹاپ 8 (پہلا پینٹ) کے درمیان، براؤزر پہلے سے ہی فیصلہ کر چکا ہے کہ صفحہ کیسے ڈسپلے کرنا ہے۔ اگر آپ کا ٹیم چینج سکرپٹ سٹاپ 6 پر چلتا ہے، تو پہلے سے ہی پہلے دکھاوے سے بچنے کے لیے ڈیفالٹ اسٹائلز کے ساتھ زیادہ دیر ہو چکی ہے۔

واقعیت میں، ٹائمزنگ مزید پیچیدہ ہے۔ موجودہ براؤزر perceived performance کو بہتر بنانے کے لیے متقاعد اور پیچیدہ optimisation تکنیکیں استعمال کرتے ہیں۔ وہ پہلے پینٹ (First Contentful Paint) کو ممکنہ سب سے جلد کرنے کی کوشش کرتے ہیں تاکہ صارف اسکرین پر کچھ دیکھ سکے۔

CSS "render-blocking" بصورت افتراضي، جس کا مطلب ہے کہ براؤزر پہلے پیینٹ کرنے سے قبل اسٹائل شیٹس ڈاؤنلوڈ اور پرس کرنے کا انتظار کرتا ہے۔ یہ معقول ہے: ہم غیر سٹائل شدہ مواد دکھانا نہیں چاہتے۔

یہاں پھنسا یہ ہے: جب براؤزر پہلی بار یہ سی ایس ایس اسٹائلز لاگو کرتا ہے، تو وہ موجودہ ڈوم کی حالت کے مطابق عمل کرتا ہے۔ اگر صفت`data-bs-theme`ابھی تک ٹاگ پر مُعَرَّف نہیں ہے`<html>`, براؤزر ڈیفالٹ اسٹائلز لاگو کرے گا (عام طور پر ہلکا ธีม).

پھر، جب آپ کا سکرپٹ چلتا ہے اور یہ خصوصیت تبدیل کرتا ہے، براؤزر کو :

یہ ری کیلکول اور رے پینٹنگ کا عمل ہے جو مرئی جھلملاہٹ پیدا کرتا ہے۔

یہمشکل تسلسل کو سمجھنے کے لیے، ایک تفصیلی تسلسل ڈائگرام کا جائزہ لیں:

یہ ڈائرگرام مسئلے کو واضح طور پر دکھاتا ہے: پہلا پینٹ اس وقت ہوتا ہے جب ہمارا اسکرپٹ مناسب تھیيم سیٹ کرنے کا موقع نہیں ملتی۔ بعد میں ہونے والا رپینٹ مرئی جھلملاتی پیدا کرتا ہے۔

چند طریقوں کو اس مسئلے کو حل کرنے کی کوشش کی گئی، لیکن اکثر کے اپنے‑اپنے نقصانات ہیں:

Approach 1: لود ہونے تک مواد کو چھپا کریں

یہ طریقہ JavaScript کے صحیح ٹھی밂 کو سیٹ کرنے تک تمام مواد کو چھپا رکھتا ہے۔ masalah؟ یہ مصنوعی طور پر مواد کی دکھائی کو دیرانداز کرتا ہے، جس سے سایت زیادہ سست لگنے کا احساس ہوتا ہے۔ علاوہً، اگر JavaScript غیر فعال کر دیا جائے، تو صارف کو کچھ بھی نہیں دikhái دےتا!

طریقہ 2: لوڈر/اسپنر استعمال کریں

Approach 1 کی طرح، لیکن بار‑لوڈر سپنر کے ساتھ۔ یہ مسئلے کو ڈھپکت ہے لیکن اصل عمل بہتری نہیں کرتی اور بے ضروری محسوس ہونے والی دیر شامل کرتی ہے۔

طریقہ 3: پیش فرض ڈارک تھییم

کسی ڈویلپر ڈارک ثیم کو CSS میں ڈیفالٹ کے طور پر معین کرتے ہیں۔ یہ ڈارک ثیم کے صارفین کے لیے جھمکنا روک دیتا ہے، لیکن روشن ثیم کے صارفین کے لیے برعکس مسئلہ پیدا کرتا ہے۔

یہ تمام اندراجات مناسب نہیں ہیں کیونکہ وہ بیماری کے علامت پر توجہ مرکوز کرتی ہیں، بنیادی سبب پر نہیں۔

اس مسئلے کو حل کرنے کی کلید یہ ہے کہ ہم کو یہ جاننا ہے کہ ہم کو اس خصوصیت کو تعریف کرنا ہوگا۔data-bs-theme پہلےکہ براؤزر CSS اسٹائلز لاگو کرنے شروع نہیں کرتا۔ اس کا مطلب یہ ہے کہ ہمارا سکرپت پیج کے زندگی цикیل میں پہلے اجرا ہونا چاہیے، اور یہی وہ چیز ہے جو ہم اگلے حصے میں جانچیں گے۔

ہماری جھلملاوٹ کا خوبصورت حل ایک سادہ لیکن طاقتور اصول پر مبنی ہے :ایپلیکیشن کی حالت کو براؤزر کے رینڈرنگ پروسیس کے ساتھ ہم آہنگ کرناصفحے کے لوڈ ہونے کے بعد themes کو سیٹ کرنے کا انتظار کرنے کی بجائے، ہمیں فوراً themes کو سیٹ کرنا ہوگا۔دورانبار لوڈ، حتی سے پہلے CSS کے اسٹائل لاگو نہیں کیے گئے۔

یہApproach 'Early Loading' یا 'Synchronous Preloading' keh kahī jātī hai web development ke istilahāt mein۔ Idea yeh hai ke hum apni theme detection logic ko page ke life cycle mein sab se pehle mumkin had tak execute karte hain, ideally tag ke andar۔<head>, حتی براؤزر سے پہلے CSS فائلز ڈاؤنلوڈ کرنے سے پہلے۔

Le `<head>`ایک HTML دستاویز براؤزر کے ذریعے سِیکوئینسی طور پر، اوپر سے نیچے تک محروس کیا جاتا ہے۔ ہر عنصر اس کے ظہور کے مطابق ترتیب میں محروس کیا جاتا ہے۔ یہ خصوصیت ہماری حل کے لیے ضروری ہے۔

جیسے براؤزر ایک ٹیگ سے ملتا ہے`<script>`کے اندر`<head>`خصائص کے بغیر`async` ou defer, il :

یہ رویہ، اکثر کارکردگی کے مسئلے کے طور پر سمجھا جاتا ہے (جس کی وجہ سے سکرپٹس کو صفحے کے آخر میں رکھنے کی مشورہ ملتی ہے)، اس مخصوص صورت میں ہمارا حليف بن جاتا ہے۔ ہماری ٹیم ڈٹیکشن سکرپٹ کو صفحے کے آغاز پر رکھ کر`<head>`, ہم یہ ضمانت دیتے ہیں کہ یہ براؤزر کے ٹیگز سے ملاقات کرنے سے پہلے نفذ ہوتا ہے`<link>`ہمارے اسٹائل شیٹ.

همारा مكمل حل تین متبادل جدولخ سے بناؤا ہے, ہر ایک مخصوص rôle ادا کر رہا ہے :

Layer 1 : Persistence (localStorage) یہ لیئر سشنز کے درمیان صارف کے انتخاب کو محفوظ کرنے اور دوبارہ لانے کا ذمہ دار ہے۔

طبقہ 2 : جلدی ہم آہنگی (<head> میں این لائن اسکرپت) یہ لیئر ایپلیکیشن کے وضع کو DOM کے ساتھ ابتدائی رینڈر سے پہلے ہم آہنگ کرتی ہے۔

طبقہ 3 : ریاکٹِیو اسٹائلز (CSS میں ایٹریبیوٹ سلیکٹرز) یہ لیر ویجول سٹائلز تعین کرتی ہے جو لیر 2 کے ذریعے معین کردہ حالت پر مبنی ہیں۔

ابھی ہر لایر کی تفصیل سے استكشاف کریں۔

Le localStorage`یہ Web Storage API ہے جو key-value pairs (کلی‑قدر) کو براؤزر میں مستقل طور پر محفوظ کرنے کی اجازت دیتا ہے۔ کوکیز کے برعکس، ڈیٹا کا`localStorage:

ہمارا استعمال کا مثال، ال`localStorage`ہے مکمل کیونکہ :

یہ ہے کہ ہم صارف کا انتخاب محفوظ کرتے ہیں جب وہ theme تبدیل کرتا ہے:

یہ ان صورتوں کو سنبھالنا انتہائی ضروری ہے جہاں`localStorage`دستیاب یا قابل رسائی نہیں ہے۔ کئی منظرنامے اس تک رسائی کو روک سکتے ہیں`localStorage`Please provide the text you would like me to translate.

سخت خفیہ نیویگیشنسافاری برائیوزنگ کے خفیہ موڈ میں ایک استثنا اٹھاتی ہے`QuotaExceededError`کے اندر لکھنے کی कोशिशوں کے دوران`localStorage`.

خفیہ تنظیماتکچھ براؤزروں یا رازداری کے اضافے پہنچ کو بلوک کر سکتے ہیں`localStorage`.

دومین کی حدودیتیں : Le `localStorage`پروتوكول پر وصول نہیں`file://`کچھ براؤزرز میں.

اسٹوریج جگہ پر بھرپور: اگرچہ نادر، اسٹوریج کی جگہ پوری طرح بھری جا سکتی ہے۔

لہذا ہمارا کوڈ ایک بلاک استعمال کرتا ہے`try…​catch`ان حالات کو خوشگوار انداز سے منظم کرنے کے لیے، موضوع تبدیلی کی سہولت جاری رکھتے ہوئے، جبکہ پوسٹنسنس دستیاب نہ ہو۔

زیادہ پیچیدہ طلبوں کے لیے، آپ اضافی حکمت عملیوں پر غور کر سکتے ہیں :

سروئر ہم آہنگی (اختیاری)

یہapproach ربط شدہ استعمال کرنے والوں کے لیے ڈیوائسوں کے درمیان ترجیحوں کو ہم آہنگ کرنے کی اجازت دیتا ہے، اور مقامی فوری جواب دینے کی قابلیت کو محفوظ رکھتا ہے۔

یہاں جادو سچمچ سے کام کرتی ہے۔ ہم ایک چھوٹا اسکریپٹ رکھیں گے۔ان لاينہماری میں مستقیماً`<head>`, hamari sabhi tags se pehle`<link>`یہ اسکرپٹ ارادی طور پر مینیمل، خود مختار، اور ممکنہ حد تک جلد chalنے کے لیے بنایا گیا ہے۔

چلیے اس سکرپٹ کو لائن بای لائن تجزیہ کرتے ہیں۔ ہر ڈیزائن فیصلہ کو سمجھنے کے لیے :

IIFE (فوری طور پر بپレス ہونے والی فانکشن ایکسپرشن)

یہ ڈھانچہ ایک فنکشن بناتی ہے جو فوری طور پر چلتا ہے۔ کیوں؟ تاکہ ہم اپنی متغیرات کو لوکل سkope میں علیحدہ کر سکیں اور عالمی سkope کو آلودہ ہونے سے بچ سکیں۔ اگرچہ ہم صرف`const`(جس کا بلاک سkoپ ہے), IIFE ایک اچھی عمل ہے جو ہماری نیتوں واضح بناتا ہے اور اسموں کے ممکن تصادم سے حفاظت کرتا ہے۔

سٹریکٹ مود

یہ ہدایت JavaScript کے سٹرکٹ موڈ کو فعال کرتی ہے، جو: - غیر تصریح شدہ متغیرات کے استعمال پر پابندی - خطرناک آپریشنز کے لیے غلطی بناتا ہے - بعضی جاوا اسکرپٹ انجنوں میں کارکردگی کو بہتر بناتا ہے

ایسا حساس سکرپٹ جیسا یہ، ہم سب سے زیادہ سکیورٹی چاہتے ہیں۔

try…​catch بلوک

یہ بلک بالکل اہم ہے۔ یہ یقینی بناتا ہے کہ اگر کوئی چیز غلط ہو جائے (localStorage مسدود، ناممکن سینٹکس خرابی وغیرہ) تو ہمارا سکرپٹ پوری صفحے کا لوڈ روک نہیںے گا۔ استعمال کرنا`console.warn`بلکہ`console.error`یہ بتاتا ہے کہ یہ ایک غیرحرجی مسئلہ ہے۔

localsStorage کی پڑھائی

یہ لائن کچھ مخصوص سیاقات (سفاری کی سخت خفیہ ریموتنگ) میں ایک استثنا پراہنی ہو سکتی ہے۔ اس لیے اسے try…​catch بلوک میں رکھا گیا ہے۔

شرطی ایپلیکیشن

ہم theme کو صرف تو لاگو کرتے ہیں جب ہم نے اسے محفوظ شدہ پایا ہو؛ ورنہ، ہم CSS کو اپنی ڈیفالٹ theme استعمال کرنے دیتے ہیں۔ یہ اندراز JavaScript میں ہارڈ کوڈ شدہ ڈیفالٹ قيمة سے زیادہ مضبوط ہے۔

ایک اختیاراتی لیکن خوبصورت بہتری یہ ہے کہ آپ کے ایپلیکیشن میں، صارف کے عمل ہونے والے سسٹم کی تھیم ترجیح کا پتہ لگایا جائے، اگر وہ اب تک اپنی ایپلیکیشن میں واضح اختیار نہیں کیا :

یہ فیچر Media Query استعمال کرتا ہے`prefers-color-scheme`system کو پوچھنے کے لئے. macOS, Windows 10+, iOS, اور آندروید کے جدید نسخے پر، یہ کوئری صارف کے نظام کی ترجیح واپس کرتی ہے۔

مفائد : - پہلا بازدید سے شخصیاتی تجربہ - مستعمل کے نظام کے ماحول سے مطابقت - پہلی ویزٹ کے لیے کوئی اسٹوریج ضروری نہیں

ملاحظات : - تمام براؤزرز اس فیچر کو سپورٹ نہیں کرتے (مگر 2020 سے اس کا سپورٹ شاندار ہے) - تصدیق`window.matchMedia`مطابقت کو یقینی بناتا ہے - صارف ہمیشه یہ اختیار اوورلوڈ کر سکتا ہے

ہمارا پیش‑لوڈنگ سکرپت بے مثالی رفتار کرنے کے لیے بنایا گیا ہے :

حدّ کم ازمائی سائز: تقریباً 300 بائٹ غیر مینوفائیڈ، 200 بائٹ مینوفائیڈ۔ یہ کسی بھی تصویر یا جاوا اسکرپٹ لائبریری کی نسبت معذورات سے زیادہ نہیں۔

ان لائن: کوئی اضافی HTTP ریکوئسٹ نہیں ہے۔ اسکرپٹ HTML میں ہے، اس لیے یہ فوری طور پر دستیاب ہے۔

سادہ ہمמן اعمالکلید کی پڑھنا localStorage میں (بہت tez عمل) اور DOM کی صفت کی ترمیم (براؤزر کی داخلی عمل).

کسی انحصار نہیںکوئ فریم ورک نہیں، کوئی لائبریری نہیں، صرف سادہ جاوا اسکریپت۔ شروع ہونے کا وقت نہیں، انحصارات کا پارسنگ نہیں۔

ایک بار تنفیذاس اسکرپٹ ایک بار لُوڈ ہونے پر چلتا ہے۔ أيےٹ لیسنر نہیں، لُوپ نہیں، پیچیدہ حساب نہیں۔

عملی طور پر، حَدِيث ہارڈور پر، یہ سکرپٹ 1 ملِسی سیونڈ سے کم وقت میں چلتا ہے، ایک غیر محسوس وقت جو صفحے کے لوڈ کی کارکردگی پر کوئی اثر نہیںانداز کرتا۔

عناصر کیordre میں`<head>`مهم ہے۔ یہ تجویز شدہ ترتیب :

یہ حکم یقینی بناتا ہے کہ :

Bootstrap 5 نے CSS custom properties (CSS variables) اور ایٹریبیٹ سلكتورز پر مبنی themes کے gérer کا ایک شاندار نظام پیش کیا۔ یہ نظام اس ایٹریبیٹ کو استعمال کرتا ہے۔data-bs-theme`العنصر پر<html>`رنگ کے متغیرات کی کون سی مجموعہ لاگو کرنے کے لیے.

نظام کی خوبصورتی اس کی سادگی میں ہے : ہزاروں عناصر پر مختلف CSS فائلوں لوڈ کرنے یا کلاسوں کو ٹوگِل کرنے کے بجائے، ہم صرف ایک عنصر پر ایک صفت کو سادہ طریقے سے تبدیل کرتے ہیں، اور CSS کاسکیڈ کی مدد سے بقیہ خود کار کر دیتا ہے۔

یہ ایک مکمل CSS ساخت ہے جس کا استعمال مضبوط تھیم سسٹم کو لاگو کرنے کے لیے کیا جاتا ہے :