חדש ב-Chrome 77

Pete LePage

Chrome 77 מושק עכשיו!

שמי Pete LePage, אז בואו נראה מה חדש למפתחים ב-Chrome 77!

Largest Contentful Paint ‏(LCP)

לפעמים קשה להבין ולמדוד את הביצועים של האתר בעולם האמיתי. מדדים כמו load או DOMContentLoaded לא מציינים מה המשתמש רואה במסך. הצגת המדד 'הצגת תוכן ראשוני' ו'הצגת התוכן הראשון' צריכה לתעד רק את תחילת החוויה. המדד 'הצגת התוכן העיקרי' טוב יותר, אבל הוא מורכב ולפעמים שגוי.

Largest Contentful Paint API, שזמין החל מ-Chrome 77, מדווח על זמן הרינדור של רכיב התוכן הגדול ביותר שמופיע באזור התצוגה, ומאפשר למדוד מתי התוכן הראשי בדף נטען.

כדי למדוד את Largest Contentful Paint (LCP), צריך להשתמש ב-Performance Observer (בקרת ביצועים) ולחפש אירועים מסוג 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);

לפיל יש פוסט נהדר על המהירות שבה נטען רכיב התוכן הכי גדול (LCP) באתר web.dev.

יכולות חדשות בטפסים

מפתחים רבים יוצרים אמצעי בקרה מותאמים אישית לטפסים, כדי להתאים אישית את המראה והסגנון של רכיבים קיימים, או כדי ליצור אמצעי בקרה חדשים שלא מובנים בדפדפן. בדרך כלל צריך להשתמש ב-JavaScript וברכיבי <input> מוסתרים, אבל זה לא פתרון מושלם.

שתי תכונות אינטרנט חדשות שנוספו ל-Chrome 77 מאפשרות לבנות פקדים מותאמים אישית בטפסים בקלות ולבטל את המגבלות הרבות שקיימות.

האירוע של formdata

האירוע formdata הוא API ברמה נמוכה שמאפשר לכל קוד JavaScript להשתתף בשליחת טופס. כדי להשתמש בו, צריך להוסיף לטופס שבו רוצים לבצע אינטראקציה באמצעות event listener של formdata.

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

כשהמשתמש לוחץ על לחצן השליחה, הטופס מפעיל את האירוע formdata, שכולל אובייקט FormData שמכיל את כל הנתונים שנשלחים. לאחר מכן, ב-handler של האירועים של formdata, אפשר לעדכן או לשנות את formdata לפני שהוא נשלח.

רכיבים מותאמים אישית שמשויכים לטופס

רכיבים מותאמים אישית המשויכים לטפסים עוזרים לגשר על הפער בין הרכיבים המותאמים אישית לבין אמצעי הבקרה המותאמים אישית. הוספת מאפיין 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, הדפדפן מטפל בטעינה מושהית, ללא צורך לכתוב קוד מותאם אישית של טעינה מדורגת או להשתמש בספריית JavaScript נפרדת.

כדי לציין לדפדפן שאתם רוצים תמונה או שגרסת ה-iframe נטענת באופן הדרגתי, תוכלו להשתמש במאפיין loading="lazy". תמונות ו-iframes שנמצאים "בחלק העליון והקבוע" נטענים כרגיל. האפליקציות שמופיעות למטה מאוחזרות רק כשהמשתמש גולל לידן.

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

לפרטים נוספים, אפשר לעיין במאמר בנושא טעינה מדורגת ברמת הדפדפן לאינטרנט באתר web.dev.

כנס המפתחים של Chrome 2019

כנס Chrome למפתחים יתקיים ב-11 וב-12 בנובמבר.

זוהי הזדמנות מצוינת ללמוד על הכלים והעדכונים החדשים ביותר שמגיעים לפלטפורמת האינטרנט, ולשמוע ישירות מצוות המהנדסים של Chrome.

יש לכם שידור חי בערוץ ה-YouTube שלנו, ואפשר גם לבקש את ההזמנה באתר Chrome Dev Summit 2019.

ופעולות נוספות.

אלה רק כמה מהשינויים שב-Chrome 77 עבור המפתחים, כמובן, יש עוד הרבה יותר.

Contact Picker API, שזמין בתור גרסת מקור לניסיון, הוא בורר חדש על פי דרישה שמאפשר למשתמשים לבחור רשומה או רשומות מרשימת אנשי הקשר ולשתף עם אתר רק פרטים מוגבלים לגבי אנשי הקשר שנבחרו.

בנוסף, יש יחידות מדידה חדשות ב-API של intl.NumberFormat.

קריאה נוספת

המאמר הזה מתייחס רק לחלק מההדגשים העיקריים. בקישורים שבהמשך תוכלו למצוא שינויים נוספים ב-Chrome 77.

להרשמה

רוצה להתעדכן בסרטונים שלנו? הירשמו לערוץ YouTube של מפתחי Chrome, ותקבלו התראה באימייל בכל פעם שנשיק סרטון חדש.

שמי פיט לה פייג', וברגע שהגרסה של Chrome 78 תושק, אני אהיה כאן כדי לספר לכם מה חדש ב-Chrome!