ใหม่ใน 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 มีโพสต์ที่ยอดเยี่ยมซึ่งอธิบายวิธีใช้ตัวแปร CSS @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 จะแสดงผลคำมั่นสัญญาที่เป็นไปตามคำมั่นสัญญาแรกที่กำหนดให้ดำเนินการหรือปฏิเสธ

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 ล่าสุดแสดงให้เห็นว่าการบีบอัด AVIF ประหยัดพื้นที่ได้ 50% เมื่อเทียบกับ JPEG มาตรฐาน และประหยัดพื้นที่ได้มากกว่า 60% สำหรับเนื้อหา 4:4:4

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

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

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

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

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

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

ทันทีที่ Chrome 86 เปิดตัว เราจะมาบอกคุณถึงสิ่งใหม่ๆ ใน Chrome