الأعمال الداخلية لعملية العارض
هذا هو الجزء 3 من سلسلة مدوّنات من 4 أجزاء تتناول آلية عمل المتصفّحات. في السابق، تناولنا البنية متعددة العمليات وتدفق التنقل. في هذه المشاركة، سنلقي نظرة على ما يحدث داخل عملية العرض.
تؤثر عملية العارض في العديد من جوانب أداء الويب. نظرًا لوجود الكثير داخل عملية العرض، فإن هذه المشاركة ليست سوى نظرة عامة. للاطّلاع على مزيد من التفاصيل، يمكنك زيارة قسم "الأداء" في "أساسيات الويب" للاطّلاع على مزيد من الموارد.
تعالج عمليات العارض محتوى الويب
وعملية العرض مسؤولة عن كل ما يحدث داخل علامة التبويب. في عملية العرض، تعالج سلسلة التعليمات الرئيسية معظم الرموز التي ترسلها إلى المستخدم. أحيانًا تتم معالجة أجزاء من JavaScript بواسطة سلسلة محادثات عاملة إذا كنت تستخدم عامل ويب أو مشغّل خدمات. ويتم أيضًا تشغيل سلاسل التعليمات والسلاسل النقطية داخل عمليات العرض لعرض الصفحة بكفاءة وسلاسة.
تتمثل المهمة الأساسية لعملية العرض في تحويل HTML وCSS وJavaScript إلى صفحة ويب يمكن للمستخدم التفاعل معها.
التحليل
إنشاء نموذج العناصر في المستند (DOM)
عندما تتلقّى عملية العرض رسالة التزام خلال عملية التنقّل وتبدأ في تلقّي بيانات HTML، تبدأ سلسلة التعليمات الرئيسية في تحليل السلسلة النصية (HTML) وتحويلها إلى قسم حذف مفتاح (DOM).
يمثل نموذج العناصر في المستند (DOM) تمثيلاً داخليًا للصفحة في المتصفح إلى جانب بنية البيانات وواجهة برمجة التطبيقات التي يمكن لمطوِّر الويب التفاعل معها من خلال JavaScript.
يتم تحديد تحليل مستند HTML إلى عنصر DOM من خلال
معيار HTML. ربما لاحظت أن إضافة HTML إلى المتصفح
لا تؤدي إلى حدوث أي خطأ على الإطلاق. على سبيل المثال، يُعدّ عدم توفّر علامة الإغلاق </p> بمثابة HTML صالح. يتم التعامل مع الترميز غير الصحيح
مثل Hi! <b>I'm <i>Chrome</b>!</i> (علامة b يتم إغلاقها قبل العلامة i) كما لو كنت قد كتبت Hi! <b>I'm <i>Chrome</i></b><i>!</i>. وذلك لأنّ مواصفات HTML مصمّمة لمعالجة هذه الأخطاء بشكل أنيق. إذا كنت تتساءل عن كيفية تنفيذ هذه الإجراءات، يمكنك قراءة القسم
مقدمة حول معالجة الأخطاء والحالات الغريبة في المحلِّل اللغوي
في مواصفات HTML.
تحميل المورد الفرعي
يستخدم الموقع الإلكتروني عادةً موارد خارجية، مثل الصور وCSS وJavaScript. يجب تحميل هذه الملفات من
الشبكة أو ذاكرة التخزين المؤقت. يمكن أن تطلب سلسلة التعليمات الرئيسية واحدًا تلو الآخر عند العثور عليها
أثناء التحليل لإنشاء نموذج DOM، ولكن لتسريع عملية البحث، يتم تشغيل "أداة فحص التحميل المسبق" بشكل متزامن.
إذا كانت هناك عناصر مثل <img> أو <link> في مستند HTML، سيلقي الماسح الضوئي مسبقًا الضوء على الرموز التي أنشأها محلّل HTML ويرسل الطلبات إلى سلسلة محادثات الشبكة في عملية المتصفح.
يمكن أن تحظر JavaScript عملية التحليل
عندما يعثر محلّل HTML اللغوي على علامة <script>، يوقف عملية تحليل مستند HTML مؤقتًا، ويجب أن يحمِّل رمز JavaScript ويحلّله وينفّذه. فالسبب هو أنّ لغة JavaScript يمكنها تغيير شكل المستند باستخدام عناصر مثل document.write()، ما يؤدي إلى تغيير بنية DOM بأكملها (نظرة عامة حول نموذج التحليل في مواصفات HTML تحتوي على مخطّط بياني رائع). ولهذا السبب يجب أن ينتظر محلل HTML اللغوي تشغيل JavaScript قبل أن يتمكن من استئناف تحليل مستند HTML. إذا كنت مهتمًا بما يحدث في تنفيذ JavaScript، فإن فريق V8 سيتحدث عن هذا الموضوع ومشاركاته على المدونة.
يمكنك إدخال تلميح للمتصفِّح عن الطريقة التي تريد بها تحميل المراجع.
هناك العديد من الطرق التي يمكن لمطوّري الويب من خلالها إرسال تلميحات إلى المتصفح لتحميل الموارد بشكل جيد.
إذا كانت لغة JavaScript لا تستخدم السمة document.write()، يمكنك إضافة السمة async أو defer إلى العلامة <script>. بعد ذلك، يُحمِّل المتصفِّح رمز JavaScript ويشغِّله بشكلٍ غير متزامن ولا يحظر التحليل. يمكنك أيضًا استخدام وحدة JavaScript إذا كان ذلك مناسبًا. <link rel="preload"> هي طريقة لإعلام المتصفِّح بأنّ المورد مطلوب للتنقّل الحالي وأنّك تريد تنزيله في أقرب وقت ممكن. يمكنك الاطّلاع على مزيد من المعلومات حول هذا الموضوع في مقالة تحديد أولوية الموارد - الحصول على المتصفّح لمساعدتك.
احتساب النمط
لا يكفي امتلاك نموذج كائن المستند (DOM) لمعرفة الشكل الذي ستظهر به الصفحة، إذ يمكننا تصميم عناصر الصفحة في CSS. تحلل سلسلة التعليمات الرئيسية CSS وتحدد النمط المحسوب لكل عقدة DOM. وهذه معلومات عن نوع النمط الذي يتم تطبيقه على كل عنصر بناءً على محددات CSS. يمكنك الاطّلاع على هذه المعلومات في القسم computed ضمن "أدوات مطوري البرامج".
حتى إذا لم توفر أي CSS، فسيكون لكل عقدة DOM نمط محسوب. يتم عرض علامة <h1> بحجم أكبر من علامة <h2>، ويتم تحديد الهوامش لكل عنصر. وذلك لأن المتصفح يحتوي على
ورقة أنماط افتراضية. إذا كنت تريد معرفة الشكل التلقائي لصفحات الأنماط المتتالية (CSS) في Chrome،
يمكنك الاطّلاع على رمز المصدر من هنا.
التنسيق
الآن، تعرف عملية العارض بنية المستند والأنماط لكل عقدة، لكن هذا لا يكفي لعرض الصفحة. تخيل أنك تحاول وصف لوحة لصديقك عبر الهاتف. لا تعتبر عبارة "هناك دائرة حمراء كبيرة ومربع أزرق صغير" معلومات كافية حتى يعرف صديقك الشكل الذي ستبدو عليه اللوحة بالضبط.
التخطيط هو عملية إيجاد هندسة العناصر. ينتقل مؤشر الترابط الرئيسي عبر أنماط DOM والحوسبة
المحسوبة وينشئ شجرة تخطيط تحتوي على معلومات مثل الإحداثيات س ص وأحجام المربع الإحاطة. قد تكون شجرة التنسيق بنية مشابهة لشجرة نموذج العناصر في المستند (DOM) ولكنها تحتوي فقط على معلومات ذات صلة بما هو مرئي على الصفحة. إذا تم تطبيق display: none، لا يكون هذا العنصر جزءًا من شجرة التنسيق (ومع ذلك، يوجد عنصر visibility: hidden في شجرة التنسيق). وبالمثل، إذا تم تطبيق فئة زائفة تتضمّن محتوى مثل p::before{content:"Hi!"}، يتم تضمينها في شجرة التنسيق على الرغم من أنّ ذلك ليس في DOM.
يعد تحديد تخطيط الصفحة مهمة صعبة. حتى أبسط تخطيط للصفحة مثل تدفق الكتلة من أعلى إلى أسفل يجب أن يأخذ في الاعتبار حجم الخط ومكان فاصله لأن ذلك يؤثر على حجم الفقرة وشكلها؛ والذي يؤثر بعد ذلك على المكان الذي ينبغي أن تكون فيه الفقرة التالية.
يمكن لـ CSS جعل العنصر عائمًا على جانب واحد وقناع عنصر تجاوز السعة وتغيير اتجاهات الكتابة. يمكنك أن تتخيل أن مرحلة التخطيط هذه لها مهمة قوية. وفي Chrome، يعمل فريق كامل من المهندسين على هذا التنسيق. للاطّلاع على تفاصيل عن عملهم، يمكنك تسجيل بعض المحادثات من مؤتمر BlinkOn ومن المثير للاهتمام مشاهدتها.
طلاء
لا يزال امتلاك نموذج كائن المستند (DOM) والنمط والتنسيق غير كافٍ لعرض الصفحة. لنفترض أنك تحاول إعادة إنتاج لوحة. أنت تعرف حجم العناصر وشكلها وموقعها، ولكن لا يزال عليك الحكم على ترتيب ترسمها.
على سبيل المثال، قد يتم ضبط z-index لعناصر معيّنة، وفي هذه الحالة، سيؤدي الرسم بترتيب العناصر المكتوبة في HTML إلى عرض غير صحيح.
في خطوة الرسم هذه، تسير سلسلة التعليمات الرئيسية في شجرة التخطيط لإنشاء سجلات الرسم. سجل الطلاء هو ملاحظة لعملية الطلاء مثل "الخلفية أولاً، ثم النص، ثم المستطيل". إذا اعتمدت على العنصر <canvas> باستخدام JavaScript، قد تكون هذه العملية مألوفة لك.
إنّ تعديل مسار العرض مكلف.
أهم شيء يجب استيعابه في مسار العرض هو أنه في كل خطوة يتم استخدام نتيجة العملية السابقة لإنشاء بيانات جديدة. على سبيل المثال، إذا تغير شيء ما في شجرة التخطيط، فيجب إعادة إنشاء ترتيب الطلاء للأجزاء المتأثرة من المستند.
إذا كنت تقوم بتحريك عناصر، فيجب على المتصفح تشغيل هذه العمليات بين كل إطار. تقوم معظم شاشاتنا بتحديث الشاشة 60 مرة في الثانية (60 لقطة في الثانية)؛ ستظهر الرسوم المتحركة سلسة للعين البشرية عند تحريك الأشياء عبر الشاشة في كل إطار. ومع ذلك، إذا افتقدت الرسوم المتحركة الإطارات بينهما، فستظهر الصفحة "رديئة".
حتى إذا كانت عمليات العرض لديك تتماشى مع تحديث الشاشة، يتم تشغيل هذه العمليات الحسابية على سلسلة التعليمات الرئيسية، ما يعني أنه قد يتم حظرها عندما يشغّل التطبيق JavaScript.
يمكنك تقسيم عملية JavaScript إلى أجزاء صغيرة وجدولة تنفيذها على كل إطار باستخدام requestAnimationFrame(). لمزيد من المعلومات عن هذا الموضوع، يُرجى مراجعة تحسين تنفيذ JavaScript
. يمكنك أيضًا تشغيل JavaScript في Web Workers
لتجنُّب حظر سلسلة التعليمات الرئيسية.
تركيب
كيف ترسم صفحة؟
والآن بعد أن عرف المتصفح بنية المستند ونمط كل عنصر وهندسة الصفحة وترتيب الطلاء، كيف يرسم الصفحة؟ يسمى تحويل هذه المعلومات إلى وحدات بكسل على الشاشة بالبكسلة.
ربما تكون الطريقة البسيطة للتعامل مع هذا الأمر هي إجراء مسح نقطي داخل إطار العرض. إذا قام المستخدم بالتمرير في الصفحة، فقم بتحريك الإطار النقطي، واملأ الأجزاء المفقودة عن طريق إجراء المزيد من البكسلة. هذه هي الطريقة التي تعامل بها Chrome مع البكسلة عند طرحه لأول مرة. ومع ذلك، يشغل المتصفح الحديث عملية أكثر تعقيدًا تُعرف باسم "الإنشاء".
ما الذي يتم إنشاؤه؟
التركيب هو تقنية لفصل أجزاء من الصفحة إلى طبقات، وتحويلها إلى طبقات بشكل منفصل، وتركيبها كصفحة في سلسلة منفصلة تسمى "خياط المكون". إذا حدث التمرير، نظرًا لأن الطبقات قد تم تحويلها بالفعل، فكل ما عليك فعله هو تركيب إطار جديد. يمكن تنفيذ الرسوم المتحركة بنفس الطريقة عن طريق نقل الطبقات وتركيب إطار جديد.
يمكنك معرفة كيفية تقسيم موقعك الإلكتروني إلى طبقات في "أدوات مطوري البرامج" باستخدام لوحة الطبقات.
التقسيم إلى طبقات
لمعرفة العناصر التي يجب أن تكون فيها الطبقات، تمر سلسلة التعليمات الرئيسية
عبر شجرة التنسيق لإنشاء شجرة الطبقات (يُسمى هذا الجزء "تحديث شجرة الطبقات" في
لوحة أداء "أدوات مطوري البرامج"). إذا لم يتم عرض جزء من أجزاء معيّنة من الصفحة يجب أن تكون طبقة منفصلة (مثل القائمة الجانبية للانزلاق)، يمكنك عندئذٍ تلميح المتصفح باستخدام السمة will-change في CSS.
قد تميل إلى منح طبقات لكل عنصر، ولكن التجميع عبر عدد زائد من الطبقات قد يؤدي إلى التشغيل الأبطأ من بكسلة الأجزاء الصغيرة من الصفحة في كل إطار، لذا من الأهمية بمكان قياس أداء العرض للتطبيق الخاص بك. لمزيد من المعلومات عن الموضوع، راجِع الالتزام بالخصائص المكوّنة فقط وإدارة عدد الطبقات.
صورة نقطية ومركّبة خارج سلسلة التعليمات الرئيسية
بمجرد إنشاء شجرة الطبقات وتحديد أوامر الطلاء، تلتزم سلسلة التعليمات الرئيسية بهذه المعلومات في مؤشر المُنشئ. وبعد ذلك، يجمل مؤشر ترابط التركيب كل طبقة من الطبقات. يمكن أن تكون الطبقة كبيرة مثل طول الصفحة بالكامل، لذا فإن سلسلة التركيب تقسمها إلى أجزاء وترسل كل مربع إلى سلاسل نقطية. تعمل السلاسل النقطية على إجراء مسح نقطي لكل مربع وتخزينها في ذاكرة وحدة معالجة الرسومات.
يمكن لسلسلة محادثات المكون إعطاء الأولوية لسلاسل نقطية مختلفة بحيث يمكن تحويل الأشياء الموجودة داخل إطار العرض (أو القريبة) أولاً إلى نقطية. تحتوي الطبقة أيضًا على أجزاء متعددة لدرجات دقة مختلفة للتعامل مع أشياء مثل إجراء التكبير.
بعد بكسلة المربّعات، تجمع سلسلة المكوّنات معلومات المربّعات التي تُسمى رسم رباعي لإنشاء إطار مكوّن.
| ارسم فرقًا. | يحتوي على معلومات مثل مكان المربّع في الذاكرة ومكان إدراجه في الصفحة لرسم المربّع مع مراعاة تركيب الصفحة. |
| إطار المكوّن | مجموعة من رسومات الرسم الرباعية التي تمثل إطار صفحة. |
ويتم بعد ذلك إرسال إطار مكوّن إلى عملية المتصفح من خلال IPC. في هذه المرحلة، يمكن إضافة إطار مكوّن آخر من مؤشر ترابط واجهة المستخدم لتغيير واجهة مستخدم المتصفّح أو من عمليات العرض الأخرى للإضافات. ويتم إرسال هذه الإطارات إلى وحدة معالجة الرسومات لعرضها على الشاشة. إذا حدث حدث تمرير، فإن سلسلة التعليمات البرمجية تنشئ إطارًا آخر للمكون لإرساله إلى وحدة معالجة الرسومات.
تكمن فائدة الإنشاء في أنه يتم بدون تضمين سلسلة التعليمات الرئيسية. لا تحتاج سلسلة Compositor إلى الانتظار عند حساب النمط أو تنفيذ JavaScript. لهذا السبب يُعد إنشاء الصور المتحركة فقط الأفضل للحصول على أداء سلس. إذا احتاجت إلى حساب التخطيط أو الطلاء مرة أخرى، فيجب تضمين سلسلة التعليمات الرئيسية.
الخاتمة
في هذه المشاركة، تناولنا مسار العرض من التحليل إلى الإنشاء. نأمل أن تكون الآن قادرًا على قراءة المزيد حول تحسين الأداء لموقع ويب.
في المشاركة التالية والأخيرة من هذه السلسلة، سنلقي نظرة على سلسلة رسائل المكوّن بمزيد من التفاصيل ونرى ما يحدث عندما يتم إدخال بيانات المستخدم، مثل mouse move وclick.
هل استمتعت بالمشاركة؟ إذا كانت لديك أي أسئلة أو اقتراحات للمشاركة في المستقبل، تسرّني سماعها في قسم التعليقات أدناه أو عبر @kosamari على Twitter.