RenderingNG

الاستعداد للجيل القادم من محتوى الويب

Chris Harrelson

تُعدّ RenderingNG بنية عرض من الجيل التالي تتفوق بشكلٍ كبير على ما كان يحدث من قبل. تم إنشاء RenderingNG على مدار أكثر من ثماني سنوات ويمثل العمل الجماعي للعديد من مطوري Chromium المتخصصين. فهي تتيح لك إمكانات هائلة لإنشاء محتوى ويب تفاعلي وسريع وموثوق به وسريع الاستجابة.

RenderingNG

هنا، ستتعرف على ما أنشأناه ولماذا أنشأناه وكيف يعمل.

هدف نجم الشمال

يكمن الهدف الأهم الذي يحفّز RenderingNG في أنّ تنفيذ محرّك المتصفّح، وثراء واجهات برمجة التطبيقات للعرض، يجب ألا يكونا عاملين مشروطين لتجربة المستخدم على الويب.

لا داعي للقلق بشأن أخطاء المتصفّح التي تجعل الميزات غير موثوق بها أو تؤدي إلى تعطُّل عرض موقعك الإلكتروني.

يجب ألا تكون هناك منحدرات غامضة للأداء. كما يجب ألا تكون بحاجة إلى حل مشكلة عدم استخدام الميزات المضمنة.

من المفترض أن تنجح العملية.

ويشكّل RenderingNG خطوة كبيرة نحو هذا الهدف النجمي. قبل استخدام RenderingNG، كان بإمكاننا (وفعلنا ذلك) إضافة ميزات عرض وتحسين الأداء، ولكننا واجهنا صعوبة في جعل هذه الميزات موثوقة للمطوّرين، وكانت هناك العديد من الآثار المترتّبة على الأداء. والآن لدينا بنية تقليص العديد من هذه المشكلات بشكل منهجي، بالإضافة إلى إزالة حظر الميزات المتقدمة التي لم تكن قابلة للتنفيذ من قبل. إذ إنه:

• يتضمّن ميزات أساسية صلبة في مجموعات مختلفة من الأنظمة الأساسية والأجهزة وأنظمة التشغيل.
• تحقّق أداءً موثوقًا ويمكن توقُّعه.
• زيادة استخدام إمكانات الأجهزة (النواة ووحدة معالجة الرسومات ودرجة دقة الشاشة ومعدلات التحديث وواجهات برمجة التطبيقات النقطية منخفضة المستوى)
• يؤدي هذا الخيار العمل اللازم فقط لعرض المحتوى المرئي.
• يحتوي على دعم مدمج للتصميم المرئي الشائع والصور المتحركة وأنماط تصميم التفاعل.
• توفّر واجهات برمجة التطبيقات للمطوّرين لإدارة تكاليف العرض بسهولة.
• يوفر نقاط امتداد مسار العرض للوظائف الإضافية لمطوّري البرامج.
• تحسين كل المحتوى—HTML وCSS ولوحة الرسم الثنائية الأبعاد واللوحات الثلاثية الأبعاد والصور والفيديوهات والخطوط

المقارنة مع محركات عرض المتصفّح الأخرى

نفذت أيضًا Gecko وWebkit معظم الميزات الهندسية الموضّحة في مشاركات المدونات هذه، وفي بعض الحالات تمت إضافتها قبل Chromium.

فأي متصفح سريع وأكثر موثوقية يكون سببًا للاحتفال ويكون له تأثير حقيقي. الهدف النهائي هو تحسين المتوقع لجميع المتصفحات، حتى يتمكن المطورون من الاعتماد عليه.

هرم النجاح

فلسفتي هي أنّ النجاح يأتي نتيجة تحقيق الموثوقية أولاً، ثم الأداء القابل للتطوير، وأخيرًا القابلية للتوسّع.

وكما هو الحال مع هرم واقعي، يوفّر كل مستوى أساسًا متينًا بالضرورة للمستوى أعلاه.

الموثوقية

إذا كان من الممكن الحصول على تجارب مستخدم غنية ومعقدة، فأول شيء نحتاجه هو منصة قوية. يجب أن تعمل الميزات والأسس الأساسية بشكل صحيح، وأن تستمر في العمل بمرور الوقت. ومن المهم أيضًا أن تؤلّف هذه الميزات بطريقة جيدة وألّا تتضمّن سلوكًا أو أخطاءً غريبة.

لهذا السبب، تشكّل الموثوقية الجزء الأهم في RenderingNG. والموثوقية هي نتيجة الاختبار الجيد وحلقات الملاحظات عالية الجودة والمقاييس وأنماط تصميم البرامج.

لإعطائي فكرة عن مدى أهمية الموثوقية التي أعتقد أنها، قضينا معظم السنوات الثماني الماضية في التركيز على هذا الجزء فقط. أولاً، حصلنا على معرفة عميقة بالنظام من خلال التعلّم من تقارير الأخطاء التي تشير إلى نقاط الضعف وإصلاحها، وإعداد الاختبارات الشاملة، وفهم متطلبات الأداء للمواقع الإلكترونية والقيود المفروضة على أداء Chromium. ثم صممنا وطرحنا أنماط التصميم وهياكل البيانات الرئيسية بعناية وتدريجية. عندها فقط كنا مستعدين لإضافة عناصر أولية من الجيل التالي للتصميم سريع الاستجابة، وقابلية التوسع، وتخصيص العرض.

وهذا لا يعني أنه لم يتم إدخال أي تحسينات خلال ذلك الوقت في Chromium. في الواقع، العكس هو الصواب! شهدت تلك السنوات زيادة ثابتة ومستدامة في الموثوقية والأداء حيث أعدنا هيكلة الجهاز وطرحناه خطوة بخطوة.

الاختبار والمقاييس

وعلى مدار الأعوام الثمانية الماضية، أضفنا عشرات الآلاف من اختبارات الوحدة والأداء والتكامل. بالإضافة إلى ذلك، طوّرنا مقاييس شاملة تقيس عدة جوانب من سلوك العرض في Chromium ضمن الاختبار المحلي ومقاييس الأداء وعلى المواقع الإلكترونية الحقيقية مع مستخدمين وأجهزة حقيقية.

وبغض النظر عن مدى روعة RenderingNG (أو محرك عرض في متصفح آخر في هذا الشأن)، سيظل من الصعب تطويره على الويب إذا كان هناك الكثير من الأخطاء أو الاختلافات في السلوك بين المتصفحات. ولتحقيق ذلك، نعمل أيضًا على الاستفادة إلى أقصى حد من اختبارات منصة الويب. يتأكد كل من هذه الاختبارات من نمط استخدام نظام الويب الأساسي الذي يجب أن تهدف جميع المتصفحات إلى اجتيازه. نراقب أيضًا عن كثب مقاييس اجتياز المزيد من الاختبارات بمرور الوقت وزيادة التوافق الأساسي.

تُعد اختبارات النظام الأساسي للويب جهدًا تعاونيًا. على سبيل المثال، أضاف مهندسو Chromium حوالي% 10 فقط من إجمالي اختبارات WPT لميزات CSS؛ ويساهم موردو المتصفحات الآخرون والمساهمون المستقلون ومؤلفو المواصفات في الباقي. يتطلب الأمر قرية لتحسين شبكة الويب القابلة للتشغيل التفاعلي.

بدءًا من wpt.fyi/compat2021، سيتم قياس معدل اجتياز WPT للميزات الأساسية

أنماط تصميم البرامج الجيدة

ويكون تقديم برامج ذات جودة عالية بشكل موثوق به أسهل بكثير إذا كانت التعليمات البرمجية سهلة الفهم ومصمّمة بطريقة تقلّل من احتمال حدوث أخطاء. سيكون لدينا الكثير لقوله حول تصميم برنامج RenderingNG في مشاركات المدونة اللاحقة.

أداء قابل للتطور

يُعدّ تحقيق أداء رائع على مستوى السرعة والذاكرة واستخدام الطاقة ثاني أهم جانب في RenderingNG. نريد أن تكون التفاعلات مع جميع مواقع الويب سلسة وسريعة الاستجابة، ولكننا نريد ألا نضحى في استقرار الجهاز.

ولكن لا نريد فقط تحقيق أداء أفضل، بل نريد أيضًا أداء قابلاً للتطوير، وهو بنية تحقّق أداءً جيدًا بشكل موثوق على الأجهزة المنخفضة التطور والعالية التطور، وعلى مختلف الأنظمة الأساسية للتشغيل. أسمي هذا التوسع - مستفيدًا من كل ما يمكن للجهاز تحقيقه - ثم تقليصه - زيادة الكفاءة وتقليل الطلب على النظام عند الحاجة.

لتحقيق ذلك، احتجنا إلى الاستفادة إلى أقصى حد من التخزين المؤقت، وعزل الأداء، وتسريع أجهزة وحدة معالجة الرسومات. لنفكر في كل منها بالترتيب. ولجعل الأمر ملموسًا، لنفكر في كيفية مساهمة كل واحد منهم في أداء تفاعل مهم للغاية على صفحات الويب وهو: التمرير.

التخزين المؤقت

في منصة واجهة مستخدم ديناميكية وتفاعلية مثل الويب، يُعد التخزين المؤقت الوسيلة الأكثر أهمية لتحسين الأداء بشكل كبير. إنّ أكثر أنواع التخزين المؤقت شهرة في المتصفّح هو ذاكرة التخزين المؤقت HTTP، ولكن العرض يتضمّن أيضًا العديد من ذاكرات التخزين المؤقت. وأهم ذاكرة تخزين مؤقت للتمرير هي زخارف وحدة معالجة الرسومات وقوائم العرض المخزّنة مؤقتًا، والتي تتيح التمرير سريعًا للغاية مع تقليل استنزاف البطارية والعمل بشكل جيد على مجموعة متنوعة من الأجهزة.

يساعد التخزين المؤقت على عمر البطارية وعدد اللقطات في الثانية للصور المتحركة عند التمرير، ولكن الأهم من ذلك هو أنّه يزيل حظر عزل الأداء من سلسلة التعليمات الرئيسية.

عزل الأداء

في أجهزة الكمبيوتر المكتبية الحديثة، لا داعي للقلق أبدًا بشأن إبطاء تطبيقات الخلفية للتطبيق الذي تعمل عليه. ويرجع ذلك إلى تعدد المهام الاستباقي، وهو شكل من أشكال عزل الأداء: التأكد من أن المهام المستقلة لا تؤدي إلى إبطاء بعضها البعض.

أفضل مثال على عزل الأداء هو التمرير على الويب. حتى في المواقع الإلكترونية التي تحتوي على الكثير من لغة JavaScript البطيئة، يمكن أن يكون التمرير سلسًا جدًا، لأنه يتم تشغيله على سلسلة محادثات مختلفة لا تعتمد على سلسلة تعليمات JavaScript وتخطيط التنسيق. لقد بذلنا جهدًا كبيرًا في RenderingNG للتأكد من أنّ كل تمرير ممكن متسلسل، من خلال التخزين المؤقت الذي يتجاوز مجرد قائمة العرض إلى المواقف الأكثر تعقيدًا. وتشمل الأمثلة رموزًا برمجية لتمثيل العناصر ذات الموضع الثابت والثابت، وأدوات معالجة الأحداث السلبية، وعرض النص عالي الجودة.

تسريع وحدة معالجة الرسومات

تعمل وحدة معالجة الرسومات على إنشاء وحدات البكسل والرسم على الشاشة بشكل أسرع بكثير. وفي حالات كثيرة، يمكن رسم كل بكسل بالتوازي مع كل وحدة بكسل أخرى، ما ينتج عنه زيادة هائلة في السرعة. يعَدّ العرض النقطي لوحدة معالجة الرسومات من المكوّنات الرئيسية في RenderingNG والرسم في كل مكان. يستخدم ذلك وحدة معالجة الرسومات على جميع الأنظمة الأساسية وجميع الأجهزة لتسريع عملية عرض محتوى الويب وتحريكه. وتبرز أهمية ذلك على وجه الخصوص على الأجهزة ذات المواصفات المنخفضة أو المتطوّرة جدًا التي غالبًا ما تتضمّن وحدة معالجة رسومات أكثر فعالية مقارنةً بأجزاء الجهاز الأخرى.

القابلية للتوسّع: الأدوات المناسبة للوظيفة

بعد حصولنا على أداء موثوق وقابل للتطور، أصبحنا جاهزين الآن للاستناد إلى مجموعة كبيرة من الأدوات لمساعدة المطوّرين على توسيع الأجزاء المضمّنة من HTML وCSS وCanvas، وبطرق لا تتجاوز الموثوقية والأداء اللذَين تم اكتسابهما.

يتضمّن ذلك واجهات برمجة تطبيقات مضمَّنة لعرض JavaScript لحالات الاستخدام المتقدّمة للتصميم السريع الاستجابة، والعرض التدريجي، والسلاسة والاستجابة، والعرض المتسلسل.

أتاحت RenderingNG استخدام واجهات برمجة تطبيقات الويب المفتوحة التالية، والتي يدعمها Chromium، وكانت تعتبر في السابق غير قابلة للتنفيذ.

وتم تطوير جميع هذه الأدوات بمواصفات مفتوحة وتعاون مع شركاء الويب المفتوحين، وهم مهندسون في متصفحات وخبراء ومطوّري برامج آخرين. في مشاركات المدونة اللاحقة، سنتعمق في كل منها ونوضح كيف يتيح RenderingNG ذلك.

• content-visibility: تسمح للمواقع الإلكترونية بتجنُّب عرض المحتوى خارج الشاشة بسهولة، وعرض ذاكرة التخزين المؤقت لمشاهدات تطبيقات الصفحة الواحدة غير المعروضة حاليًا.
• OffscreenCanvas: السماح بعرض ملء الشاشة (كل من واجهة برمجة التطبيقات ثنائي الأبعاد للوحة الرسم وWebGL) على سلسلة خاصة به للحصول على أداء ممتاز وموثوق به ويشكّل هذا المشروع أيضًا معلمًا رئيسيًا آخر للويب، وهو أول واجهة برمجة تطبيقات على الويب تتيح JavaScript (أو WebAssembly) عرض مستند صفحة ويب واحد من سلاسل محادثات متعددة.
• طلبات البحث الخاصة بالحاويات: تسمح لمكون واحد بتصميم نفسه بشكل متجاوب مع مختلف الأجهزة، وإزالة الحظر عن مجموعة كاملة من مكوّنات الأجهزة الملحقة والتشغيل (ميزة تجريبية حاليًا).
• عزل المصادر: تسمح للمواقع الإلكترونية بتفعيل المزيد من عزل الأداء بين إطارات iframe.
• أدوات تلوين خارج السلسلة الرئيسية: توفّر للمطوّرين طريقة لتوسيع طريقة عرض العناصر، باستخدام رمز يتم تشغيله على سلسلة تعليمات المكوّنات.

بالإضافة إلى واجهات برمجة تطبيقات الويب الصريحة، أتاح لنا RenderingNG توفير العديد من "الميزات التلقائية" المهمة جدًا والتي تفيد جميع المواقع الإلكترونية:

• عزل المواقع الإلكترونية: تضع إطارات iframe من مصادر متعددة في عمليات وحدة المعالجة المركزية المختلفة، لتحسين مستوى الأمان وعزل الأداء.
• Vulkan وD3D12 وMetal: تستفيد من واجهات برمجة التطبيقات ذات المستوى الأدنى التي تستخدم وحدات معالجة الرسومات بكفاءة أكبر من OpenGL.
• المزيد من الصور المتحركة المركبة: SVG، لون الخلفية.

في ما يلي بعض الميزات القادمة الإضافية التي أطلقها RenderingNG والتي نتطلّع إلى حلها، وهي:

• الصور المتحركة المرتبطة بالتمرير:
• نموذج كائن مخفي مع إمكانية البحث عنه والوصول إليه
• عمليات انتقال العناصر المشتركة:
• تنسيق مخصّص:
• إنشاء سلسلة محادثات خارج السلسلة الرئيسية، وفك ارتباط سلاسل المحادثات والإنشاء

المشاريع الرئيسية التي تشكِّل RenderingNG

في ما يلي قائمة بالمشاريع الرئيسية ضمن RenderingNG.

CompositeAfterPaint

يفرّق CompositeAfterPaint بين النمط والتنسيق والطلاء، ما يسمح بتحسين الموثوقية والأداء الذي يمكن توقّعه، وزيادة سرعة معالجة البيانات، واستخدام ذاكرة أقل بدون التضحية بالأداء.

Year	مدى التقدُّم
2015	قوائم عرض السفن
2017	عملية إبطال صلاحية جديدة للشحن
2018	أشجار ممتلكات السفن، الجزء 1.
2019	أشجار ممتلكات السفن، الجزء 2.
2021	تم إكمال شحن المشروع.

LayoutNG

إعادة كتابة شاملة لجميع خوارزميات التنسيق للحصول على مستوى أعلى من الموثوقية والأداء المتوقع للتنبؤ.

اطّلِع على المزيد من المعلومات حول LayoutNG.

Year	مدى التقدُّم
2019	تدفق كتلة السفن
2020	استعراض عضلات السفينة، التعديل
2021	شحن كل المنتجات الأخرى

BlinkNG

لقد أعدنا ضبط الإعدادات وأزلنا محرك عرض Blink ليصبح مراحل مسار مشروع منفصلة. ويسمح ذلك بالتخزين المؤقت والموثوقية بشكل أفضل وميزات إعادة المشاركة أو العرض المتأخر، مثل إمكانية رؤية المحتوى وطلبات بحث الحاوية.

تسريع وحدة معالجة الرسومات على جميع الأجهزة

يوفر تسريع وحدة معالجة الرسومات تسريعًا هائلاً لمعظم المحتوى، لأنه يمكن معالجة كل وحدة بكسل بشكل متوازٍ. ويُعتبر أيضًا طريقة فعالة لتحسين الأداء على الأجهزة المنخفضة المواصفات التي تحتوي على وحدة معالجة رسومات.

Year	مدى التقدُّم
2014	دعم "لوحة الرسم". يتم الشحن وفقًا لمحتوى المشاركة على أجهزة Android.
2016	الشحن على Mac.
2017	يتم استخدام وحدة معالجة الرسومات في أكثر من% 60 من مشاهدات الصفحات على الأجهزة التي تعمل بنظام التشغيل Android.
2018	يمكنك الشحن على نظام التشغيل Windows وChromeOS وAndroid Go.
2019	المسح المجالي لوحدة معالجة الرسومات التي تتضمّن سلسلة محادثات
2020	شحن محتوى Android المتبقي.

التمرير المتسلسل والصور المتحركة وفك الترميز

جهد طويل الأمد لنقل جميع الرسوم المتحركة التي لا تحتوي على تنسيق، وفك ترميز الصور، خارج سلسلة التعليمات الرئيسية. إنها مستمرة.

Year	مدى التقدُّم
2011	الدعم الأولي للتمرير المتسلسل والرسوم المتحركة.
2015	ضغط الطبقة.
2016	التمرير الشامل العام
2017	فك ترميز الصور في سلسلة محادثات أداة الإنشاء
2018	الصور المتحركة في سلسلة محادثات المكوّنة
2020	تثبيت موضع ثابت دائمًا
2021	النسبة المئوية لتحويل الصور المتحركة، والرسوم المتحركة بتنسيق SVG.

تصور

عملية مركزية للرسم النقطي والرسم في Chromium تزيد من سرعة معالجة البيانات وتحسّن الذاكرة وتسمح باستخدام أفضل إمكانات الأجهزة. وله فوائد أخرى أقل وضوحًا للمطوّرين على الويب، لكنّها تظهر للمستخدمين كثيرًا، مثل إزالة حظر ميزة "عزل المواقع الإلكترونية" وفصل مسار العرض عن عرض واجهة مستخدم المتصفّح.

Year	مدى التقدُّم
2018	يتم شحن OOP-R على Android وMac وWindows.
2019	تم شحن OOP-D. يتم شحن OOP-R إلى كل مكان (باستثناء "لوحة الرسم"). يتم شحن SkiaRenderer إلى Linux.
2020	يتم شحن SkiaRenderer على نظامي التشغيل Windows وAndroid. تم شحن Vulkan على Android.
2021	تمّ شحن SkiaRenderer إلى أجهزة Mac (وقريبًا على ChromeOS).

تعريفات المصطلحات في الرسم البياني أعلاه:

OOP-D

مكوّن العرض خارج المعالجة. إن إنشاء العرض هو نفس نوع نشاط مكوّن نظام التشغيل. ويعني "خارج المعالجة" القيام بذلك في عملية التصور بدلاً من عملية عرض صفحة الويب أو عملية واجهة المستخدم في المتصفح.

OOP-R

الصورة النقطية خارج المعالجة. تعمل الصور النقطية على تحويل قوائم العرض إلى وحدات بكسل. وخارج المعالجة، يعني تنفيذها ضمن عملية التصور بدلاً من عملية عرض صفحة الويب.

SkiaRenderer

تطبيق جديد لأداة إنشاء شاشة العرض يمكن أن يدعم تنفيذ مجموعة مختلفة من واجهات برمجة التطبيقات الأساسية المختلفة لوحدة معالجة الرسومات، مثل Vulkan أو D3D12 أو Metal.

عرض اللوحة المتسلسلة والمسرَّعة

هذا هو المشروع الذي جعل OffscreenCanvas ممكنًا.

Year	مدى التقدُّم
2018	سفينة OffscreenCanvas.
2019	إرسال ImageBitmapRenderingContext.
2021	سفينة OOP-R

VideoNG

تهدف VideoNG إلى توفير تشغيل فيديو بشكل فعّال وموثوق وعالي الجودة على الويب.

Year	مدى التقدُّم
2014	تم تقديم إطار عمل العرض المستند إلى Mojo.
2015	تم شحن Project Butter وتراكبات الفيديو لتوفير عرض أكثر سلاسة للفيديوهات.
2016	تم شحن مسارات فك الترميز والعرض الموحّدة لأجهزة Android والكمبيوتر المكتبي.
2017	تم شحن HDR وعرض الفيديو بتصحيح الألوان.
2018	تم شحن مسار فك ترميز الفيديوهات المستند إلى Mojo.
2019	تم تحميل مسار عرض الفيديوهات المستندة إلى سطح المكتب.
2021	تم شحن إمكانية عرض المحتوى المحمي بدقة 4K على نظام التشغيل ChromeOS.

تعريفات المصطلحات في الرسم البياني أعلاه:

موجو

نظام IPC من الجيل التالي لمتصفِّح Chromium

مساحات العرض

مفهوم يشكِّل جزءًا من تصميم مشروع Viz.

---

الرسوم التوضيحية من قبل "أونا كرافيتس".