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

Pete LePage

في ما يلي أهم الميزات في الإصدار 124 من Chrome:

هل تريد الاطّلاع على التفاصيل الكاملة؟ اطّلِع على ملاحظات إصدار 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 فقط، لن يحلّل المتصفّح العنصر بشكل صحيح، ولن يكون هناك أي عنصر DOM مظلّل. ولكن باستخدام setHTMLUnsafe()، يتم إنشاء shadow DOM ويتم تحليل العنصر على النحو المتوقّع.

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

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

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

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

WebSocket Stream API

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

ولكن ماذا لو كانت البيانات تصل بشكل أسرع من قدرة المعالجة؟

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

تمنحك 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() البيانات فيه.

الاطّلاع على تحسينات الانتقالات

يسرّني أن أقدّم لك ميزتَي "انتقالات العرض" الجديدتَين في الإصدار 124 من Chrome، اللتين تم تصميمهما لتسهيل انتقالات العرض.

يتم تشغيل الحدث pageswap على كائن نافذة المستند عندما يؤدي أحد إجراءات التنقّل إلى استبدال المستند بمستند جديد.

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

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

وغير ذلك

بالطبع، هناك الكثير من الميزات الأخرى.

مراجع إضافية

لا يشمل ذلك سوى بعض النقاط الرئيسية. يمكنك الاطّلاع على الروابط التالية للاطّلاع على التغييرات الإضافية في الإصدار 124 من Chrome.

اشتراك

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

اسمي "بيت ليبيه"، وسنكون هنا لإطلاعك على الميزات الجديدة في Chrome فور طرح الإصدار 125.