والحقيقة أنا النهاردة متحمس جدًا، أولًا لأننا قربنا نخلص أهم الـNotes في الـCSS، وثانيًا لأننا هنتكلم عن حاجة شيقة جدًا وغالبًا انت مكنتش عارفها قبل كدة، عزيزي القارئ، معادنا النهاردة مع الـCSSOM أو الـCSS Object Model!
اتكلمنا قبل كدة في الـHTML Notes عن الـWebAPIs، وازاي ان المتصفح بيبقى معاه حبة APIs كدة بتقدر تتعامل انت معاها، الـAPIs دي مش Native في اللغة نفسها، زي الـConsole مثلًا، والـDOM، اللي لو اتعاملت مع Node.js قبل كدة هتلاقي مفيش DOM أساسًا
لو مفهمتش الكلام اللي فوق أوي فـ مش مهم، هنتكلم عنه بالتفصيل الممل بإذن الله في الـJavaScript، ولكن دلوقتي خليني أعرفك على WebAPI انت غالبًا متعرفوش، الـCSSOM
الـCSSOM هو اختصار للـCSS Object Model، وببساطة هو عبارة عن Object بيعبر عن الـCSS زي ما الـDOM عبارة عن Object بيعبر عن الـHTML Elements، والاتنين في النهاية بيتكونوا من Tree فيها Nodes شايلة العناصر بترتيبها، ولكن الفرق ان الـDOM بيتعامل مع الـElements، والـCSSOM بيتعامل مع الـCSS Rules المختلفة
الـCSSOM بيسمحلك تتلاعب بخصائص الـCSS بشكل مباشر من خلال الـJavaScript، تقدر تـGet/Set في الـProperties زي ما انت عاوز، وده اللي يخليني أكلمك مرة تانية عن إزاي الصفحة بتاعتك بتترندر في الموقع لحد ما نوصل لخطوة بناء الـCSSOM
بص يا سيدي، مبدأيًا أول ما بتكتب الـDomain في المتصفح، أول حاجة خلاص زي ما اتفقنا قبل كدة بيعمل DNS Lookup، يعني بيبعت للـDNS يقوله هاتلي الـIP بتاع الموقع ده، فـ الـDNS يرجعله الـIP
يبدأ بعد كدة المتصفح يجهز الـTCP Connection، يتأكد من الـSSL Certificate وانت الموقع ده فعلًا بيقدم Secure Connection، وبعدين يقوم باعت الـHTTP Request، وفي حالتنا هنا هو بيبعت طلب انه يعرض الصفحة الرئيسية للـDomain ده وليكن Google مثلًا
وهنا Google بترد عليه بـHTML Content، عبارة عن HTML Elements، حبة لينكات لصور وملفات CSS وJavaScript وملفات تانية، ده غير عناصر الـHTML ذات نفسها
ولكن لحد دلوقتي ما زال المتصفح مش فاهم ايه اللي جاله ده، فـ يبدأ في عملية الـParsing، وهو ببساطة انه بيحاول يترجم الـHTML Content ده ويبني الـDOM Tree، ودي زي ما قولتلك فوق شجرة بتعبر عن عناصر الـHTML ومين ابن مين وهكذا
وهو بيعمل Parse للـDOM، بيبدأ يـCheck على وجود الـPreloaders، زي اللي اتكلمنا عنهم قبل كدة، زي الـDNS-Preload والـAsync Script Files وغيرهم (ممكن ترجع للبوستات القديمة)، ويبدأ ينقلهم لـThread تانية عشان مايعطلوش الـParsing، وفي الـThread الأساسية يكمل عملية الـDOM Building
خلاص المتصفح عمل الـDOM Tree وكله تمام؟ يبدأ بقى في بناء الـCSSOM اللي اتكلمنا عنها النهاردة بإختصار شديد، (أنصحك تبحث عنها)، وببساطة هنا هو بيحول الـCSS Rules لخريطة كدة يقدر الـBrowser يفهم من خلالها هو هيطبق الـStyle ده على ايه، يحدد الـParent والـChildren والـSibling وباقي العلاقات بين الـSelectors وبعضها
العملية دي سريعة جدًا ومش بتاخد وقت يذكر في معظم الأوقات، وبشكل عام تطبيق الـCSS Styles بياخد وقت أقل من الوقت اللي بياخده الـDNS Lookup اللي هو أساسًا بيتعمل في وقت لا يذكر!
بعد كدة المتصفح بيبدأ في عملية الـJS Compile ويكمل باقي عمليات الـRender اللي مش هنتكلم عنهم النهاردة، هسيبلك في أول كومنت لينك ممكن تعرف منه أكتر عن إزاي الـWeb Browser بيشتغل.
وكالعادة بس كدة، ده الموضوع ببساطة.
الجينيص
CSS Notes
الجينيص