جدید در کروم 85

پیت لی پیج

کروم 85 در حال عرضه به حالت پایدار است.

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

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

قابلیت مشاهده محتوا

فرآیند رندر مرورگرها

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

اعمال content-visibility: auto به یک عنصر، به مرورگر می‌گوید که می‌تواند کار رندر آن عنصر را تا زمانی که به نمای درپورت پیمایش کند، رد کند و رندر اولیه سریع‌تری ارائه کند.


.my-class {
  content-visibility: auto;
}

برای اینکه بیشترین تأثیر را از content-visibility ببرید، آن را در بخش‌های والدین با الگوریتم‌های طرح‌بندی پیچیده‌تر، مانند flexbox و grid ، یا دارای فرزندانی با طرح‌بندی‌های خاص خود اعمال کنید.

با قطعه قطعه کردن محتوا و افزودن content-visibility: auto; ، این صفحه از زمان رندر 232 میلی ثانیه به 30 میلی ثانیه رسید.

نمایان بودن محتوا را بررسی کنید تا ببینید چگونه می توانید از آن برای بهبود عملکرد رندر خود استفاده کنید.

@property و متغیرهای CSS

متغیرهای CSS، که از نظر فنی به آنها خواص سفارشی می گویند، بسیار عالی هستند. با Houdini CSS Properties and Values ​​API، می توانید یک نوع و مقدار بازگشتی پیش فرض برای ویژگی های سفارشی خود تعریف کنید. من قبلاً آنها را در New در Chrome 78 پوشش دادم، زمانی که پشتیبانی را برای تعریف آنها در جاوا اسکریپت اضافه کردیم.

با شروع در Chrome 85، می‌توانید خصوصیات CSS را مستقیماً در CSS خود تعریف و تنظیم کنید. چیزی که من در مورد ویژگی های CSS دوست دارم - این است که به ویژگی معنای معنایی، مقادیر بازگشتی می دهد و حتی آزمایش CSS را فعال می کند.

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Una یک پست عالی دارد @property : دادن قدرت های فوق العاده به متغیرهای CSS که به شما نشان می دهد چگونه می توانید از آنها استفاده کنید.

دریافت برنامه های مرتبط نصب شده

API getInstalledRelatedApps() این امکان را برای شما فراهم می کند تا بررسی کنید که آیا برنامه شما نصب شده است یا خیر، سپس تجربه کاربری را سفارشی کنید.

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

هنگامی که برای اولین بار در Chrome 80 عرضه شد، فقط برای برنامه های Android کار می کرد. اکنون در اندروید نیز می تواند بررسی کند که PWA شما نصب شده است یا خیر. و در ویندوز، می تواند بررسی کند که آیا برنامه Windows UWP شما نصب شده است یا خیر.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

مقاله من را بررسی کنید آیا برنامه شما نصب شده است؟ getInstalledRelatedApps() به شما خواهد گفت! در web.dev تا ببینید چگونه کار می کند، و چگونه برنامه های خود را امضا کنید تا ثابت کنید آنها متعلق به شما هستند.

میانبرهای نماد برنامه

میانبر آیکون برنامه در ویندوز

در Chrome 84، ما پشتیبانی از میانبرهای App Icon را اضافه کردیم. من تصادفاً گفتم همه جا در دسترس هستند، اما فقط در اندروید در دسترس هستند. اکنون، در Chrome 85، آنها در Android و Windows و در Chrome و Edge در دسترس هستند.


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  }
]

برای جزئیات کامل، مقاله App Icon Shortcuts را در web.dev بررسی کنید، و برای سردرگمی که ایجاد کردم متاسفم.

Origin Trial: استریم درخواست ها با fetch()

از Chrome 85، جریان آپلود fetch به عنوان آزمایشی اصلی در دسترس است. این به شما امکان می دهد قبل از آماده شدن بدنه درخواست، واکشی را شروع کنید. قبلاً فقط زمانی می‌توانستید درخواست را شروع کنید که تمام بدن را آماده می‌کردید. اما اکنون، می توانید شروع به ارسال محتوا کنید، حتی زمانی که هنوز در حال تولید آن هستید.

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

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

جیک نگاهی عمیق به درخواست‌های جریان با واکشی API در web.dev دارد، و همچنین آن را در آخرین HTTP203 - درخواست‌های جریانی با واکشی ویدیو پوشش داده است.

و بیشتر

البته موارد بسیار بیشتری وجود دارد.

Promise.any وعده ای را برمی گرداند که با اولین وعده انجام شده یا رد می شود.

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

جایگزین کردن همه نمونه‌ها در یک رشته با .replaceAll() آسان‌تر است، بدون عبارات منظم دیگر!

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

Chrome 85 پشتیبانی رمزگشایی را برای AVIF اضافه می‌کند، قالب تصویری که با AV1 کدگذاری شده و توسط Alliance for Open Media استاندارد شده است. AVIF در مقایسه با JPEG و WebP مزایای فشرده سازی قابل توجهی را ارائه می دهد، با مطالعه اخیر Netflix که نشان می دهد 50٪ در مقایسه با JPEG استاندارد و 60٪ صرفه جویی در محتوای 4:4:4 صرفه جویی می کند.

و حذف AppCache آغاز شده است .

در ادامه مطلب

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

مشترک شوید

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

من پیت لی پیج هستم و بالاخره موهایم را کوتاه کردم !

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