ใหม่ใน Chrome 85

พีต เลอเพจ

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 ของ Houdini CSS คุณจะกำหนดประเภทและค่าสำรองเริ่มต้นสำหรับพร็อพเพอร์ตี้ที่กำหนดเองได้ ก่อนหน้านี้เราพูดถึงขั้นตอนเหล่านี้ใน ใหม่ใน 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 ก็จะตรวจสอบได้ว่าติดตั้งแอป Windows UWP แล้วหรือยัง

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,
});

เช่น ใช้เพื่ออุ่นเครื่องเซิร์ฟเวอร์ หรือสตรีมเสียงหรือวิดีโอที่ถ่ายจากไมโครโฟนหรือกล้อง

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

และอื่นๆ

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

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

และการนำ AppCache ออกก็เริ่มขึ้นแล้ว

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

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

ติดตาม

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

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

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