شركة TablesNG تحلّ 72 خطأ في Chromium لتحسين إمكانية التشغيل التفاعلي

Una Kravets

Aleks Totic

تم إطلاق TablesNG في الإصدار 91 من Chromium لإصلاح الكثير من الأخطاء التي كانت جزءًا من النظام الأساسي للويب لسنوات. ستؤدي هذه التعديلات إلى تحسين توافق المتصفّحات كجزء من جهدنا المبذول في إطار حملة #Compat2021، وتحسين استخدام الجداول على منصّة الويب بشكل عام. تشمل بعض المشاكل التي حصلت على أكبر عدد من التقييمات بنجمة position: sticky في الصفوف، الأشكال الهندسية للوحدات الفرعية للبكسل، وتصغير الحدود بشكل صحيح.

جهد TablesNG

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

تمت إضافة الجداول إلى HTML في عام 1994، ثم تم استخدامها كالطريقة الأساسية لإنشاء تنسيقات صفحات معقّدة لعدة سنوات. لا تزال هذه الصفحات متوفّرة على الويب، على الرغم من أنّ الاستخدام الحديث لها هو بشكل عام لعرض البيانات في جداول. ومع ذلك، هناك اختلافات كبيرة في سلوك الجدول على مستوى المتصفّحات، وكثير منها ناتج عن عدم اكتمال مواصفات الجداول وعدم توفّر تفاصيل فيها. تم أيضًا تنفيذ الجداول في المتصفّحات قبل العديد من ميزات CSS: أوضاع الكتابة العمودية وposition:relative وbox-sizing وحاويات المربّعات المرنة وغير ذلك. وبالتالي، كان استخدام العديد من هذه الميزات غير متسق.

تم وضع المواصفة الجديدة، وهي CSS Table Module Level 3، بعد أن أعاد Edge تنفيذ الجداول في عام 2018. إن TablesNG هو جهد لإعادة هندسة الجداول لا يهدف فقط إلى اتباع هذه المواصفات الجديدة، ولكن أيضًا إلى إصلاح الكثير من التناقضات في الجداول طوال العملية. في ما يلي بعض التغييرات الأكثر وضوحًا التي نتجت عن ذلك:

• تفعيل وضع العناصر في مواضع ثابتة في الصفوف للجداول الطويلة التي يمكن التمرير فيها
• إصلاح المحاذاة باستخدام الهندسة الفرعية للبكسل وحدود الجدول
• تحسين عملية الرسم للخلفيات والحدود

position: sticky صف

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

السبب في ظهور هذا الخطأ لفترة طويلة هو أنّه تم تحديد position: sticky بعد ظهور جداول HTML. قبل هذا الإصلاح، كان يتم فقط تحويل العناوين ذات position: sticky المقصودة إلى position: static، ولكن يمكنك الآن استخدام position: sticky في أي مكان في الجداول: على العناوين (<thead>) أو تصنيفات المحور العمودي.

تحسين رسم الحدود والخلفية

يعود أحد أقدم الأخطاء في الجدول إلى أيلول (سبتمبر) 2008. تم تقديم هذا الطلب تقريبًا بعد طرح Chrome مباشرةً، ولم يكن بإمكاننا إصلاحه مطلقًا بسبب بنية الجدول القديمة. تحيط المشكلة بطلاء الجدول والحدود المطوية.

طريقة رسم الجداول، بترتيب z-index، هي: الخلايا > الصفوف > الأقسام > الجداول. ثم تُرسم حسب الترتيب الذي تظهر فيه في DOM (نموذج كائن المستند)، على الرغم من أن الخلايا نفسها بترتيب DOM العكسي، حيث تكون الخلية الأولى في الجدول هي في الأعلى.

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

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

تم إصلاح هذا الخطأ الآن في Chromium وFirefox.

هندسة وحدات البكسل الفرعية (محاذاة الجدول)

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

إعادة تصميم الويب

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

• LayoutNG: إعادة كتابة جميع خوارزميات التنسيق من الأساس لتحسين الموثوقية بشكل كبير وتحقيق أداء أكثر قابلية للتنبؤ
• ‫BlinkNG: عملية تنظيف منهجية و إعادة صياغة لمحرك عرض Blink إلى مراحل مفصَّلة بدقة في مسار الإرسال يتيح ذلك تحسين ميزة التخزين المؤقت وزيادة الموثوقية وتوفير ميزات إعادة الدخول / العرض المتأخر، مثل مستوى ظهور المحتوى وطلبات البحث في الحاوية.
• GPU Raster في كل مكان: جهد طويل المدى لطرح المسح المجالي لوحدة GPU على جميع الأنظمة الأساسية، كلما أمكن ذلك.
• التمرير والرسوم المتحرّكة المُسلسلة: جهد طويل الأمد لنقل جميع عمليات التمرير و الرسوم المتحرّكة غير المؤثرة في التخطيط إلى سلسلة المكوّن.

يُرجى متابعتنا لمعرفة المزيد من المعلومات حول هذه التحسينات وغيرها.