ใหม่ใน 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);

ก่อนที่จะเปิดใช้ประเภทที่เชื่อถือ คุณจะต้องระบุและแก้ไขการละเมิดโดยใช้ส่วนหัว CSP ของ report-only

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 เครื่องมือติดตาม

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

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

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

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

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