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

Pete LePage

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 คุณจะต้องใช้ PerformanceObserver และมองหาเหตุการณ์ 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);

Phil มีโพสต์ที่ยอดเยี่ยมเกี่ยวกับ 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 เป็นต้นไป เบราว์เซอร์จะจัดการการโหลดแบบเลื่อนเวลาไว้ทีหลังให้คุณโดยที่คุณไม่จําเป็นต้องเขียนโค้ดการโหลดแบบเลื่อนเวลาไว้ทีหลังที่กําหนดเองหรือใช้ไลบรารี JavaScript แยกต่างหาก

หากต้องการบอกเบราว์เซอร์ว่าคุณต้องการรูปภาพหรือ iframe ที่โหลดแบบ Lazy ให้ใช้แอตทริบิวต์ 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