ฟีเจอร์ใหม่ใน Chrome 77

Chrome 77 กำลังเปิดตัวแล้ว

ฉันชื่อ Pete LePage มาเจาะลึกและดูว่ามีอะไรใหม่ สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 77!

การแสดงผลเนื้อหาขนาดใหญ่ที่สุด

การทำความเข้าใจและวัดประสิทธิภาพของเว็บไซต์จริงอาจเป็นเรื่องยาก เมตริกอย่าง load หรือ DOMContentLoaded ไม่ได้บอกให้ผู้ใช้ทราบสิ่งที่ผู้ใช้เห็นบนหน้าจอ First Paint และ First Contentful Paint พูดถึงจุดเริ่มต้นของประสบการณ์ First Meaningful Paint ดีกว่า แต่ก็ซับซ้อน และบางครั้งก็ผิด

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> ที่ซ่อนไว้ แต่ก็ไม่ใช่วิธีแก้ปัญหาที่สมบูรณ์แบบ

ฟีเจอร์ใหม่ 2 รายการบนเว็บที่เพิ่มใน Chrome 77 ช่วยให้สร้างการควบคุมแบบฟอร์มที่กำหนดเองได้ง่ายขึ้น และนำข้อจำกัดที่มีอยู่มากมายออกไป

เหตุการณ์ formdata

เหตุการณ์ formdata เป็น API ระดับล่างที่อนุญาตให้โค้ด JavaScript เข้าร่วมการส่งแบบฟอร์ม หากต้องการใช้งาน ให้เพิ่ม Listener เหตุการณ์ 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 เริ่มต้น

ฉันไม่แน่ใจว่าตัวเองพลาดการโหลดแบบ Lazy Loading เนทีฟในวิดีโอล่าสุดได้อย่างไร น่าตื่นเต้นมาก ผมเลยเอามารวมวันนี้ การโหลดแบบ Lazy Loading เป็นเทคนิคที่ช่วยให้คุณเลื่อนการโหลดทรัพยากรที่ไม่สำคัญ เช่น <img> นอกหน้าจอหรือของ <iframe> ไปจนกว่าจะจำเป็นต้องใช้ได้ ซึ่งจะเพิ่มประสิทธิภาพของหน้าเว็บ

ตั้งแต่ Chrome 76 เป็นต้นไป เบราว์เซอร์จะจัดการการโหลดแบบ Lazy Loading ให้คุณ โดยไม่ต้องเขียนโค้ดการโหลดแบบ Lazy Loading ที่กำหนดเอง หรือใช้ไลบรารี JavaScript แยกต่างหาก

หากต้องการแจ้งเบราว์เซอร์ว่าคุณต้องการโหลดรูปภาพหรือ iframe แบบ Lazy Loading ให้ใช้แอตทริบิวต์ loading="lazy" รูปภาพและ iframe ที่ "ครึ่งหน้าบน" จะโหลดตามปกติ และโฆษณาที่อยู่ด้านล่างจะดึงขึ้นมาเมื่อผู้ใช้เลื่อน เข้าไปใกล้เท่านั้น

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

ดูรายละเอียดได้จากการโหลดแบบ Lazy Loading ระดับเบราว์เซอร์สำหรับเว็บที่ 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

อ่านเพิ่มเติม

ทั้งหมดนี้พูดถึงไฮไลต์สำคัญเพียงบางส่วน ไปที่ลิงก์ด้านล่างสำหรับ การเปลี่ยนแปลงเพิ่มเติมใน Chrome 77

สมัครใช้บริการ

หากต้องการติดตามวิดีโอล่าสุด จากนั้นติดตามช่อง YouTube สำหรับนักพัฒนาซอฟต์แวร์ Chrome และคุณจะได้รับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่

ฉันชื่อ Pete LePage และทันทีที่เปิดตัว Chrome 78 ฉันก็จะมาเล่าให้คุณฟังว่า มีอะไรใหม่ใน Chrome!