جدید در کروم 103

پیت لی پیج

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

  • یک کد وضعیت HTTP 103 جدید وجود دارد که به مرورگر کمک می‌کند تا قبل از رسیدن صفحه تصمیم بگیرد چه محتوایی را از قبل بارگذاری کند.
  • Local Font Access API به برنامه های کاربردی وب امکان شمارش و استفاده از فونت های نصب شده بر روی رایانه کاربر را می دهد.
  • AbortSignal.timeout() راه ساده‌تری برای پیاده‌سازی تایم‌اوت‌ها در APIهای ناهمزمان است.
  • و چیزهای بیشتری وجود دارد.

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

کد وضعیت HTTP 103 103 - نکات اولیه

یکی از راه‌هایی که می‌توانید عملکرد صفحه را بهبود بخشید، استفاده از نکات منابع است. آنها به مرورگر "نکات" درباره مواردی که ممکن است بعداً به آن نیاز داشته باشد، می دهند. به عنوان مثال، از پیش بارگذاری فایل ها، یا اتصال به سرور دیگری.

<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link href="cdn.example.com"
      rel="preconnect">

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

تصور کنید مرورگر یک صفحه را درخواست می کند، اما سرور برای ایجاد آن به چند صد میلی ثانیه نیاز دارد. تا زمانی که مرورگر شروع به دریافت صفحه کند، فقط در آنجا می نشیند و منتظر می ماند. اما، اگر سرور بداند که صفحه همیشه به مجموعه خاصی از منابع فرعی نیاز دارد، به عنوان مثال، یک فایل CSS، مقداری جاوا اسکریپت، و چند تصویر، می‌تواند بلافاصله با کد وضعیت جدید HTTP 103 Early Hints پاسخ دهد و از مرورگر بپرسد. برای از پیش بارگذاری آن منابع فرعی.

سپس، هنگامی که سرور صفحه را تولید کرد، می تواند آن را با پاسخ HTTP 200 معمولی ارسال کند. با ورود به صفحه، مرورگر قبلاً شروع به بارگیری منابع مورد نیاز کرده است.

از آنجایی که این یک کد وضعیت HTTP جدید است، استفاده از آن نیاز به به روز رسانی سرور شما دارد.

با HTTP 103 نکات اولیه شروع کنید:

Local Font Access API

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

Local Font Access API جدید به برنامه های کاربردی وب امکان شمارش فونت های محلی در دستگاه کاربر را می دهد و دسترسی به داده های جدول فونت را فراهم می کند.

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

// Ask for permission to use the API
try {
  const status = await navigator.permissions.request({
    name: 'local-fonts',
  });
  if (status.state !== 'granted') {
    throw new Error('No Permission.');
  }
} catch (err) {
  if (err.name !== 'TypeError') {
    throw err;
  }
}

سپس، window.queryLocalFonts() را فراخوانی کنید. آرایه ای از تمام فونت های نصب شده روی دستگاه کاربر را برمی گرداند.

const opts = {};
const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

اگر فقط به زیر مجموعه ای از فونت ها علاقه دارید، می توانید با افزودن یک پارامتر postscriptNames آنها را فیلتر کنید.

const opts = {
  postscriptNames: [
    'Verdana',
    'Verdana-Bold',
    'Verdana-Italic',
  ],
};
const pickedFonts = await self.queryLocalFonts(opts);

برای جزئیات کامل، مقاله تام را بررسی کنید از تایپوگرافی پیشرفته با فونت های محلی در web.dev استفاده کنید .

زمان‌بندی آسان‌تر با ()AbortSignal.timeout

در جاوا اسکریپت، AbortController و AbortSignal برای لغو تماس ناهمزمان استفاده می شود.

به عنوان مثال، هنگام ایجاد یک درخواست fetch() می توانید یک AbortSignal ایجاد کنید و آن را به fetch() ارسال کنید. اگر می‌خواهید fetch() را قبل از بازگشت لغو کنید، abort() در نمونه AbortSignal فراخوانی کنید. تا به حال، اگر می خواستید پس از مدت زمان مشخصی لغو شود، باید آن را در یک setTimeout() بپیچید.

const controller = new AbortController();
const signal = controller.signal;
const resp = fetch(url, { signal });

setTimeout(() => {
  // abort the fetch after 6 seconds
  controller.abort();
}, 6000);

خوشبختانه، این کار با یک متد استاتیک جدید timeout() در AbortSignal آسانتر شد. یک شی AbortSignal را برمی گرداند که به طور خودکار پس از تعداد میلی ثانیه های معین سقط می شود. آنچه قبلاً تعداد انگشت شماری کد بود، اکنون فقط یک خط است.

const signal = AbortSignal.timeout(6000);
const resp = fetch(url, { signal });

AbortSignal.timeout() در کروم 103 پشتیبانی می شود و در حال حاضر در فایرفاکس و سافاری موجود است.

و بیشتر!

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

  • فرمت فایل تصویری avif اکنون توسط Web Share قابل اشتراک‌گذاری است
  • Chromium اکنون با فعال کردن popstate بلافاصله پس از تغییر URL با فایرفاکس مطابقت دارد. ترتیب رویدادها اکنون به این صورت است: popstate و سپس hashchange در هر دو پلتفرم.
  • و Element.isVisible() به شما می گوید که آیا یک عنصر قابل مشاهده است یا خیر.

در ادامه مطلب

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

مشترک شوید

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

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