ใหม่ใน Chrome 83

พีต เลอเพจ

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

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

ฉันชื่อ 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 สำหรับรายละเอียดทั้งหมด

และอื่นๆ

หากคุณอยากรู้สิ่งที่กำลังจะเพิ่มเข้ามาในอนาคต ดูข้อมูลใน ตัวติดตาม API ของ Fugu

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

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

ติดตาม

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

ฉันชื่อ Pete LePage ฉันต้องการตัดผม แต่ทันทีเผยแพร่ Chrome 84 ฉันจะแจ้งให้คุณทราบว่ามีอะไรใหม่ใน Chrome!