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، measuring pass rate of WPTs for core features

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

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

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

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

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

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

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

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

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

عزل الأداء

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

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

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

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

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

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

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

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

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

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

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

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

تشمل الميزات الإضافية القادمة التي تمّت إتاحتها من خلال RenderingNG ما يلي:

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

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

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

CompositeAfterPaint

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

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

LayoutNG

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

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

سنة	مستوى التقدّم
2019	مسار حظر الشحن
2020	شحن مرن، تعديل.
2021	شحن كل الطلبات الأخرى

BlinkNG

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

ميزة "تسريع وحدة معالجة الرسومات" في كل مكان

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

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

الانتقال إلى أسفل السلسلة والصور المتحركة وفك التشفير

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

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

Viz

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

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

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

OOP-D

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

OOP-R

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

SkiaRenderer

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

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

هذا هو المشروع الذي أتاح استخدام OffscreenCanvas.

سنة	مستوى التقدّم
2018	أرسِل OffscreenCanvas.
2019	أرسِل ImageBitmapRenderingContext.
2021	شحن OOP-R

VideoNG

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

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

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

Mojo

نظام فرعي للتواصل بين العمليات من الجيل التالي في Chromium

مساحات العرض

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

---

صور توضيحية من إنشاء "أونا كرافيتز"