جدید در کروم 124

پیت لی پیج

در اینجا نکات برجسته کروم 124 آمده است:

می خواهید اجرا کامل را انجام دهید؟ یادداشت‌های انتشار Chrome 124 را بررسی کنید.

در جاوا اسکریپت از DOM سایه اظهاری استفاده کنید

دو API جدید وجود دارد که به DOM سایه ای اعلامی اجازه می دهد از جاوا اسکریپت استفاده شود.

setHTMLUnsafe() مشابه innerHTML است و به شما امکان می دهد HTML داخلی یک عنصر را روی رشته ارائه شده تنظیم کنید. این به زمانی کمک می‌کند که شما مقداری HTML داشته باشید که شامل یک DOM سایه اظهاری است، مانند این.

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

اگر فقط از innerHTML استفاده می کنید، مرورگر آن را به درستی تجزیه نمی کند و DOM سایه ای وجود ندارد. اما با setHTMLUnsafe() ، DOM سایه شما ایجاد می شود و عنصر همانطور که انتظار دارید تجزیه می شود.

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

API دیگر parseHTMLUnsafe() است و به طور مشابه با DOMParser.parseFromString() کار می کند.

هر دوی این API ها ناامن هستند، به این معنی که هیچ گونه پاکسازی ورودی را انجام نمی دهند. بنابراین باید مطمئن شوید که هر چیزی که به آنها غذا می دهید ایمن است. در نسخه آتی، انتظار داریم نسخه ای را ببینیم که ورودی را پاکسازی می کند.

در نهایت، هر دوی این API ها قبلاً در آخرین نسخه فایرفاکس و سافاری پشتیبانی می شوند!

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() .

مشاهده پیشرفت های انتقال

من در مورد ویژگی‌های View Transitions هیجان‌زده هستم، و دو ویژگی جدید در Chrome 124 وجود دارد که برای سهولت انتقال مشاهده طراحی شده‌اند.

هنگامی که یک پیمایش سند را با سند جدید جایگزین می کند، رویداد pageswap بر روی شی پنجره یک سند فعال می شود.

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

و رندر-مسدود کردن سند که به شما امکان می دهد رندر یک سند را تا زمانی که محتوای حیاتی تجزیه نشده است مسدود کنید و از یک رنگ ثابت در همه مرورگرها اطمینان حاصل کنید.

و بیشتر!

البته چیزهای بیشتری وجود دارد.

در ادامه مطلب

این فقط برخی از نکات کلیدی را پوشش می دهد. برای تغییرات بیشتر در کروم 124 پیوندهای زیر را بررسی کنید.

مشترک شوید

برای به‌روز ماندن، در کانال YouTube Developers Chrome مشترک شوید و هر زمان که ویدیوی جدیدی را راه‌اندازی کنیم، یک اعلان ایمیلی دریافت خواهید کرد.

من Pete LePage هستم، و به محض انتشار Chrome 125، ما اینجا خواهیم بود تا به شما بگوییم که چه چیزی در Chrome جدید است!