جدید در کروم 122

آدریانا خارا

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

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

Storage Buckets API.

Storage Buckets API جزئیات بیشتری را برای مدیریت بهتر ذخیره سازی دائمی فراهم می کند.

به طور سنتی، زمانی که کاربر فضای ذخیره سازی دستگاه خود را تمام می کند، داده های ذخیره شده با API هایی مانند IndexedDB یا localStorage بدون اینکه کاربر بتواند مداخله کند از بین می رود. یکی از راه‌های پایدار کردن فضای ذخیره‌سازی، استفاده از متد persist() در رابط StorageManager است. با این حال، این روش درخواست برای ماندگاری ذخیره سازی همه یا هیچ است

ایده اصلی Storage Buckets API این است که به سایت ها توانایی ایجاد سطل های ذخیره سازی متعدد را می دهد، جایی که مرورگر ممکن است انتخاب کند که هر سطل را مستقل از سایر سطل ها حذف کند. بنابراین می‌توانید اولویت‌بندی تخلیه را مشخص کنید تا مطمئن شوید با ارزش‌ترین داده‌ها حذف نمی‌شوند. هر سطل ذخیره‌سازی می‌تواند حاوی داده‌های مرتبط با APIهای ذخیره‌سازی تاسیس شده مانند IndexedDB و CacheStorage باشد.

بازدید همه فضای ذخیره سازی برابر ایجاد نمی شود: معرفی Storage Buckets برای جزئیات بیشتر و نمونه کد برای شروع استفاده از Storage Buckets.

بهبود ابزار DevTools در پنل عملکرد

در Chrome 122 DevTools شامل بهبودهای زیر در پانل عملکرد است.

ابتدا، Timeline در بالای پنل Performance اکنون به شما امکان می‌دهد پودر سوخاری را تنظیم کنید و بین آنها بپرید. برای تنظیم یک خرده نان، یک محدوده را در Timeline انتخاب کنید، نشانگر را روی آن نگه دارید و روی دکمه N ms مربوطه کلیک کنید. می توانید چندین پودر سوخاری تو در تو پشت سر هم ایجاد کنید. برای پرش بین سطوح بزرگنمایی، روی پودر سوخاری مربوطه در زنجیره بالای جدول زمانی کلیک کنید. ویدیوی بعدی را تماشا کنید تا پودر سوخاری را در عمل ببینید.

همچنین، اکنون آغازگرهای رویداد در مسیر اصلی وجود دارند. تراک Performance > Main به طور پیش‌فرض فلش‌هایی را نشان می‌دهد که آغازگرها و رویدادهای زیر را به هم متصل می‌کنند.

  • باطل کردن سبک یا طرح -> محاسبه مجدد سبک ها یا طرح بندی
  • درخواست قاب انیمیشن -> قاب انیمیشن فعال شد
  • Request Idle Callback -> Fire Idle Callback
  • تایمر -> Timer Fired را نصب کنید
  • ایجاد WebSocket -> ارسال... و دریافت WebSocket Handshake یا نابود کردن WebSocket

برای دیدن فلش ها، چنین رویدادی را در ردیابی پیدا کنید و روی آن کلیک کنید.

یک پیکان از درخواست و شلیک یک تماس بیکار.

به‌روزرسانی‌های بیشتر DevTools را در موارد جدید در Devtools 122 بیابید.

گزینه Async Clipboard API unsanitized

هنگام کپی و چسباندن با استفاده از Async Clipboard API، گزینه unsanitized برای متد read() به برنامه‌ها و وب‌سایت‌ها اجازه می‌دهد تا HTML غیر بهداشتی‌شده دریافت کنند. مگر اینکه سایت‌ها این ویژگی را داشته باشند، خواندن HTML از کلیپ بورد پاکسازی می‌شود.

به طور پیش‌فرض، هنگام خواندن انواع MIME text/html با استفاده از API async، ضدعفونی‌کننده برای حذف محتویات از نشانه‌گذاری HTML به دلیل نگرانی‌های امنیتی فراخوانی می‌شود و سبک‌ها در HTML ایجاد شده درج می‌شوند. این منجر به حجم زیاد HTML و از دست دادن وفاداری محتوای HTML هنگام خواندن توسط توسعه دهندگان وب یا برنامه های تلفن همراه می شود.

در مثال زیر می توانید تفاوت خروجی را مشاهده کنید.

ورودی:

<style>p { color: blue; }</style><p>Hello, World!</p>'

ضد عفونی شده (پیش فرض):

<p style='color: blue; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;'>Hello, World!</p>

با گزینه unsanitized :

<html><head><style>p { color: blue; }</style></head><body><p>Hello, World!</p></body></html>

برای آشنایی با اصول اولیه Clipboard API، از رفع انسداد دسترسی به کلیپ بورد دیدن کنید.

و بیشتر!

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

  • در CSS، درخواست‌های کانتینری با ویژگی‌های پشتیبانی‌نشده هرگز مطابقت ندارند. به عنوان مثال، پرس و جو زیر به دلیل ویژگی ناشناخته هرگز مطابقت نخواهد داشت: 
@container (width > 0px) or (unknown) {}

  • dataTransfer.clearData() بر اشیاء فایل تأثیر نمی گذارد، فقط اشیاء نوع متن را حذف می کند.

  • با drawingBufferStorage WebGL می‌توانید هنگام تبدیل رندر به فرمت پیکسل بافر پیش‌فرض طراحی، از کپی اضافی جلوگیری کنید و محتوایی را که بیش از 8 بیت دقت دارد ترسیم کنید.

در ادامه مطلب

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

مشترک شوید

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

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