חדש ב-Chrome 77

אנחנו משיקים עכשיו את Chrome 77.

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

Largest Contentful Paint ‏(LCP)

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

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

כדי למדוד את ה-Largest Contentful Paint, צריך להשתמש ב-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);

פיל פרסם פוסט מעולה בנושא Largest Contentful Paint ב-web.dev.

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

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

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

האירוע formdata

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

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

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

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

רכיבים מותאמים אישית שמשויכים לטופס עוזרים לגשר על הפער בין רכיבים מותאמים אישית לבין אמצעי בקרה מקומיים. הוספת מאפיין formAssociated סטטי מורה לדפדפן להתייחס לרכיב המותאם אישית כמו לכל שאר רכיבי הטופס. מומלץ גם להוסיף מאפיינים נפוצים שנמצאים ברכיבי קלט, כמו name, ‏ value ו-validity, כדי להבטיח עקביות עם אמצעי הבקרה המקוריים.

class MyCounter extends HTMLElement {
  static formAssociated = true;

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

בקישור הבא תוכלו לקרוא את המאמר בקרות טופס מתקדמות יותר ב-web.dev כדי לקבל את כל הפרטים.

טעינה מדורגת (lazy loading) מקורית

לא ברור לי איך החמצתי את הטעינה האיטית המובנית בסרטון האחרון שלי! הוא די מדהים, אז החלטתי לכלול אותו עכשיו. טכניקת טעינה איטית מאפשרת לדחות את הטעינה של משאבים לא קריטיים, כמו רכיבי <img> או רכיבי <iframe> מחוץ למסך, עד שהם נדרשים, וכך לשפר את ביצועי הדף.

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

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

<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.

ועוד.

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

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

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

קריאה נוספת

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

להרשמה

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

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