الميزات الجديدة في 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

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

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

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

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

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

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

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

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

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

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

وغير ذلك

بالطبع هناك الكثير.

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

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

  • سيتم طرح notRestoredReasons API لـ bfcache من 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 على YouTube، وستتلقى إشعارًا عبر البريد الإلكتروني عندما ننشر فيديو جديدًا.

مرحبًا أدريانا جارا، وفور طرح Chrome 124، سأكون على أتمّ استعداد لإخبارك بالميزات الجديدة في Chrome.