جدید در کروم ۱۵۱

راشل اندرو

منتشر شده: ۲۸ ژوئیه ۲۰۲۶

کروم ۱۵۱ اکنون در حال انتشار است و این پست برخی از ویژگی‌های کلیدی این نسخه را به اشتراک می‌گذارد. یادداشت‌های کامل انتشار کروم ۱۵۱ را بخوانید.

نکات برجسته این نسخه:

عنصر قابلیت: <usermedia> MVP

عنصر <usermedia> جدیدترین عنصری است که پس از <geolocation> در مجموعه Capability Elements راه‌اندازی شده است. این گذار از پیشنهاد اولیه <permission> - بخشی از ابتکار PEPC - به مرورگر اجازه می‌دهد تا پیچیدگی‌ها و رفتارهای منحصر به فرد قابلیت‌های سخت‌افزاری مختلف را به طور مؤثرتری مدیریت کند. در حالی که پیشنهاد اولیه عمدتاً بر مدیریت حالت‌های مجوز، مانند اجازه در مقابل رد، متمرکز بود، Capability Elements به عنوان واسطه‌های داده عمل می‌کنند.

عنصر <geolocation> یک شیء موقعیت مکانی را برای سایت شما فراهم می‌کند و <usermedia> کل جریان دسترسی به دوربین و میکروفون را مدیریت می‌کند. این عنصر قصد کاربر را ثبت می‌کند، اعلان مرورگر را مدیریت می‌کند و شیء MediaStream را به برنامه تحویل می‌دهد. این تغییر نیاز به فراخوانی‌های جداگانه getUserMedia() را از بین می‌برد، پیاده‌سازی را ساده می‌کند و تضمین می‌کند که مرورگر سیگنال قابل اعتمادی از قصد کاربر دارد.

برای اطلاعات بیشتر به معرفی عنصر <usermedia> در HTML مراجعه کنید.

DOM سایه اعلانی: ویژگی shadowrootslotassignment

کروم ۱۵۱ پشتیبانی از ویژگی shadowrootslotassignment را در عناصر <template> اضافه می‌کند. این به شما امکان می‌دهد ریشه‌های سایه اعلانی بسازید که از تخصیص دستی اسلات مستقیماً در HTML شما استفاده می‌کنند.

تاکنون، تخصیص دستی اسلات فقط به صورت اجباری امکان‌پذیر بود. با این به‌روزرسانی، می‌توانید shadowrootslotassignment="manual" را در الگوی ریشه سایه خود مشخص کنید.

این ویژگی named (رفتار پیش‌فرض) و manual را می‌پذیرد و توسط ویژگی shadowRootSlotAssignment در HTMLTemplateElement منعکس می‌شود. برای جزئیات بیشتر، مستندات HTMLTemplateElement.shadowRootSlotAssignment را در MDN بررسی کنید.

این ویژگی در حال حاضر در فایرفاکس و نسخه بتای سافاری ۲۷ موجود است، بنابراین به زودی Baseline Newly نیز در دسترس خواهد بود.

پیمایش‌های نرم و معیارهای عملکرد تعاملی

کروم ۱۵۱ با معرفی دو نوع PerformanceEntry جدید، جدول زمانی عملکرد وب را گسترش می‌دهد: soft-navigation و interaction-contentful-paint . این ورودی‌ها به توسعه‌دهندگان کمک می‌کنند تا عملکرد و تأخیر مبتنی بر تعامل را در برنامه‌های تک صفحه‌ای (SPA) ردیابی کنند و بر اساس معیارهای Core Web Vitals مانند Largest Contentful Paint (LCP) و Interaction to Next Paint (INP) عمل کنند.

در یک SPA، انتقال مسیر مبتنی بر جاوا اسکریپت باعث بارگذاری صفحه مرورگر سنتی نمی‌شود. ورودی soft-navigation این تغییرات وضعیت تاریخچه سند مشابه را که توسط تعاملات کاربر آغاز شده است، ثبت می‌کند. هنگامی که یک ناوبری نرم رخ می‌دهد، مرورگر یک مبدا زمانی جدید ایجاد می‌کند و به شما این امکان را می‌دهد که داده‌های عملکرد بعدی را به طور دقیق به مسیر SPA فعال نسبت دهید، نه به URL سند اولیه.

ورودی interaction-contentful-paint رنگ‌های جدید با محتوای جدید را در نواحی DOM که توسط تعامل کاربر تغییر یافته‌اند، اندازه‌گیری می‌کند. این امر، حتی زمانی که به‌روزرسانی‌های محتوا به عملیات ناهمزمان مانند درخواست‌های fetch() بستگی دارند، امکان مشاهده تأخیر بارگذاری تعامل را فراهم می‌کند.

شما می‌توانید این ورودی‌های جدید را در برنامه خود با استفاده از PerformanceObserver مشاهده کنید. قطعه کد زیر ورودی‌های ناوبری نرم را در کنسول ثبت می‌کند - از جمله ناوبری‌های نرم قبلی در این صفحه با استفاده از گزینه buffered:

const observer = new PerformanceObserver(console.log);
observer.observe({ type: "soft-navigation", buffered: true });

برای کسب اطلاعات بیشتر در مورد پیاده‌سازی و اندازه‌گیری پیمایش‌های SPA، مستندات پیمایش‌های نرم را در Chrome برای توسعه‌دهندگان مطالعه کنید.

مطالعه بیشتر

این فقط برخی از نکات برجسته کلیدی را پوشش می‌دهد. برای تغییرات بیشتر در Chrome 151 به لینک‌های زیر مراجعه کنید:

اشتراک

برای به‌روز ماندن، در کانال یوتیوب توسعه‌دهندگان کروم مشترک شوید و هر زمان که ویدیوی جدیدی منتشر کنیم، یک اعلان ایمیلی دریافت خواهید کرد. یا برای مقالات و پست‌های وبلاگ جدید، ما را در X یا لینکدین دنبال کنید.

به محض انتشار کروم ۱۵۲، ما همینجا هستیم تا به شما بگوییم چه چیزهایی در کروم جدید است!