Chrome 83 กำลังเริ่มเปิดตัวเป็นเวอร์ชันเสถียรแล้วตอนนี้
สิ่งที่จำเป็นต้องทราบมีดังนี้
- ประเภทที่เชื่อถือได้จะช่วยป้องกันช่องโหว่ในการเขียนสคริปต์ข้ามเว็บไซต์
- องค์ประกอบแบบฟอร์มจะมีการเปลี่ยนแปลงที่สำคัญ
- มีวิธีใหม่ในการตรวจจับการรั่วไหลของหน่วยความจำ
- API ระบบไฟล์เนทีฟจะเริ่มช่วงทดลองใช้จากต้นทางใหม่ซึ่งมีฟังก์ชันการทำงานเพิ่มขึ้น
- นโยบายข้ามต้นทางใหม่
- เราได้แนะนำโปรแกรม Web Vitals เพื่อให้คำแนะนำแบบองค์รวมสำหรับสัญญาณคุณภาพที่เราเชื่อว่ามีความสำคัญต่อการมอบประสบการณ์ที่ยอดเยี่ยมของผู้ใช้บนเว็บ
- และอื่นๆ
ฉันชื่อ Pete LePage ทำงานและถ่ายวิดีโอจากที่บ้าน มาเจาะลึกและดูว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 83!
ประเภทที่เชื่อถือได้
การเขียนสคริปต์ข้ามเว็บไซต์แบบ DOM เป็นช่องโหว่ด้านความปลอดภัยที่พบบ่อยที่สุดอย่างหนึ่งในเว็บ อาจทำให้เกิดการนำโฆษณา ไปใช้ในเพจโดยบังเอิญได้ง่าย ประเภทที่เชื่อถือได้จะช่วยป้องกันช่องโหว่ประเภทเหล่านี้ได้ เนื่องจากกำหนดให้คุณประมวลผลข้อมูลก่อนที่จะส่งต่อข้อมูลไปยังฟังก์ชันที่อาจเป็นอันตราย
ลองดูตัวอย่างเช่น innerHTML
เมื่อเปิดใช้ประเภทที่เชื่อถือได้ หากฉันพยายามส่งสตริง การส่งสตริงจะล้มเหลวโดยพิมพ์ TypeError เนื่องจากเบราว์เซอร์จะไม่ทราบว่าจะเชื่อถือสตริงได้หรือไม่
// Trusted types turned on
const elem = document.getElementById('myDiv');
elem.innerHTML = `Hello, world!`;
// Will throw a TypeError
แต่ต้องใช้ฟังก์ชันที่ปลอดภัย เช่น textContent
, ส่งในประเภทที่เชื่อถือได้ หรือสร้างองค์ประกอบและใช้ appendChild()
แทน
// Use a safe function
elem.textContent = ''; // OK
// Pass in a trusted type
import DOMPurify from 'dompurify';
const str = `Hello, world!`;
elem.innerHTML = DOMPurify.sanitize(str, {RETURN_TRUSTED_TYPE: true});
// Create an element
const img = document.createElement('img');
img.src = 'xyz.jpg';
elem.appendChild(img);
ก่อนเปิดประเภทที่เชื่อถือได้ คุณจะต้องระบุและแก้ไขการละเมิดโดยใช้ส่วนหัว report-only
CSP
Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //example.com
จากนั้นเมื่อคุณทำทุกอย่างเรียบร้อยแล้ว จึงจะเปิดใช้งานได้อย่างถูกต้อง ดูรายละเอียดทั้งหมดได้ในหัวข้อป้องกันช่องโหว่ในการเขียนสคริปต์ข้ามเว็บไซต์ตาม DOM ด้วยประเภทที่เชื่อถือได้ใน web.dev
การอัปเดตการควบคุมแบบฟอร์ม
เราใช้ตัวควบคุมแบบฟอร์ม HTML ทุกวัน ซึ่งเป็นกุญแจสำคัญในการโต้ตอบส่วนใหญ่ของเว็บ ส่วนขยายเหล่านี้ใช้งานง่าย มีการช่วยเหลือพิเศษในตัว และ เป็นที่คุ้นเคยสำหรับผู้ใช้ของเรา รูปแบบของตัวควบคุมแบบฟอร์มอาจไม่สอดคล้องกัน ในเบราว์เซอร์และระบบปฏิบัติการต่างๆ เรามักจะต้องส่งกฎ CSS จำนวนหนึ่ง เพื่อให้ได้รูปลักษณ์ที่สอดคล้องกันในอุปกรณ์ต่างๆ
ผมประทับใจในผลงานที่ Microsoft ทำเพื่อปรับรูปลักษณ์ของการควบคุมแบบฟอร์มให้ทันสมัยยิ่งขึ้น นอกเหนือจากรูปแบบการแสดงผลที่ดีกว่าเดิมแล้ว แอปยังสนับสนุนการแตะที่ดีขึ้น และการเข้าถึงที่ดีขึ้นด้วย ซึ่งรวมถึงการสนับสนุนแป้นพิมพ์ที่ดีขึ้นด้วย!
ตัวควบคุมแบบฟอร์มใหม่อยู่ใน Microsoft Edge แล้ว และตอนนี้ก็พร้อมให้บริการใน Chrome 83 แล้ว ดูข้อมูลเพิ่มเติมได้ที่การอัปเดตตัวควบคุมแบบฟอร์มและโฟกัสในบล็อก Chromium
ช่วงทดลองใช้จากต้นทาง
วัดหน่วยความจำด้วยmeasureMemory()
ตั้งแต่ช่วงทดลองใช้จากต้นทางใน Chrome 83 เป็นต้นไป performance.measureMemory()
คือ API ใหม่ที่ช่วยให้วัดการใช้งานหน่วยความจำของหน้าเว็บและตรวจจับการรั่วไหลของหน่วยความจำได้
การรั่วไหลของหน่วยความจำทำได้ง่ายดังนี้
- ลืมยกเลิกการลงทะเบียน Listener เหตุการณ์
- การจับภาพออบเจ็กต์จาก iframe
- ไม่ปิดผู้ปฏิบัติงาน
- การสะสมออบเจ็กต์ในอาร์เรย์
- เป็นต้น
หน่วยความจำรั่วไหลจะนําไปยังหน้าเว็บที่แสดงช้าและอืดอาดต่อผู้ใช้
if (performance.measureMemory) {
try {
const result = await performance.measureMemory();
console.log(result);
} catch (err) {
console.error(err);
}
}
ดูรายละเอียดทั้งหมดของ API ใหม่ได้ที่ตรวจสอบการใช้งานหน่วยความจำทั้งหมดของหน้าเว็บด้วย measureMemory()
บน web.dev
การอัปเดต Native File System API
Native File System API เริ่มช่วงทดลองใช้จากต้นทางใหม่ใน Chrome 83 พร้อมรองรับสตรีมที่เขียนได้และความสามารถในการบันทึกแฮนเดิลไฟล์
async function writeURLToFile(fileHandle, url) {
// Create a FileSystemWritableFileStream to write to.
const writable = await fileHandle.createWritable();
// Make an HTTP request for the contents.
const response = await fetch(url);
// Stream the response into the file.
await response.body.pipeTo(writable);
// pipeTo() closes the destination pipe automatically.
}
สตรีมที่เขียนได้ช่วยให้การเขียนไปยังไฟล์ง่ายขึ้นมาก และเนื่องจากเป็นสตรีม คุณจึงเชื่อมโยงคำตอบจากสตรีมหนึ่งไปยังอีกสตรีมหนึ่งได้อย่างง่ายดาย
การบันทึกแฮนเดิลไฟล์ลงใน IndexedDB จะช่วยให้คุณจัดเก็บสถานะหรือจดจำไฟล์ที่ผู้ใช้ทำงานอยู่ได้ เช่น เก็บรายการไฟล์ที่แก้ไขล่าสุด เปิดไฟล์ล่าสุดที่ผู้ใช้กำลังแก้ไข และอื่นๆ
คุณจะต้องมีโทเค็นการทดลองใช้จากต้นทางใหม่จึงจะใช้ฟีเจอร์เหล่านี้ได้ ดังนั้นให้อ่านบทความ Native File System API: การลดความซับซ้อนในการเข้าถึงไฟล์ในเครื่อง ใน web.dev ซึ่งมีรายละเอียดทั้งหมดและวิธีรับโทเค็นช่วงทดลองใช้จากต้นทางใหม่
ช่วงทดลองใช้จากต้นทางอื่นๆ
ดูรายการฟีเจอร์ทั้งหมดในช่วงทดลองใช้จากต้นทาง
นโยบายข้ามต้นทางใหม่
API ของเว็บบางตัวเพิ่มความเสี่ยงที่จะเกิดการโจมตี Side-channel เช่น Spectre
ในการลดความเสี่ยงดังกล่าว เบราว์เซอร์จะเสนอสภาพแวดล้อมแยกต่างหากแบบเลือกเข้าร่วม ซึ่งเรียกว่าการแยกแบบข้ามต้นทาง สถานะที่แยกแบบข้ามต้นทางยังป้องกันการแก้ไข document.domain
ด้วย การที่แก้ไข document.domain
ได้จะทำให้มีการสื่อสารระหว่างเอกสารที่อยู่ในเว็บไซต์เดียวกัน และถือเป็นช่องโหว่ในนโยบายต้นทางเดียวกัน
ดูรายละเอียดทั้งหมดได้จากโพสต์ของ Eiji เรื่องการทำเว็บไซต์ให้เป็นแบบ "ข้ามต้นทาง" โดยใช้ COOP และ COEP
Web Vitals
การวัดคุณภาพประสบการณ์ของผู้ใช้มีหลายแง่มุม แม้ว่าประสบการณ์ของผู้ใช้บางด้านจะเกี่ยวข้องกับเว็บไซต์และเนื้อหาที่เฉพาะเจาะจง แต่ก็มีชุดสัญญาณทั่วไป "Core Web Vitals" ซึ่งสำคัญต่อประสบการณ์การใช้งานเว็บทั้งหมด ความต้องการหลักเพื่อประสบการณ์ของผู้ใช้ดังกล่าวรวมถึงประสบการณ์การโหลด การโต้ตอบ และความเสถียรของภาพของเนื้อหาในหน้าเว็บ ซึ่งล้วนเป็นรากฐานสำคัญของ Core Web Vitals ปี 2020
- Largest Contentful Paint จะวัดความเร็วในการโหลดที่รับรู้ได้และทำเครื่องหมายจุดในไทม์ไลน์การโหลดหน้าเว็บเมื่อเนื้อหาหลักของหน้าโหลดขึ้นมา
- First Input Delay จะวัดการตอบสนองและนับจำนวนประสบการณ์ที่ผู้ใช้รู้สึกเมื่อพยายามโต้ตอบกับหน้าเว็บเป็นครั้งแรก
- Cumulative Layout Shift จะวัดความเสถียรของภาพและคำนวณปริมาณการเปลี่ยนแปลงของเลย์เอาต์ที่ไม่คาดคิดของเนื้อหาในหน้าที่มองเห็นได้
เมตริกเหล่านี้ทั้งหมดแสดงถึงผลลัพธ์ที่สำคัญซึ่งยึดผู้ใช้เป็นศูนย์กลาง วัดผลได้จริง ทั้งยังวัดผลได้โดยใช้เครื่องมือและเมตริกการวินิจฉัยในห้องทดลองซึ่งสนับสนุน ตัวอย่างเช่น แม้ว่า Largest Contentful Paint จะเป็นเมตริกการโหลดระดับบนสุด แต่ก็ขึ้นอยู่กับ First Contentful Paint (FCP) และ Time to First Byte (TTFB) เป็นหลัก ซึ่งยังคงมีความสำคัญต่อการตรวจสอบและปรับปรุง
ดูข้อมูลเพิ่มเติมได้ที่การแนะนำ Web Vitals: เมตริกที่จำเป็นสำหรับเว็บไซต์ที่มีคุณภาพในบล็อก Chromium สำหรับรายละเอียดทั้งหมด
และอื่นๆ
- ตอนนี้ Chrome รองรับ Barcode Detection API ซึ่งช่วยให้ตรวจจับและถอดรหัสบาร์โค้ดได้
- ฟังก์ชัน CSS
@supports
ใหม่มีการตรวจหาฟีเจอร์สำหรับตัวเลือก CSS - คำอธิบายประกอบ ARIA ใหม่รองรับการช่วยเหลือพิเศษในโปรแกรมอ่านหน้าจอสำหรับความคิดเห็น คำแนะนำ และไฮไลต์ข้อความที่เกี่ยวข้องกับความหมาย (คล้ายกับ
<mark>
) - คำค้นหาสื่อ
prefers-color-scheme
ช่วยให้ผู้เขียนรองรับธีมมืดของตนเองเพื่อให้ควบคุมประสบการณ์ที่สร้างขึ้นได้โดยสมบูรณ์ - ขณะนี้ JavaScript รองรับโมดูลในผู้ปฏิบัติงานที่แชร์แล้ว
หากคุณอยากรู้สิ่งที่กำลังจะเพิ่มเข้ามาในอนาคต ดูข้อมูลใน ตัวติดตาม API ของ Fugu
อ่านเพิ่มเติม
ส่วนนี้ครอบคลุมไฮไลต์สำคัญเพียงบางส่วนเท่านั้น ไปที่ลิงก์ด้านล่างสำหรับ การเปลี่ยนแปลงเพิ่มเติมใน Chrome 83
- มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome (83)
- การเลิกใช้งานและการนำ Chrome 83 ออก
- การอัปเดต ChromeStatus.com สำหรับ Chrome 83
- มีอะไรใหม่ใน JavaScript ใน Chrome 83
- รายการเปลี่ยนแปลงที่เก็บแหล่งที่มา Chromium
ติดตาม
หากต้องการติดตามวิดีโอล่าสุดของเรา โปรดติดตามช่อง YouTube สำหรับนักพัฒนาซอฟต์แวร์ Chrome และคุณจะได้รับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่
ฉันชื่อ Pete LePage ฉันต้องการตัดผม แต่ทันทีเผยแพร่ Chrome 84 ฉันจะแจ้งให้คุณทราบว่ามีอะไรใหม่ใน Chrome!