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

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

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

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

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

ผมชื่อ Pete LePage และทันทีที่ Chrome 78 เปิดตัว เราจะมาบอกคุณถึงสิ่งใหม่ๆ ใน Chrome