ใหม่ใน Chrome 83

Pete LePage

Chrome 83 กำลังเริ่มเปิดตัวเวอร์ชันเสถียรแล้ว

สิ่งที่จำเป็นต้องทราบมีดังนี้

ผมชื่อ Pete LePage ทำงานและถ่ายทำจากที่บ้าน มาเริ่มดูว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 83 กัน

ประเภทที่เชื่อถือได้

Cross-site Scripting ที่ใช้ DOM เป็นหนึ่งในช่องโหว่ด้านความปลอดภัยที่พบบ่อยที่สุดบนเว็บ คุณอาจทำให้หน้าเว็บมีองค์ประกอบนี้โดยไม่ได้ตั้งใจ ประเภทที่เชื่อถือได้จะช่วยป้องกันช่องโหว่ประเภทเหล่านี้ได้ เนื่องจากคุณต้องประมวลผลข้อมูลก่อนส่งไปยังฟังก์ชันที่อาจเป็นอันตราย

ตัวอย่างเช่น เมื่อเปิดประเภทที่เชื่อถือไว้ หากฉันพยายามส่งสตริง ระบบจะดำเนินการไม่สำเร็จพร้อมแสดง TypeError เนื่องจากเบราว์เซอร์ไม่ทราบว่าเชื่อถือสตริงได้หรือไม่innerHTML

// 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

เมื่อทุกอย่างเรียบร้อยดีแล้ว คุณสามารถเปิดเครื่องได้อย่างถูกต้อง โปรดดูรายละเอียดทั้งหมดในหัวข้อป้องกันช่องโหว่ Cross-site Scripting ที่อิงตาม DOM ด้วยประเภทที่เชื่อถือได้ใน web.dev

การอัปเดตตัวควบคุมแบบฟอร์ม

เราใช้ตัวควบคุมแบบฟอร์ม HTML ทุกวัน และตัวควบคุมเหล่านี้เป็นกุญแจสำคัญในการโต้ตอบของเว็บ ฟีเจอร์เหล่านี้ใช้งานง่าย มีฟีเจอร์การช่วยเหลือพิเศษในตัว และผู้ใช้ของเราคุ้นเคยกับฟีเจอร์เหล่านี้อยู่แล้ว การจัดรูปแบบของการควบคุมแบบฟอร์มอาจไม่สอดคล้องกันระหว่างเบราว์เซอร์และระบบปฏิบัติการต่างๆ และเรามักจะต้องส่งกฎ CSS จำนวนมากเพื่อให้ได้รูปลักษณ์ที่สอดคล้องกันในอุปกรณ์ต่างๆ

ก่อน การจัดรูปแบบเริ่มต้นของตัวควบคุมแบบฟอร์ม
หลังจากนั้น รูปแบบของการควบคุมแบบฟอร์มจะอัปเดต

เราประทับใจมากกับสิ่งที่ Microsoft ได้ทำเพื่อปรับปรุงรูปลักษณ์ของการควบคุมแบบฟอร์มให้ทันสมัย นอกจากจะมีสไตล์ภาพที่ดูดีขึ้นแล้ว ฟีเจอร์เหล่านี้ยังรองรับการสัมผัสได้ดียิ่งขึ้น รวมถึงการช่วยเหลือพิเศษที่ดีขึ้นด้วย ซึ่งรวมถึงการรองรับแป้นพิมพ์ที่ดีขึ้น

ตัวควบคุมแบบฟอร์มใหม่มีให้บริการใน Microsoft Edge แล้ว และตอนนี้พร้อมให้ใช้งานใน Chrome 83 ดูข้อมูลเพิ่มเติมได้ที่การอัปเดตตัวควบคุมแบบฟอร์มและโฟกัสในบล็อก Chromium

ช่วงทดลองใช้จากต้นทาง

วัดหน่วยความจําด้วย measureMemory()

performance.measureMemory() เป็น API ใหม่ที่ช่วยให้วัดการใช้งานหน่วยความจําของหน้าเว็บและตรวจหาการรั่วไหลของหน่วยความจําได้ โดยเริ่มช่วงทดลองใช้จากต้นทางใน Chrome 83

หน่วยความจํารั่วเกิดขึ้นได้ง่าย

  • การลืมยกเลิกการลงทะเบียน 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

ช่วงทดลองใช้จากต้นทางอื่นๆ

ดูรายการฟีเจอร์ทั้งหมดในเวอร์ชันทดลองใช้แหล่งที่มา

นโยบายใหม่เกี่ยวกับต้นทางที่ต่างกัน

Web API บางรายการเพิ่มความเสี่ยงในการโจมตีช่องทางข้างเคียง เช่น 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 ซึ่งช่วยให้สามารถตรวจหาและถอดรหัสบาร์โค้ดได้
  • ฟังก์ชัน @supports ของ CSS ใหม่จะตรวจหาฟีเจอร์สำหรับตัวเลือก CSS
  • คําอธิบายประกอบ ARIA ใหม่รองรับการช่วยเหลือพิเศษของโปรแกรมอ่านหน้าจอสําหรับความคิดเห็น คําแนะนํา และข้อความไฮไลต์ที่มีความหมายเชิงอรรถศาสตร์ (คล้ายกับ <mark>)
  • prefers-color-scheme Media Query ช่วยให้ผู้เขียนรองรับธีมมืดของตนเองได้ เพื่อควบคุมประสบการณ์การใช้งานที่สร้างขึ้นอย่างเต็มที่
  • ตอนนี้ JavaScript รองรับโมดูลในเวิร์กเกอร์ที่แชร์แล้ว

หากอยากรู้ว่ามีอะไรรออยู่ในอนาคต โปรดดูข้อมูลใน Fugu API Tracker

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

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

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

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

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