جدید در کروم 83

Pete LePage

Chrome 83 در حال حاضر شروع به ارائه به پایداری می کند.

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

• انواع قابل اعتماد به جلوگیری از آسیب‌پذیری‌های اسکریپت نویسی متقابل سایت کمک می‌کنند.
• عناصر فرم جلوه مهمی پیدا می کنند.
• روش جدیدی برای تشخیص نشت حافظه وجود دارد.
• API سیستم فایل بومی یک آزمایش اولیه جدید را با قابلیت های اضافه شده شروع می کند.
• سیاست های متقابل جدیدی وجود دارد
• ما برنامه Web Vitals را معرفی کرده‌ایم تا راهنمایی یکپارچه برای سیگنال‌های با کیفیت ارائه کنیم که به اعتقاد ما برای ارائه یک تجربه کاربری عالی در وب ضروری است.
• و بیشتر .

من Pete LePage هستم، از خانه کار می‌کنم و عکس‌برداری می‌کنم، بیایید شیرجه بزنیم و ببینیم چه چیزی برای توسعه‌دهندگان در Chrome 83 جدید است!

انواع قابل اعتماد

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

به عنوان مثال innerHTML در نظر بگیرید، با روشن بودن انواع قابل اعتماد، اگر بخواهم رشته ای را ارسال کنم، با TypeError شکست می خورد زیرا مرورگر نمی داند که آیا می تواند به رشته اعتماد کند یا خیر.

// Trusted types turned on
const elem = document.getElementById('myDiv');
elem.innerHTML = `Hello, world!`;
// Will throw a TypeError

درعوض، باید یا از یک تابع امن مانند textContent استفاده کنم، یک نوع قابل اعتماد ارسال کنم، یا عنصر را ایجاد کنم و از appendChild() استفاده کنم.

// Use a safe function
elem.textContent = ''; // OK

// Pass in a trusted type
import DOMPurify from 'dompurify';
const str = `Hello, world!`;
elem.innerHTML = DOMPurify.sanitize(str, {RETURN_TRUSTED_TYPE: true});

// Create an element
const img = document.createElement('img');
img.src = 'xyz.jpg';
elem.appendChild(img);

قبل از اینکه انواع مورد اعتماد را روشن کنید، باید با استفاده از سربرگ CSP report-only ، هرگونه تخلف را شناسایی و برطرف کنید.

Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //example.com

بعد از اینکه همه چیز را دکمه زدید، می توانید آن را به درستی روشن کنید. جزئیات کامل در جلوگیری از آسیب‌پذیری‌های برنامه‌نویسی متقابل مبتنی بر DOM با Trusted Types در web.dev موجود است.

به روز رسانی برای کنترل های فرم

ما هر روز از کنترل‌های فرم HTML استفاده می‌کنیم، و آنها کلید بسیاری از تعاملات وب هستند. استفاده از آنها آسان است، قابلیت دسترسی داخلی دارند و برای کاربران ما آشنا هستند. سبک کنترل‌های فرم می‌تواند در مرورگرها و سیستم‌عامل‌ها ناسازگار باشد. و ما اغلب مجبوریم تعدادی از قوانین CSS را ارسال کنیم تا نگاهی ثابت به دستگاه‌ها داشته باشیم.

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

کنترل‌های فرم جدید قبلاً در Microsoft Edge قرار گرفته‌اند و اکنون در Chrome 83 در دسترس هستند. برای اطلاعات بیشتر، به‌روزرسانی‌های کنترل‌های فرم و تمرکز در وبلاگ Chromium را ببینید.

آزمایش های مبدا

اندازه گیری حافظه با measureMemory()

با شروع یک آزمایش اولیه در Chrome 83، performance.measureMemory() یک API جدید است که اندازه‌گیری میزان استفاده از حافظه صفحه شما و تشخیص نشت حافظه را ممکن می‌سازد.

معرفی نشت حافظه آسان است:

• فراموش کردن لغو ثبت نام شنونده رویداد
• گرفتن اشیا از iframe
• نه بستن کارگر
• انباشتن اشیا در آرایه ها
• و غیره

نشت حافظه منجر به صفحاتی می شود که به نظر کاربران کند و متورم به نظر می رسند.

if (performance.measureMemory) {
  try {
    const result = await performance.measureMemory();
    console.log(result);
  } catch (err) {
    console.error(err);
  }
}

برای مشاهده تمام جزئیات API جدید، کل میزان مصرف حافظه صفحه وب خود را با measureMemory() در web.dev بررسی کنید.

به‌روزرسانی‌های Native File System API

Native File System API یک آزمایش اولیه جدید را در Chrome 83 با پشتیبانی از جریان‌های قابل نوشتن و توانایی ذخیره دسته‌های فایل آغاز کرد.

async function writeURLToFile(fileHandle, url) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Make an HTTP request for the contents.
  const response = await fetch(url);
  // Stream the response into the file.
  await response.body.pipeTo(writable);
  // pipeTo() closes the destination pipe automatically.
}

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

ذخیره کردن دسته‌های فایل در IndexedDB به شما امکان می‌دهد وضعیت را ذخیره کنید یا به یاد بیاورید که کاربر روی کدام فایل‌ها کار می‌کرد. به عنوان مثال فهرستی از فایل های اخیرا ویرایش شده نگه دارید، آخرین فایلی را که کاربر روی آن کار می کرد باز کنید و غیره.

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

سایر آزمایشات منشا

بررسی برای یک لیست کامل از ویژگی های در آزمایش اولیه.

سیاست‌های جدید متقابل

برخی از APIهای وب خطر حملات کانال جانبی مانند Spectre را افزایش می دهند. برای کاهش این خطر، مرورگرها یک محیط ایزوله مبتنی بر انتخاب به نام cross-origin isolated ارائه می‌دهند. حالت جدا شده از مبدأ متقاطع نیز از تغییرات document.domain جلوگیری می کند. امکان تغییر document.domain امکان برقراری ارتباط بین اسناد همان سایت را فراهم می کند و به عنوان یک راه گریز در خط مشی همان منبع در نظر گرفته شده است.

برای جزئیات کامل، پست Eiji را بررسی کنید تا با استفاده از COOP و COEP وب‌سایت خود را "منشأ متقاطع جدا شده" کنید .

حیاتی وب

اندازه گیری کیفیت تجربه کاربری جنبه های مختلفی دارد. در حالی که برخی از جنبه‌های تجربه کاربر مربوط به سایت و زمینه خاص است، مجموعه سیگنال‌های مشترکی وجود دارد - " Core Web Vitals " - که برای همه تجربیات وب حیاتی است. چنین نیازهای اصلی تجربه کاربر شامل تجربه بارگذاری، تعامل و ثبات بصری محتوای صفحه است و ترکیبی از آنها اساس Core Web Vitals 2020 است.

• Largest Contentful Paint سرعت بارگذاری درک شده را اندازه گیری می کند و نقطه ای را در جدول زمانی بارگذاری صفحه مشخص می کند که احتمالاً محتوای اصلی صفحه بارگیری شده است.
• تأخیر ورودی اول میزان پاسخ‌دهی را اندازه‌گیری می‌کند و تجربه‌ای را که کاربران هنگام تلاش برای اولین بار تعامل با صفحه احساس می‌کنند، کمّی می‌کند.
• تغییر چیدمان تجمعی ثبات بصری را اندازه گیری می کند و میزان تغییر چیدمان غیرمنتظره محتوای صفحه قابل مشاهده را تعیین می کند.

همه این معیارها نتایج مهم کاربر محور را ثبت می‌کنند، قابل اندازه‌گیری میدانی هستند و معادل‌ها و ابزارهای تشخیصی آزمایشگاهی پشتیبانی می‌کنند. به عنوان مثال، در حالی که بزرگترین رنگ محتوایی معیار بارگیری خط بالایی است، اما به شدت به First Contentful Paint (FCP) و Time to First Byte (TTFB) نیز وابسته است، که نظارت و بهبود آنها حیاتی است.

برای کسب اطلاعات بیشتر، برای جزئیات کامل به معرفی Web Vitals: معیارهای ضروری برای یک سایت سالم در وبلاگ Chromium مراجعه کنید.

و بیشتر

• Chrome اکنون از API تشخیص بارکد پشتیبانی می‌کند که توانایی شناسایی و رمزگشایی بارکدها را فراهم می‌کند.
• تابع جدید CSS @supports تشخیص ویژگی را برای انتخابگرهای CSS فراهم می کند.
• حاشیه نویسی های جدید ARIA از دسترسی صفحه خوان برای نظرات، پیشنهادات و نکات برجسته متن با معانی معنایی پشتیبانی می کند (شبیه به <mark> ).
• پرس و جوی رسانه prefers-color-scheme به نویسندگان اجازه می دهد از تم تیره خود پشتیبانی کنند تا بر تجربیاتی که ایجاد می کنند کنترل کامل داشته باشند.
• جاوا اسکریپت اکنون از ماژول ها در کارگران اشتراکی پشتیبانی می کند.

کنجکاو در مورد آنچه در آینده می آید؟ برای دیدن Fugu API Tracker را بررسی کنید!

بیشتر خواندن

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

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

اشتراک در

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

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