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

اشتراك

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

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