الميزات الجديدة في Chrome 123

Adriana Jara

في ما يلي ما تحتاج إلى معرفته:

اسمي "أدريانا جارا". لنلقِ نظرة على الميزات الجديدة للمطوّرين في الإصدار 123 من Chrome.

light-dark() دالة CSS.

تتيح لك الدالة light-dark() في CSS إنشاء ألوان تتلاءم مع تفضيل المستخدم للوضع الفاتح أو الداكن. استخدِم الدالة light-dark() لتحديد قيمتَي لون مختلفتَين ضمن سمة CSS واحدة.

سيختار المتصفّح تلقائيًا اللون المناسب استنادًا إلى قيمة color-scheme المحسوبة للعنصر. على سبيل المثال، باستخدام ملف CSS التالي:

html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}
  • إذا اختار المستخدم مظهرًا فاتحًا، سيكون للعنصر خلفية خضراء ليمونيّة.
  • إذا اختار المستخدم مظهرًا داكنًا، سيكون للعنصر خلفية خضراء.

Long Animation Frames API

تتوفّر واجهة Long Animation Frames API لمساعدتك في معرفة أسباب ازدحام سلسلة التعليمات الرئيسية التي غالبًا ما تؤدي إلى سوء INP (مدى استجابة الصفحة لتفاعلات المستخدم) وهو أحد مؤشرات أداء الويب الأساسية التي تقيس مدى استجابة الموقع الإلكتروني.

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

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

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

observer.observe({ type: 'long-animation-frame', buffered: true });

واجهة برمجة تطبيقات التوجيه الثابت لمشغّل الخدمات

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

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

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

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

وغير ذلك

بالطبع، هناك الكثير من الميزات الأخرى.

  • يمكنك تقديم صفحات مخصّصة استنادًا إلى المكان الذي تنقّل منه المستخدم باستخدام واجهة NavigationActivation.

  • يتوافق Chrome الآن مع Zstandard (zstd). يساعد Content-Encoding هذا في تحميل الصفحات بشكل أسرع واستخدام معدل نقل بيانات أقل وقضاء وقت أقل ووحدة معالجة مركزية (CPU) وتشغيل ضغط على الخوادم، ما يؤدي إلى تقليل تكاليف الخادم.

  • سيتم طرح notRestoredReasons API لميزة "التخزين المؤقت للصفحات" اعتبارًا من الإصدار 123 من Chrome. يتيح ذلك لمالكي المواقع الإلكترونية جمع الأسباب في الحقل التي أدّت إلى تعذّر استخدام bfcache. يمكن لمالكي المواقع الإلكترونية استخدام هذه الميزة لتحسين استخدام ميزة "التخزين المؤقت للصفحات" التي تتيح التنقّل بشكلٍ أسرع في السجلّ.

  • تسمح لك قيمة picture-in-picture الخاصة بالعنصر display-mode بكتابة قواعد CSS محدّدة لا تنطبق إلا عند عرض تطبيق الويب في وضع "صورة في صورة". على سبيل المثال:

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

مراجع إضافية

لا يشمل ذلك سوى بعض النقاط الرئيسية. يمكنك الاطّلاع على الروابط التالية للاطّلاع على التغييرات الإضافية في الإصدار 123 من Chrome.

اشتراك

للاطّلاع على آخر الأخبار، يمكنك الاشتراك في قناة YouTube الخاصة بمطوّري Chrome، وستتلقّى إشعارًا عبر البريد الإلكتروني عند نشر فيديو جديد.

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