أهم شيء بالنسبة لمطور Frontend هو وحدة عرض المستعرض ، والتي تُعرف أيضًا باسم Rendering Engine (يشار إليها فيما يلي باسم RE).
في هذه المقالة ، أرغب في أخذ صفحة بسيطة وتصفح جميع الخطوات مع RE من استلام البايت الأول لرسم المحتوى على الشاشة. كما هو الحال دائمًا ، سأستخدم متصفح Chrome.
أولاً ، دعونا نلقي نظرة على الوحدات الأخرى التي يتكون منها المستعرض ، من أجل فهم ما تتفاعل به RE.
النظر في المخطط:
الشكل 1واجهة المستخدم ، واجهة المستخدم (المشار إليها فيما يلي باسم UI) - واجهة برمجة تطبيقات للمتصفح الخارجي للمستخدم: شريط العناوين ، والتنقل ، والقائمة ، والإشارات المرجعية ، و "تحديث" الأزرار و "الصفحة الرئيسية".
تعد آلية المستعرض ، وهي Browser Engine (المشار إليها فيما يلي باسم BE) ، طبقة بين واجهة المستخدم ووحدة العرض.
عرض وحدة محرك العرض . سنقوم بتحليلها بمزيد من التفصيل في وقت لاحق.
مكونات الشبكة ، الشبكة هي المسؤولة عن طلبات الشبكة. RE يتلقى البيانات من الشبكة. يتم استلام البيانات في أجزاء بسرعة 8 كيلوبايت ولا تنتظر الطاقة المتجددة حتى وصول جميع البيانات ، وتبدأ في معالجتها فور وصولها.
وحدة JS Interpreter هي المسؤولة عن تفسير البرنامج النصي وتنفيذه.
يستخدم
واجهة المستخدم الخلفية لعرض العناصر الرسومية الأساسية والحاجيات ، مثل النوافذ ومربعات التحرير والسرد. مثال بسيط على تنبيه أو نافذة سريعة.
مخزن البيانات هو ملف تعريف الارتباط ، indexDB ، ومتاجر المتصفح الأخرى.
الآن وبعد أن عرفنا على مستوى أساسي ما يتكون المستعرض ، يمكننا الانتقال إلى المكون الذي يهمنا - محرك التقديم.
من الأسهل والأسرع الفهم بمثال محدد ، لذلك دعونا نلقي صفحة html بسيطة مع ملف css و js خارجي واحد (البرنامج النصي مرتبط بسمة async ، ثم سنحلل السبب). ودعونا نرى كيف تقوم RE بمعالجتها والخطوات التي يتم تنفيذها قبل أن نرى المحتوى الذي نحتاجه على الشاشة.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./style.css"></link> <title>Document</title> </head> <body> <div>Hello Habr!</div> <div>I'am Rendering Engine</div> <script async src="./script.js"></script> </body> </html>
(function() { window.addEventListener('load', () => { console.log('all resources were loaded'); }); })();
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Helvetica, sans-serif; line-height: 1.5; background-color: #9BD4F4; padding: 16px; }
للقيام بذلك ، انتقل إلى Chrome DevTools ، افتح علامة تبويب perfomance وابدأ العملية. بعد إعادة تحميل الصفحة وتحليل ما حدث ، نلاحظ الصورة التالية:
الشكل 2في علامة التبويب "الشبكة" - تسلسل تنزيل البيانات عبر الشبكة (المربع الأزرق - index.html).
في علامة التبويب توقيت ، هناك علامات عند وقوع أحداث DCL (DOM Content Loaded ، FP - أول الطلاء ذي المحتوى ، FMP - أول الطلاء ذي مغزى ، L - load). دعنا ننظر إلى ما هذه الأحداث.
DOMContentLoaded - قام المستعرض بتحميل HTML ،
وتحليله وإنشاء شجرة DOM. يتم تشغيل هذا الحدث على المستند ، ويمكنك الاشتراك فيه بسهولة والعمل مع DOM عبر JavaScript (في البرنامج النصي الخاص بنا ، لن نتمكن من الاشتراك في الحدث DOMContentLoaded ، نظرًا لأنه حدث قبل تحليل البرنامج النصي ، راجع
الشكل ).
أيضًا ، يحتوي DOMContentLoaded على عدة فروق دقيقة:
- إذا كان البرنامج النصي متصلاً بدون علامات مزامنة / تأجيل (بشكل متزامن) ، فسيحظر تحليل HTML. ومع ذلك ، استخدمت المتصفحات مؤخرًا تحليلات المضاربة ، وفي مثل هذه الحالات ، ما زالوا يقومون بتنزيل هذا البرنامج النصي مقدمًا ويقومون بالتحليل. هذا لا يؤثر على هيكل شجرة DOM ، لكنه يسمح لك بتقليل وقت العمل في RE. يوضح الشكل أدناه كيف يزيد وقت DCL وجميع أحداث التجسيد الأخرى مع اتصال البرنامج النصي المتزامن
- يمكن التحايل على قفل التوزيع (حسب تفكيرك) بسمات المزامنة / التأجيل ، والتي تسمح لك بمتابعة تحليل HTML دون انتظار تنزيل البرنامج النصي وتنفيذه
- أيضًا ، قد يتم تأخير حدث DCL نظرًا لأنماط التحميل. أثناء تنفيذ البرنامج النصي ، يمكن أن يرى المتصفح أننا نريد الوصول إلى نمط العنصر من خلال JavaScript. وسيتم حظر هذا البرنامج النصي بشرط أن يتم تحليل أنماط هذا العنصر أو تحميلها حاليًا
- أيضًا في Chrome ، على سبيل المثال ، على DCL ، يتم إكمال النماذج تلقائيًا.
الشكل 3الطلاء الأول - عرض المستعرض أول بكسل على الصفحة.
أول الطلاء المضمون - قام المستعرض بعرض المحتوى الأول على الصفحة.
أول دلالة ذات مغزى - يتم إطلاق الحدث بعد أن يقرر RE أن المحتوى المقدم قد يكون مفيدًا للمستخدم.
قم بتحميل الصفحة بأكملها والموارد التي يتم تحميلها ، بما في ذلك iframe.
حول FP ، FCP ، FMP مكتوب بشكل جيد في الوثائق الرسمية لـ
Google للمطورين .
الآن وقد اكتشفنا الأحداث التي وقعت ، يمكننا أن نذهب إلى شجرة النداء (انظر
الشكل 1 ) ونحلل بمزيد من التفصيل متى ولماذا تحدث هذه الأحداث.
تحليل HTML - تحليل HTML. يمكنك كتابة مقال منفصل حول هذا الموضوع. والأفضل من ذلك ، اقرأ
المواصفات ، نحتاج فقط أن نفهم أن المستعرض المستند إلى HTML ينشئ نموذج كائن المستند - DOM. وعندما يكون جاهزًا ولم يعد بإمكانه التأثير عليه ، فإنه يطلق الحدث DOMContentLoaded.
الطبقات المركبة هي مجموعة من العناصر المرئية من مصادر منفصلة إلى صور مفردة لخلق وهم بأن كل هذه العناصر هي أجزاء من نفس المشهد.
إعادة حساب الأسلوب. أي تغييرات تطرأ على DOM ، سواء أكانت تضيف أو تزيل عناصر ، وتغير السمات ، أو الطبقات ، أو تستخدم أدوات الرسوم المتحركة ، تجعل المستعرض يعيد حساب أنماط العناصر ، وفي كثير من الحالات ، تخطيط الصفحة بأكملها أو أجزاء منها. هذه العملية تسمى حساب النمط.
جوجل للمطورينتحليل نمط ورقة. إذا ، بعد التحليل اللغوي ، ترى RE أن HTML مُمكّن ، فإنها تبدأ في التنزيل والتحليل مقدمًا. بعد التحليل اللغوي ، تقوم RE بإنشاء نموذج كائن CSS ، نموذج كائن CSS.
بعد ذلك تأتي مرحلة المرفقات ، حيث تقوم RE بتعيين CSS على OM و DOM ، ونحصل على Render Tree.
تحديث شجرة الطبقة (تخطيط) - تخطيط شجرة طبقة أو مجرد تخطيط. بعد أن قمنا بمطابقة CSS OM و DOM ، يمكننا معرفة موقع العناصر وأحجامها.
في أغلب الأحيان ، لا يمكن أن تؤثر العناصر التي تنخفض في الدفق على موضع العناصر أعلاه ، لذلك يتم تنفيذ التخطيط في أغلب الأحيان بالتتابع - من أعلى إلى أسفل ومن اليسار إلى اليمين. لذلك ، يوفر معيار HTML نموذج دفق لتخطيط المستند.
الطلاء - تقديم المحتوى إلى الشاشة. وفقط بعد كل هذه الخطوات نرى محتوى الموقع على الشاشة: د
فيما يلي ملخص موجز لجميع الخطوات في RE:
الشكل 4نحن نلخص:
تأتي البيانات في RE من وحدة الشبكة على دفعات. عند تلقي هذه البيانات ، تبدأ RE في العمل معها ، وهي تحليل HTML.
عندما يرى RE أنه يوجد مورد خارجي في HTML ، يتحدث عن ذلك إلى الشبكة ، ويبدأ في تنزيله ثم يعيده إلى RE مرة أخرى.
إن تلبية علامة <script> وفقًا لمعيار RE يتوقف عن التحليل وينتظر تنزيل هذا البرنامج النصي وتنفيذه ، وعندها فقط يستمر تحليل شجرة DOM وبناءها. يتم حل هذا بواسطة سمات المتزامن / تأجيل. يمكنك قراءة المزيد حول اختلافاتهم
هنا ، والشيء الرئيسي هو فهم أنها تجعل من الممكن متابعة تحليل HTML دون انتظار معالجة النصوص.
أيضًا ، يمكن للمتصفحات (في حالتنا ، Chrome) حظر تنفيذ البرنامج النصي إذا كان يحاول العمل (عبر JavaScript) باستخدام css للعنصر الذي تتم معالجة أنماطه حاليًا.
بعد أن تتفهم RE أن جميع البرامج النصية المتزامنة قد تم تنزيلها وعملها ، يتم تحليل HTML تمامًا ولم يعد أي شيء يزعجنا بعد الآن ، بل يثير الحدث DOMContentLoaded ، ونحصل على كائن مستند # في المتصفح يمكننا العمل معه.
بعد ذلك ، بعد إكمال تحليل CSS وإنشاء نموذج كائن CSS ، تحدث مرحلة المرفقات ، حيث تم بناء Render Tree ويتم التخطيط (تخطيط أحجام ومواضع القطع). حسنا ، بعد التخطيط هناك رسم على الشاشة - الرسام. محرك التقديم يقطع شوطًا طويلاً حتى يتسنى لك ولأرى هذا:
الشكل 5هذا كل شئ!
آمل أن يكون هذا المقال مفيدًا لك وأن تفهم الآن كيف يعمل محرك التقديم.
وداعا :) ونراكم قريبا. إذا أعجبك ذلك ، فأعجبني واشترك في قناتي :)