ใหม่ใน Chrome 85

Pete LePage

เราเริ่มเปิดตัว Chrome 85 ในรุ่นเสถียรแล้ว

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

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

ระดับการเข้าถึงเนื้อหา

กระบวนการแสดงผลของเบราว์เซอร์

การเปลี่ยน HTML ให้เป็นสิ่งที่ผู้ใช้เห็นได้นั้น เบราว์เซอร์ต้องผ่านขั้นตอนต่างๆ มากมายก่อนที่จะแสดงพิกเซลแรกได้ และจะดำเนินการกับทั้งหน้าเว็บ แม้แต่เนื้อหาที่ไม่แสดงในวิวพอร์ต

การใช้ content-visibility: auto กับองค์ประกอบจะบอกเบราว์เซอร์ว่าสามารถข้ามงานการแสดงผลสำหรับองค์ประกอบนั้นได้จนกว่าจะเลื่อนไปยัง วิวพอร์ต ซึ่งจะทำให้การแสดงผลเริ่มต้นเร็วขึ้น


.my-class {
  content-visibility: auto;
}

หากต้องการให้ content-visibility มีประสิทธิภาพสูงสุด ให้ใช้กับส่วนหลัก ที่มีอัลกอริทึมเลย์เอาต์ที่ซับซ้อนกว่า เช่น flexbox และ grid หรือ ที่มีองค์ประกอบย่อยที่มีเลย์เอาต์ของตัวเอง

การแบ่งเนื้อหาออกเป็นส่วนๆ และเพิ่ม content-visibility: auto; ทำให้หน้าเว็บนี้มีเวลาในการแสดงผลลดลงจาก 232 มิลลิวินาทีเหลือเพียง 30 มิลลิวินาที

ดูระดับการมองเห็นเนื้อหาเพื่อดูวิธีใช้ระดับการมองเห็นเนื้อหาในการปรับปรุงประสิทธิภาพการแสดงผล

@property และตัวแปร CSS

ตัวแปร CSS หรือที่เรียกว่าพร็อพเพอร์ตี้ที่กำหนดเองนั้นยอดเยี่ยมมาก API พร็อพเพอร์ตี้และค่า CSS ของ Houdini ช่วยให้คุณกำหนดประเภทและค่าสำรองเริ่มต้นสำหรับพร็อพเพอร์ตี้ที่กำหนดเองได้ ก่อนหน้านี้ฉันได้กล่าวถึงเรื่องนี้ในฟีเจอร์ใหม่ใน Chrome 78 เมื่อเราเพิ่มการรองรับการกำหนดใน JavaScript

ตั้งแต่ Chrome 85 เป็นต้นไป คุณยังกำหนดและตั้งค่าพร็อพเพอร์ตี้ CSS ได้โดยตรง ใน CSS สิ่งที่ฉันชอบเกี่ยวกับพร็อพเพอร์ตี้ CSS คือพร็อพเพอร์ตี้ มีความหมายเชิงความหมาย ค่าสำรอง และยังช่วยให้ทดสอบ CSS ได้ด้วย

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Una มีโพสต์ที่ยอดเยี่ยม @property: การให้พลังพิเศษแก่ตัวแปร CSS ซึ่งแสดงวิธีใช้ตัวแปรเหล่านั้น

รับแอปที่เกี่ยวข้องซึ่งติดตั้งแล้ว

getInstalledRelatedApps() API ช่วยให้คุณตรวจสอบได้ว่า แอปของคุณติดตั้งอยู่หรือไม่ จากนั้นก็ปรับแต่งประสบการณ์ของผู้ใช้

เช่น แสดงเนื้อหาที่แตกต่างกันต่อผู้ใช้ในหน้า Landing Page หากติดตั้งแอปไว้แล้ว รวมฟังก์ชันการทำงานที่ทับซ้อนกันไว้ในแอปเดียวเพื่อ ป้องกันความสับสน หรือหากติดตั้งแอปที่มาพร้อมเครื่องแล้ว อย่าโปรโมตการติดตั้ง PWA

เมื่อเปิดตัวครั้งแรกใน Chrome 80 ฟีเจอร์นี้ใช้ได้กับแอป Android เท่านั้น ตอนนี้ใน Android คุณยังตรวจสอบได้ด้วยว่าได้ติดตั้ง PWA ไว้หรือไม่ และใน Windows จะตรวจสอบได้ว่าคุณได้ติดตั้งแอป UWP ของ Windows หรือไม่ 

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

ดูบทความติดตั้งแอปแล้วใช่ไหม getInstalledRelatedApps()จะบอกคุณเอง ใน web.dev เพื่อดูวิธีการทำงานและวิธีลงชื่อแอปเพื่อพิสูจน์ว่าแอปเป็นของคุณ

ทางลัดไอคอนแอป

ทางลัดไอคอนแอปใน Windows

ใน Chrome 84 เราได้เพิ่มการรองรับทางลัดไอคอนแอป ฉันเผลอพูดไปว่าฟีเจอร์นี้พร้อมให้บริการทุกที่ แต่จริงๆ แล้วพร้อมให้บริการใน Android เท่านั้น ตอนนี้ใน Chrome 85 ฟีเจอร์นี้พร้อมใช้งานใน Android และ Windows ทั้งใน Chrome และ Edge


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  }
]

ดูรายละเอียดทั้งหมดได้ที่บทความทางลัดไอคอนแอปใน web.dev และขออภัยที่ทำให้เกิดความสับสน

ช่วงทดลองใช้: คำขอสตรีมที่มี fetch()

ตั้งแต่ Chrome 85 เป็นต้นไป fetchการอัปโหลดสตรีมจะพร้อมให้บริการเป็น การทดลองใช้ต้นทาง ซึ่งช่วยให้คุณเริ่มการดึงข้อมูลได้ก่อนที่ส่วนเนื้อหาของคำขอจะพร้อม ก่อนหน้านี้ คุณจะเริ่มส่งคำขอได้ก็ต่อเมื่อมีเนื้อหาทั้งหมดพร้อมแล้ว แต่ ตอนนี้คุณสามารถเริ่มส่งเนื้อหาได้แม้ว่าจะยังสร้างเนื้อหาไม่เสร็จก็ตาม

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

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

Jake มีข้อมูลเชิงลึกในคำขอสตรีมมิงด้วย Fetch API บน web.dev และยังได้กล่าวถึงในวิดีโอHTTP203 - คำขอสตรีมมิงด้วย Fetch ล่าสุดด้วย

และอื่นๆ

แน่นอนว่ายังมีอีกมากมาย

Promise.any จะแสดงผล Promise ที่ดำเนินการตาม Promise แรกที่ระบุ เพื่อดำเนินการให้เสร็จสมบูรณ์หรือถูกปฏิเสธ

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

การแทนที่อินสแตนซ์ทั้งหมดในสตริงทำได้ง่ายขึ้นด้วย .replaceAll() โดยไม่ต้องใช้ นิพจน์ทั่วไปอีกต่อไป

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

Chrome 85 เพิ่มการรองรับการถอดรหัสสำหรับ AVIF ซึ่งเป็นรูปแบบรูปภาพที่เข้ารหัสด้วย AV1 และได้รับการรับรองมาตรฐานจาก Alliance for Open Media AVIF มีอัตราการบีบอัดที่สูงกว่า JPEG และ WebP อย่างมาก โดยการศึกษาของ Netflix ล่าสุดแสดงให้เห็นว่าประหยัดพื้นที่ได้ 50% เมื่อเทียบกับ JPEG มาตรฐาน และประหยัดพื้นที่ได้มากกว่า 60% สำหรับเนื้อหา 4:4:4

และเริ่มนำ AppCache ออกแล้ว

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

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

ติดตาม

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

ผม Pete LePage และในที่สุดผมก็ตัดผมแล้ว

เมื่อ Chrome 86 เปิดตัวแล้ว เราจะมาแจ้งให้คุณทราบทันทีว่ามีอะไรใหม่ใน Chrome บ้าง