جدید در کروم 77

پیت لی پیج

Chrome 77 اکنون در حال عرضه است!

من Pete LePage هستم، بیایید وارد آن شویم و ببینیم چه چیز جدیدی برای توسعه دهندگان در Chrome 77 وجود دارد!

بزرگترین رنگ محتوایی

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

بزرگترین API رنگ محتوای موجود در Chrome 77، زمان رندر بزرگترین عنصر محتوای قابل مشاهده در viewport را گزارش می‌کند و اندازه‌گیری زمانی که محتوای اصلی صفحه بارگیری می‌شود را ممکن می‌سازد.

برای اندازه‌گیری بزرگترین رنگ محتوا، باید از یک مشاهده‌گر عملکرد استفاده کنید و به دنبال largest-contentful-paint باشید.

let lcp;
const po = new PerformanceObserver((eList) => {
  const e = eList.getEntries();
  const last = e[e.length - 1];
  lcp = last.renderTime || last.loadTime;
});

const poOpts = {
  type: 'largest-contentful-paint',
  buffered: true
}
po.observe(poOpts);

از آنجایی که یک صفحه اغلب به صورت مرحله‌ای بارگیری می‌شود، این امکان وجود دارد که بزرگترین عنصر در یک صفحه تغییر کند، بنابراین شما باید آخرین رویداد largest-contentful-paint فقط به سرویس تجزیه و تحلیل خود گزارش دهید.

addEventListener('visibilitychange', function fn() {
  const visState = document.visibilityState;
  if (lcp && visState === 'hidden') {
    sendToAnalytics({'lcp': lcp});
    removeEventListener('visibilitychange', fn, true);
  }
}, true);

فیل یک پست عالی در مورد بزرگترین رنگ محتوایی در web.dev دارد.

قابلیت های فرم های جدید

بسیاری از توسعه دهندگان کنترل های فرم سفارشی را ایجاد می کنند، یا برای سفارشی کردن ظاهر و احساس عناصر موجود، یا برای ساختن کنترل های جدیدی که در مرورگر تعبیه نشده اند. به طور معمول این شامل استفاده از جاوا اسکریپت و عناصر پنهان <input> است، اما راه حل کاملی نیست.

دو ویژگی وب جدید که در Chrome 77 اضافه شده‌اند، ساختن کنترل‌های فرم سفارشی را آسان‌تر کرده و بسیاری از محدودیت‌های موجود را حذف می‌کنند.

رویداد formdata

رویداد formdata یک API سطح پایین است که به هر کد جاوا اسکریپت اجازه می دهد در ارسال فرم شرکت کند. برای استفاده از آن، شنونده رویداد formdata را به فرمی که می‌خواهید با آن تعامل داشته باشید، اضافه کنید.

const form = document.querySelector('form');
form.addEventListener('formdata', ({formData}) => {
  formData.append('my-input', myInputValue);
});

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

عناصر سفارشی مرتبط با فرم

عناصر سفارشی مرتبط با فرم به پر کردن شکاف بین عناصر سفارشی و کنترل‌های بومی کمک می‌کنند. افزودن ویژگی static formAssociated به مرورگر می‌گوید که با عنصر سفارشی مانند سایر عناصر فرم رفتار کند. همچنین باید ویژگی‌های رایج موجود در عناصر ورودی مانند name ، value و validity اضافه کنید تا از سازگاری با کنترل‌های بومی اطمینان حاصل کنید.

class MyCounter extends HTMLElement {
  static formAssociated = true;

  constructor() {
    super();
    this._internals = this.attachInternals();
    this._value = 0;
  }
  ...
}

برای همه جزئیات، کنترل‌های فرم توانمندتر را در web.dev بررسی کنید!

بارگذاری تنبل بومی

من مطمئن نیستم که چگونه در آخرین ویدیوی خود بارگذاری تنبل بومی را از دست داده ام! بسیار شگفت انگیز است، بنابراین اکنون آن را درج می کنم. بارگذاری تنبل تکنیکی است که به شما امکان می دهد بارگیری منابع غیر حیاتی، مانند منابع <img> یا <iframe> خارج از صفحه را تا زمانی که نیاز دارید به تعویق بیندازید و کارایی صفحه خود را افزایش دهید.

با شروع در Chrome 76، مرورگر بدون نیاز به نوشتن کد بارگیری تنبل سفارشی یا استفاده از کتابخانه جداگانه جاوا اسکریپت، بارگذاری تنبل را برای شما مدیریت می کند.

برای اینکه به مرورگر بگویید که می‌خواهید یک تصویر یا iframe lazy بارگذاری شود، از ویژگی loading="lazy" استفاده کنید. تصاویر و آیفریم هایی که "بالاتر از تاشو" هستند به طور معمول بارگیری می شوند. و مواردی که در زیر هستند، تنها زمانی واکشی می شوند که کاربر در نزدیکی آنها پیمایش کند.

<img src="image.jpg" loading="lazy" width="400" height="250" alt="...">

برای جزئیات بیشتر ، بارگذاری تنبل سطح مرورگر برای وب را در web.dev بررسی کنید.

Chrome Dev Summit 2019

اجلاس Chrome Dev Summit در 11 و 12 نوامبر برگزار می شود.

این یک فرصت عالی برای آشنایی با آخرین ابزارها و به‌روزرسانی‌هایی است که به پلتفرم وب ارائه می‌شوند و مستقیماً از تیم مهندسی Chrome بشنوید.

به صورت زنده در کانال YouTube ما پخش می شود، یا اگر می خواهید شخصاً در آن شرکت کنید، می توانید دعوت خود را در وب سایت Chrome Dev Summit 2019 درخواست کنید.

و بیشتر!

اینها تنها تعدادی از تغییرات کروم 77 برای توسعه دهندگان است، البته موارد بسیار بیشتری نیز وجود دارد.

Contact Picker API که به‌عنوان نسخه آزمایشی در دسترس است، یک انتخابگر جدید و بر اساس تقاضا است که به کاربران امکان می‌دهد ورودی یا ورودی‌هایی را از فهرست مخاطبین خود انتخاب کنند و جزئیات محدودی از مخاطبین انتخاب‌شده را با یک وب‌سایت به اشتراک بگذارند.

و واحدهای اندازه گیری جدیدی در intl.NumberFormat API وجود دارد.

بیشتر خواندن

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

اشتراک در

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

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