ใหม่ใน Chrome 60

Pete LePage

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

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

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

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

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

API จะแสดงเมตริก 2 รายการ ได้แก่

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

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

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

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

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

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