الميزات الجديدة في 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) (Interaction to Next Paint)، وهو أحد مؤشرات Core Web Vitals التي تقيس استجابة الموقع الإلكتروني.

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

  • سيتم طرح notRestoredReasons API لميزة "التخزين المؤقت للصفحات" اعتبارًا من الإصدار 123 من Chrome. يتيح ذلك لمالكي المواقع الإلكترونية جمع الأسباب في الحقل التي أدّت إلى تعذّر استخدام bfcache. يمكن لمالكي المواقع الإلكترونية استخدام هذا الإجراء لتحسين استخدام ميزة "التخزين المؤقت للصفحات" (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.