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

Una Kravets

Aleks Totic

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

جهود TablesNG

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

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

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

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

position: sticky في الصفوف

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

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

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

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

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

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

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

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

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

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

إعادة بناء الويب

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

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

ترقَّب المزيد من المعلومات حول هذه التحسينات وغيرها.