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

Pete LePage

في ما يلي أهم ميزات Chrome 124:

هل تريد الاستماع إلى القائمة الكاملة؟ راجِع ملاحظات إصدار Chrome 124.

استخدام تعريف shadow DOM في JavaScript

هناك اثنان من واجهات برمجة التطبيقات الجديدة يتيحان استخدام shadow DOM الإعلامي من JavaScript.

إنّ السمة setHTMLUnsafe() تشبه innerHTML، وتتيح لك ضبط رمز HTML الداخلي للعنصر على السلسلة المتوفّرة. من المفيد أن يكون ذلك مفيدًا عندما يكون لديك رمز HTML يتضمّن معرّف shadow DOM، مثل هذا.

<my-custom-element>
  <template shadowrootmode="open">
    <style>
      :host {
        display: block;
        color: yellow;
      }
    </style>
    Hello, <slot></slot>
  </template>
</my-custom-element>

إذا استخدمت innerHTML فقط، لن يحلّله المتصفّح بشكل صحيح، ولن يتوفّر shadow DOM. ولكن باستخدام setHTMLUnsafe()، يتم إنشاء shadow DOM، ويتم تحليل العنصر على النحو المتوقَّع.

const section = document.createElement("section");
section.setHTMLUnsafe(`<my-custom-element>...</my-custom-element>`);

واجهة برمجة التطبيقات الأخرى هي parseHTMLUnsafe()، وهي تعمل تمامًا مثل DOMParser.parseFromString().

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

وأخيرًا، يتم دعم كل من واجهتي برمجة التطبيقات هذتين بالفعل في أحدث إصدار من Firefox وSafari!

واجهة برمجة تطبيقات WebSocket Stream

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

ولكن ماذا لو وصلت البيانات بشكل أسرع مما يمكنك التعامل معها؟

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

وتمنحك WebSocket Stream API إمكانية بث البيانات ومقابس الويب، ما يعني أنه يمكن تطبيق ضغط البيانات على شاشة الرجوع بدون أي تكلفة إضافية.

ابدأ بإنشاء WebSocketStream جديد وتمرير عنوان URL لخادم WebSocket.

const wss = new WebSocketStream(WSS_URL);
const {readable, writable} = await wss.opened;
const reader = readable.getReader();
const writer = writable.getWriter();

while (true) {
  const {value, done} = await reader.read();
  if (done) {
    break;
  }
  const result = await process(value);
  await writer.write(result);
}

بعد ذلك، انتظِر حتى يتم فتح الاتصال، ما يؤدي إلى ظهور ReadableStream وWritableStream. من خلال استدعاء طريقة ReadableStream.getReader()، ستحصل على ReadableStreamDefaultReader يمكنك بعد ذلك read() الاطّلاع على بياناته حتى انتهاء البث.

لكتابة البيانات، يجب استدعاء طريقة WritableStream.getWriter() التي تمنحك WritableStreamDefaultWriter، ويمكنك بعد ذلك write() إرسال البيانات إليها.

عرض التحسينات المتعلّقة بعمليات النقل

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

يتم تنشيط الحدث pageswap على كائن نافذة المستند عندما يستبدل عنصر التنقّل المستند بمستند جديد.

document.addEventListener("pageswap", event => {
  if (!event.viewTransition) {
     return;
  }
});

وتتيح لك ميزة حظر عرض المستندات حظر عرض المستند حتى يتم تحليل المحتوى المهم، ما يضمن عرض محتوى متناسق أولاً على جميع المتصفحات.

ومقاييس أخرى

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

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

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

اشتراك

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

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