ใหม่ใน Chrome 60

  • Paint Timing API ช่วยให้คุณวัดเวลาที่ใช้ในการแสดงผลครั้งแรกและเวลาที่ใช้ในการแสดงผลครั้งแรกด้วย Paint Timings AP
  • font-display จะช่วยให้คุณควบคุมวิธีแสดงผลแบบอักษรก่อนดาวน์โหลดได้
  • WebAssembly ลงจอดแล้ว
  • นอกจากนี้ยังมีอีกมากมาย

หากต้องการดูรายการการเปลี่ยนแปลงทั้งหมด โปรดดูรายการการเปลี่ยนแปลงที่เก็บแหล่งที่มา Chromium

ฉันชื่อ Pete LePage มาเจาะลึกและดูว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 60 กัน

API ลำดับเวลาการแสดงผล

เมื่อผู้ใช้ไปที่หน้าเว็บ พวกเขาจะมองหาความคิดเห็นที่เป็นรูปภาพ เพื่อให้ผู้ใช้มั่นใจว่าทุกอย่างทำงานได้ดี แต่ตอนนี้เราวัด API นี้ได้ ด้วย PaintTimings API ใหม่

API จะแสดงเมตริก 2 รายการดังนี้

  • Time to First Paint แสดงจุดเริ่มที่เบราว์เซอร์เริ่มแสดงผลบางสิ่ง โดยแสดงส่วนแรกของเนื้อหาบนหน้าจอ
  • Time to First Contentful Paint - ระบุจุดเมื่อเบราว์เซอร์แสดงผลเนื้อหาส่วนแรกจาก DOM, ข้อความ, รูปภาพ เป็นต้น

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

พร็อพเพอร์ตี้ font-display ของ CSS

Web Fonts ให้คุณนำแบบอักษรที่หลากหลายมาประกอบกันได้ แต่หากผู้ใช้ยังไม่มีแบบอักษร ก็ต้องดาวน์โหลดแบบอักษรดังกล่าว ซึ่งอาจส่งผลให้เว็บไซต์โหลดได้ช้า

โชคดีที่เบราว์เซอร์ส่วนใหญ่จะใช้ทางเลือกสำรองหากแบบอักษรใช้เวลาดาวน์โหลดนานเกินไป พร็อพเพอร์ตี้ font-display ใหม่ช่วยให้คุณควบคุมลักษณะการแสดงผลแบบอักษรที่ดาวน์โหลดได้ก่อนที่จะโหลดจนเสร็จสมบูรณ์

  • auto ใช้กลยุทธ์การแสดงแบบอักษรที่ User Agent ใช้
  • block กำหนดให้แบบอักษรมีช่วงระยะเวลาสั้นๆ เป็นบล็อกและระยะเวลาการสลับที่ไม่จำกัด
  • swap กำหนดให้แบบอักษรมีช่วงบล็อกเป็น 0 วินาทีและระยะเวลาการสลับที่ไม่จำกัด
  • fallback กำหนดให้แบบอักษรมีช่วงระยะเวลาบล็อกที่น้อยมากและระยะเวลาการสลับที่สั้น
  • optional ทำให้หน้าปัดมีช่วงเวลาบล็อกที่น้อยมากและระยะเวลาการสลับเป็น 0 วินาที

รองรับ Chrome 60 และ Opera และอยู่ระหว่างการพัฒนาใน Firefox ดูข้อมูลเพิ่มเติมได้ที่การควบคุมประสิทธิภาพของแบบอักษรด้วย font-display

WebAssembly

Web Assembly หรือ Wasm เป็นวิธีใหม่ในการเรียกใช้โค้ด โดยเขียนด้วยภาษาต่างๆ เช่น C และ C++ บนเว็บด้วยความเร็วที่ใกล้เคียงกับภาษาเดิม

มอบความเร็วที่จำเป็นในการสร้างโปรแกรมตัดต่อวิดีโอในเบราว์เซอร์หรือเรียกใช้เกม Unity ด้วยอัตราเฟรมสูงโดยใช้ API แพลตฟอร์มเว็บมาตรฐานที่มีอยู่

ดูข้อมูลเพิ่มเติมได้ที่ webassembly.org ซึ่งรวมถึงการสาธิต เอกสาร และวิธีเริ่มต้นใช้งาน

และอีกมากมาย

  • Web Budget API ใหม่ช่วยให้เว็บไซต์ที่มีสิทธิ์ส่งข้อความ Push สามารถส่งข้อความพุชในจำนวนจำกัดซึ่งทริกเกอร์การทำงานในเบื้องหลัง เช่น การซิงค์ข้อมูลหรือปิดการแจ้งเตือน โดยไม่ต้องแสดงการแจ้งเตือนที่ผู้ใช้มองเห็นได้
  • PushSubscription.expirationTime พร้อมให้ใช้งานแล้วในขณะนี้ เพื่อแจ้งเตือนเว็บไซต์ต่างๆ ว่าจะหมดอายุเมื่อใดและจะหมดอายุหรือไม่
  • ตอนนี้ระบบรองรับพร็อพเพอร์ตี้การย้ายออบเจ็กต์และการกระจายข้อมูลแล้ว ซึ่งทำให้การรวมและโคลนออบเจ็กต์แบบตื้น รวมถึงใช้รูปแบบออบเจ็กต์ที่เปลี่ยนแปลงไม่ได้ต่างๆ ทำได้ง่ายขึ้น

หมายเหตุ: ระบบได้พุช Payment Request API ไปยัง Chrome 61 แล้ว

ทั้งหมดนี้เป็นเพียงการเปลี่ยนแปลงบางส่วนใน Chrome 60 สำหรับนักพัฒนาซอฟต์แวร์

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

ผมชื่อ Pete LePage และทันทีที่เปิดตัว Chrome 61 ผมจะบอกคุณว่า มีอะไรใหม่ใน Chrome!