الميزات الجديدة في 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 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() البيانات إليه.

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

أنا متحمس بشأن "عرض الانتقالات" حيث توجد ميزتين جديدتين في Chrome 124 المصمم لتسهيل انتقالات العرض.

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

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

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

وغير ذلك

بالطبع هناك الكثير.

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

يتناول هذا فقط بعض النقاط الرئيسية. يُرجى التحقق من الروابط التالية التغييرات الإضافية في Chrome 124.

اشتراك

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

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