الجديد في Chrome 103

Pete LePage

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

  • هناك رمز حالة HTTP 103 جديد يساعد المتصفّح في تحديد المحتوى الذي سيتم تحميله مسبقًا قبل أن تبدأ الصفحة في الوصول.
  • تتيح Local Font Access API لتطبيقات الويب إمكانية تعداد الخطوط المثبَّتة على جهاز كمبيوتر المستخدم واستخدامها.
  • AbortSignal.timeout() هي طريقة أسهل لتنفيذ المهلات على واجهات برمجة التطبيقات غير المتزامنة.
  • وهناك المزيد.

اسمي بيت ليب. لنتعمق أكثر ونتعرّف على الميزات الجديدة للمطوّرين في Chrome 103.

رمز حالة HTTP 103 103 - التلميحات الأولية

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

<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link href="cdn.example.com"
      rel="preconnect">

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

لنفترض أنّ المتصفّح يطلب صفحة، لكنّ الخادم يتطلّب بضع مئات ثوانٍ لإنشائها. وإلى أن يبدأ المتصفح في تلقي الصفحة، يجلس هناك وينتظر. ولكن إذا كان الخادم يعرف أنّ الصفحة ستحتاج دائمًا إلى مجموعة معيّنة من الموارد الفرعية، على سبيل المثال، ملف CSS وبعض JavaScript وبضع صور، يمكنه الاستجابة فورًا برمز حالة HTTP 103 الجديد "التعديلات المبكرة" وأن يطلب من المتصفح تحميل هذه الموارد الفرعية مسبقًا.

بعد ذلك، عندما ينشئ الخادم الصفحة، يمكنه إرسالها باستخدام استجابة HTTP 200 العادية. عند دخول الصفحة، بدأ المتصفح بالفعل في تحميل الموارد المطلوبة.

بما أنّ رمز حالة HTTP هذا جديد، يجب تحديثه على الخادم.

بدء استخدام النصائح المبكرة حول HTTP 103:

واجهة برمجة تطبيقات الوصول إلى الخطوط المحلية

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

تتيح واجهة برمجة التطبيقات Local Font Access API الجديدة لتطبيقات الويب إمكانية تعداد الخطوط المحلية على جهاز المستخدم، وتوفّر إمكانية الوصول إلى بيانات جدول الخطوط.

للحصول على قائمة بالخطوط المثبّتة على الجهاز، عليك أولاً طلب الإذن.

// Ask for permission to use the API
try {
  const status = await navigator.permissions.request({
    name: 'local-fonts',
  });
  if (status.state !== 'granted') {
    throw new Error('No Permission.');
  }
} catch (err) {
  if (err.name !== 'TypeError') {
    throw err;
  }
}

بعد ذلك، يمكنك الاتصال بـ window.queryLocalFonts(). تعرض صفيفًا من جميع الخطوط المثبتة على جهاز المستخدمين.

const opts = {};
const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

إذا كنت مهتمًا فقط بمجموعة فرعية من الخطوط، يمكنك فلترتها عن طريق إضافة مَعلمة postscriptNames.

const opts = {
  postscriptNames: [
    'Verdana',
    'Verdana-Bold',
    'Verdana-Italic',
  ],
};
const pickedFonts = await self.queryLocalFonts(opts);

يمكنك الاطلاع على مقالة توم استخدام أسلوب الخط المتقدم مع الخطوط المحلية على web.dev للحصول على التفاصيل الكاملة.

مهلات أسهل باستخدام AbortSignal.timeout()

في JavaScript، يتم استخدام AbortController وAbortSignal لإلغاء مكالمة غير متزامنة.

على سبيل المثال، عند تقديم طلب fetch()، يمكنك إنشاء AbortSignal وإرساله إلى fetch(). إذا أردت إلغاء fetch() قبل إرجاعه، تواصَل مع abort() على سبيل المثال AbortSignal. حتى هذه اللحظة، إذا أردت الإلغاء بعد مدة زمنية معيّنة، عليك لفّها في setTimeout().

const controller = new AbortController();
const signal = controller.signal;
const resp = fetch(url, { signal });

setTimeout(() => {
  // abort the fetch after 6 seconds
  controller.abort();
}, 6000);

وقد أصبح ذلك أسهل باستخدام طريقة timeout() ثابتة جديدة على AbortSignal. وتعرض كائن AbortSignal تم إيقافه تلقائيًا بعد مرور عدد معيّن من المللي ثانية. ما كان في السابق عبارة عن مجموعة سطور من التعليمات البرمجية، أصبح الآن مجرد سطر واحد.

const signal = AbortSignal.timeout(6000);
const resp = fetch(url, { signal });

إنّ AbortSignal.timeout() متوافق مع الإصدار 103 من Chrome، ويتوفّر في Firefox وSafari.

ومقاييس أخرى

بالطبع هناك المزيد.

  • يمكن الآن مشاركة تنسيق ملف الصورة avif باستخدام ميزة "المشاركة على الويب".
  • يتطابق Chromium الآن مع Firefox من خلال تنشيط popstate فورًا بعد إجراء تغييرات في عناوين URL. أصبح ترتيب الأحداث الآن: popstate ثم hashchange على كلتا المنصّتين.
  • وتوضّح لك ميزة Element.isVisible() ما إذا كان العنصر مرئيًا أم لا.

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

يتناول هذا فقط بعض النقاط الرئيسية. راجِع الروابط أدناه للاطّلاع على التغييرات الإضافية في الإصدار 103 من Chrome.

اشتراك

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

اسمي بيت ليب، وبعد إطلاق Chrome 104، سأكون هنا لإخبارك بالجديد في Chrome!