חדש ב-Chrome 77

Pete LePage

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

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

Largest Contentful Paint ‏(LCP)

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

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

כדי למדוד את ה-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> מוסתרים, אבל הוא לא פתרון מושלם.

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

האירוע 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 נפרדת.

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

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

ועוד.

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

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

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

קריאה נוספת

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

להרשמה

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

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