جدید در کروم 123

Adriana Jara

در اینجا چیزی است که شما باید بدانید:

• طرح رنگ خود را با تابع جدید light-dark() تطبیق دهید.
• با استفاده از Long Animation Frames API پاسخگویی را در سایت خود تشخیص دهید.
• از جریمه‌های عملکرد راه‌اندازی سرویس‌کار با API مسیریابی استاتیک Service Worker اجتناب کنید.
• و چیزهای بیشتری وجود دارد.

من آدریانا خارا هستم. بیایید وارد آن شویم و ببینیم چه چیزی برای توسعه دهندگان در Chrome 123 جدید است.

تابع CSS light-dark() .

تابع light-dark() در CSS به شما امکان می دهد رنگ هایی ایجاد کنید که با ترجیح کاربر برای حالت روشن یا تاریک سازگار شوند . از تابع light-dark() برای تعیین دو مقدار رنگ مختلف در یک ویژگی CSS استفاده کنید.

مرورگر به طور خودکار رنگ مناسب را بر اساس مقدار color-scheme محاسبه شده عنصر انتخاب می کند. به عنوان مثال، با CSS زیر:

html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}

• اگر کاربر یک تم روشن انتخاب کرده باشد، عنصر پس‌زمینه آهکی خواهد داشت.
• اگر کاربر یک تم تیره انتخاب کرده باشد، عنصر یک پس‌زمینه سبز خواهد داشت.

Long Animation Frames API.

Long Animation Frames API در دسترس است تا به شما کمک کند علل تراکم نخ اصلی را پیدا کنید که اغلب دلیل INP بد ( تعامل با رنگ بعدی ) است - یک Core Web Vital که پاسخگویی وب سایت را اندازه گیری می کند.

API جدید نسخه بهبودیافته Long Tasks API است که درک بهتری از به‌روزرسانی‌های رابط کاربری آهسته ارائه می‌دهد. Long Animation Frames API به شما امکان می دهد کار مسدود کردن را اندازه گیری کنید. این کارها را همراه با به‌روزرسانی رندر زیر اندازه‌گیری می‌کند و اطلاعاتی مانند اسکریپت‌های طولانی در حال اجرا، زمان رندر و زمان صرف شده در طرح‌بندی و سبک اجباری، که به عنوان layout thrashing شناخته می‌شود، اضافه می‌کند.

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

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

observer.observe({ type: 'long-animation-frame', buffered: true });

API Static Routing Worker Service.

با استفاده از سرویس‌دهندگان می‌توانید وب‌سایت‌ها را آفلاین کنید و استراتژی‌های کش ایجاد کنید که می‌تواند عملکرد را افزایش دهد.

با این حال، زمانی که یک صفحه برای اولین بار پس از مدتی بارگیری می شود و کارگر سرویس کنترل در آن لحظه کار نمی کند، ممکن است هزینه عملکردی داشته باشد. از آنجایی که همه واکشی‌ها باید از طریق سرویس‌دهنده انجام شوند، مرورگر باید منتظر بماند تا سرویس‌کار راه‌اندازی شود و اجرا شود تا بداند چه محتوایی باید بارگیری شود.

با Service Worker Static Routing API ، در زمان نصب، می‌توانید مسیرهایی را که همیشه از شبکه ارائه می‌شوند، اعلام کنید. وقتی یک URL کنترل‌شده بعداً بارگیری می‌شود، مرورگر می‌تواند واکشی منابع را از آن مسیرها قبل از اینکه کارمند سرویس شروع به کار کند شروع کند. با این کار سرویس‌کار از نشانی‌های اینترنتی که می‌دانید به سرویس‌کار نیاز ندارند، حذف می‌شود.

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

و بیشتر!

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

• شما می توانید صفحات سفارشی شده را بر اساس جایی که کاربر با رابط NavigationActivation پیمایش کرده است، ارائه دهید.

• کروم اکنون از Zstandard ( zstd ) پشتیبانی می کند. این Content-Encoding به بارگذاری سریع‌تر صفحات و استفاده از پهنای باند کمتر و صرف زمان، CPU و انرژی کمتری برای فشرده‌سازی سرورها کمک می‌کند و در نتیجه هزینه‌های سرور کاهش می‌یابد.

• notRestoredReasons API برای bfcache از Chrome 123 منتشر می‌شود. این به صاحبان سایت اجازه می‌دهد تا دلایلی را در زمینه عدم امکان استفاده از bfcache جمع‌آوری کنند. صاحبان سایت می توانند از این برای بهبود استفاده از bfcache استفاده کنند که امکان ناوبری سریعتر تاریخ را فراهم می کند.

• مقدار picture-in-picture برای display-mode به شما امکان می دهد قوانین خاص CSS را بنویسید که فقط زمانی اعمال می شوند که برنامه وب در حالت تصویر در تصویر نشان داده شود. به عنوان مثال:

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

در ادامه مطلب

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

• موارد جدید در Chrome DevTools (123)
• لغو و حذف Chrome 123
• به‌روزرسانی‌های ChromeStatus.com برای Chrome 123
• فهرست تغییر مخزن منبع Chromium
• تقویم انتشار کروم

مشترک شوید

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

Yo soy Adriana Jara، و به محض انتشار کروم 124، من اینجا خواهم بود تا به شما بگویم چه چیزهای جدیدی در Chrome وجود دارد!

Adriana Jara

در اینجا چیزی است که شما باید بدانید:

• طرح رنگ خود را با تابع جدید light-dark() تطبیق دهید.
• با استفاده از Long Animation Frames API پاسخگویی را در سایت خود تشخیص دهید.
• از جریمه‌های عملکرد راه‌اندازی سرویس‌کار با API مسیریابی استاتیک Service Worker اجتناب کنید.
• و چیزهای بیشتری وجود دارد.

من آدریانا خارا هستم. بیایید وارد آن شویم و ببینیم چه چیزی برای توسعه دهندگان در Chrome 123 جدید است.

تابع CSS light-dark() .

تابع light-dark() در CSS به شما امکان می دهد رنگ هایی ایجاد کنید که با ترجیح کاربر برای حالت روشن یا تاریک سازگار شوند . از تابع light-dark() برای تعیین دو مقدار رنگ مختلف در یک ویژگی CSS استفاده کنید.

مرورگر به طور خودکار رنگ مناسب را بر اساس مقدار color-scheme محاسبه شده عنصر انتخاب می کند. به عنوان مثال، با CSS زیر:

html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}

• اگر کاربر یک تم روشن انتخاب کرده باشد، عنصر پس‌زمینه آهکی خواهد داشت.
• اگر کاربر یک تم تیره انتخاب کرده باشد، عنصر یک پس‌زمینه سبز خواهد داشت.

Long Animation Frames API.

Long Animation Frames API در دسترس است تا به شما کمک کند علل تراکم نخ اصلی را پیدا کنید که اغلب دلیل INP بد ( تعامل با رنگ بعدی ) است - یک Core Web Vital که پاسخگویی وب سایت را اندازه گیری می کند.

API جدید نسخه بهبودیافته Long Tasks API است که درک بهتری از به‌روزرسانی‌های رابط کاربری آهسته ارائه می‌دهد. Long Animation Frames API به شما امکان می دهد کار مسدود کردن را اندازه گیری کنید. این کارها را همراه با به‌روزرسانی رندر زیر اندازه‌گیری می‌کند و اطلاعاتی مانند اسکریپت‌های طولانی در حال اجرا، زمان رندر و زمان صرف شده در طرح‌بندی و سبک اجباری، که به عنوان layout thrashing شناخته می‌شود، اضافه می‌کند.

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

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

observer.observe({ type: 'long-animation-frame', buffered: true });

API Static Routing Worker Service.

با استفاده از سرویس‌دهندگان می‌توانید وب‌سایت‌ها را آفلاین کنید و استراتژی‌های کش ایجاد کنید که می‌تواند عملکرد را افزایش دهد.

با این حال، زمانی که یک صفحه برای اولین بار پس از مدتی بارگیری می شود و کارگر سرویس کنترل در آن لحظه کار نمی کند، ممکن است هزینه عملکردی داشته باشد. از آنجایی که همه واکشی‌ها باید از طریق سرویس‌دهنده انجام شوند، مرورگر باید منتظر بماند تا سرویس‌کار راه‌اندازی شود و اجرا شود تا بداند چه محتوایی باید بارگیری شود.

با Service Worker Static Routing API ، در زمان نصب، می‌توانید مسیرهایی را که همیشه از شبکه ارائه می‌شوند، اعلام کنید. وقتی یک URL کنترل‌شده بعداً بارگیری می‌شود، مرورگر می‌تواند واکشی منابع را از آن مسیرها قبل از اینکه کارمند سرویس شروع به کار کند شروع کند. با این کار سرویس‌کار از نشانی‌های اینترنتی که می‌دانید به سرویس‌کار نیاز ندارند، حذف می‌شود.

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

و بیشتر!

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

• شما می توانید صفحات سفارشی شده را بر اساس جایی که کاربر با رابط NavigationActivation پیمایش کرده است، ارائه دهید.

• کروم اکنون از Zstandard ( zstd ) پشتیبانی می کند. این Content-Encoding به بارگذاری سریع‌تر صفحات و استفاده از پهنای باند کمتر و صرف زمان، CPU و انرژی کمتری برای فشرده‌سازی سرورها کمک می‌کند و در نتیجه هزینه‌های سرور کاهش می‌یابد.

• notRestoredReasons API برای bfcache از Chrome 123 منتشر می‌شود. این به صاحبان سایت اجازه می‌دهد تا دلایلی را در زمینه عدم امکان استفاده از bfcache جمع‌آوری کنند. صاحبان سایت می توانند از این برای بهبود استفاده از bfcache استفاده کنند که امکان ناوبری سریعتر تاریخ را فراهم می کند.

• مقدار picture-in-picture برای display-mode به شما امکان می دهد قوانین خاص CSS را بنویسید که فقط زمانی اعمال می شوند که برنامه وب در حالت تصویر در تصویر نشان داده شود. به عنوان مثال:

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

در ادامه مطلب

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

• موارد جدید در Chrome DevTools (123)
• لغو و حذف Chrome 123
• به‌روزرسانی‌های ChromeStatus.com برای Chrome 123
• فهرست تغییر مخزن منبع Chromium
• تقویم انتشار کروم

مشترک شوید

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

Yo soy Adriana Jara، و به محض انتشار کروم 124، من اینجا خواهم بود تا به شما بگویم چه چیزهای جدیدی در Chrome وجود دارد!