Chrome 77 กำลังเปิดตัวแล้ว
- มีวิธีที่ดีกว่าในการติดตามประสิทธิภาพของเว็บไซต์ด้วย Largest Contentful Paint
- ฟอร์มมีความสามารถใหม่ๆ บางอย่าง
- การโหลดแบบ Lazy Loading เริ่มต้นพร้อมให้ใช้งานแล้ว
- Chrome DevSummit 2019 จะจัดขึ้นในวันที่ 11-12 พฤศจิกายน 2019
- และอื่นๆ อีกมากมายเพิ่มเติม
ฉันชื่อ 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
- มีอะไรใหม่ใน Chrome DevTools (77)
- การเลิกใช้งานและการนำออก Chrome 77
- การอัปเดต ChromeStatus.com สำหรับ Chrome 77
- มีอะไรใหม่ใน JavaScript ใน Chrome 77
- รายการเปลี่ยนแปลงที่เก็บของแหล่งที่มา Chromium
สมัครใช้บริการ
หากต้องการติดตามวิดีโอล่าสุด จากนั้นติดตามช่อง YouTube สำหรับนักพัฒนาซอฟต์แวร์ Chrome และคุณจะได้รับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่
ฉันชื่อ Pete LePage และทันทีที่เปิดตัว Chrome 78 ฉันก็จะมาเล่าให้คุณฟังว่า มีอะไรใหม่ใน Chrome!