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

Adriana Jara

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

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

دالة CSS light-dark().

تتيح لك الدالة 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 متاحة لمساعدتك في تحديد أسباب تكدس سلسلة التعليمات الرئيسية الذي غالبًا ما يكون السبب في ضعف INP (مدى استجابة الصفحة لتفاعلات المستخدم)، وهو أحد مؤشرات أداء الويب الأساسية التي يقيس مدى استجابة الموقع الإلكتروني.

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

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

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

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

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

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

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

باستخدام Service Worker Static Route 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 لميزة "التخزين المؤقت للصفحات" في Chrome 123. يتيح هذا الإجراء لمالكي المواقع الإلكترونية جمع الأسباب في الحقل عن سبب تعذّر استخدام bfcache. يمكن لمالكي المواقع الإلكترونية استخدام هذه الميزة لتحسين استخدام ميزة "التخزين المؤقت للصفحات" التي تتيح التنقّل بسرعة أكبر في السجلّ.

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

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

محتوى إضافي للقراءة

يتناول هذا الدليل بعض الميزات الرئيسية فقط. تحقَّق من الروابط التالية للاطّلاع على التغييرات الإضافية في Chrome 123.

اشتراك

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

مرحبًا أدريانا جارا، وفور إطلاق Chrome 124، سأكون هنا لإخبارك بالجديد في Chrome.