ฟีเจอร์ใหม่ใน Chrome 63

พีต เลอเพจ

นอกจากนี้ยังมีอีกมากมาย

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

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

การนำเข้าโมดูลแบบไดนามิก

การนำเข้าโมดูล JavaScript มีประโยชน์มาก แต่ก็ยังเป็นค่าคงที่ คุณจะนำเข้าโมดูลตามเงื่อนไขรันไทม์ไม่ได้

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

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  });
});

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

โปรแกรมและสร้างซ้ำๆ สำหรับโปรแกรมไม่พร้อมกัน

การเขียนโค้ดด้วยการทำซ้ำประเภทใดก็ตามด้วยฟังก์ชัน async อาจเป็นเรื่องน่าเกลียดได้ อันที่จริงมันเป็นส่วนสำคัญของคำถามเขียนโค้ดการสัมภาษณ์ที่ฉันชอบมาก

ตอนนี้เมื่อใช้async generator functionsและโปรโตคอลการทำซ้ำแบบไม่พร้อมกัน ทำให้การบริโภคหรือการใช้งานแหล่งข้อมูลสตรีมมิงมีประสิทธิภาพมากขึ้น และคำถามการเขียนโค้ดก็ง่ายขึ้นมากด้วย

async function* getChunkSizes(url) {
  const response = await fetch(url);
  const b = response.body;
  for await (const chunk of magic(b)) {
    yield chunk.length;
  }
}

ตัววนซ้ำแบบพร้อมกันสามารถใช้ใน for-of ลูปและเพื่อสร้างตัววนซ้ำแบบไม่พร้อมกันของคุณเองผ่านโรงงานของตัววนซ้ำแบบไม่ซิงค์ได้

ลักษณะการเลื่อนเกิน

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

ก่อนหน้า รีเฟรชทั้งหน้า

หลังจากนั้น ให้รีเฟรชเฉพาะเนื้อหา

ในบางกรณี คุณอาจต้องลบล้างลักษณะการทำงานดังกล่าวและมอบประสบการณ์การใช้งานของคุณเอง นี่เป็นวิธีที่ Progressive Web App ของ Twitter ทำ เมื่อคุณดึงลงแทนที่จะโหลดหน้าทั้งหน้าซ้ำ จะเป็นการเพิ่มทวีตใหม่ๆ ลงในมุมมองปัจจุบันแทน

ตอนนี้ Chrome 63 รองรับพร็อพเพอร์ตี้ CSS overscroll-behavior แล้ว ซึ่งทำให้ลบล้างลักษณะการทำงานของการเลื่อนรายการเพิ่มเติมเริ่มต้นของเบราว์เซอร์ได้อย่างง่ายดาย

โดยใช้ได้สำหรับ

ส่วนที่ดีที่สุดคือ overscroll-behavior ไม่ส่งผลเสียต่อประสิทธิภาพของหน้าเว็บ

การเปลี่ยนแปลง UI สิทธิ์

ผมชอบข้อความ Push ในเว็บแต่รู้สึกหงุดหงิดกับจำนวนเว็บไซต์ ที่ขอสิทธิ์ในการโหลดหน้าเว็บโดยไม่มีบริบทใดๆ และผมไม่ได้อยู่คนเดียว

90% ของคำขอสิทธิ์ทั้งหมดจะถูกละเว้นหรือบล็อกชั่วคราว

ใน Chrome 59 เราเริ่มแก้ไขปัญหานี้โดยการบล็อกสิทธิ์ชั่วคราวในกรณีที่ผู้ใช้ปฏิเสธคำขอ 3 ครั้ง ใน Chrome สำหรับ Android ตอนนี้จะทำกล่องโต้ตอบแบบโมดัลสำหรับคำขอสิทธิ์

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

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

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

  • finally พร้อมใช้งานในอินสแตนซ์ Promise แล้ว และมีการเรียกใช้หลังจากที่มีการดำเนินการหรือถูกปฏิเสธ Promise
  • Device Memory JavaScript API ใหม่ช่วยให้คุณเข้าใจข้อจำกัดด้านประสิทธิภาพโดยให้คำแนะนำเกี่ยวกับจำนวน RAM ทั้งหมดในอุปกรณ์ของผู้ใช้ คุณสามารถปรับแต่งประสบการณ์ขณะรันไทม์ โดยลดความซับซ้อนในอุปกรณ์ระดับล่าง และทำให้ผู้ใช้ได้รับประสบการณ์ที่ดียิ่งขึ้นโดยลดความหงุดหงิด
  • Intl.PluralRules API ช่วยให้คุณสร้างแอปพลิเคชันที่เข้าใจรูปแบบพหูพจน์ของภาษาหนึ่งๆ ได้โดยการระบุว่ารูปแบบพหูพจน์แบบใดที่ใช้กับตัวเลขและภาษาหนึ่งๆ และอาจช่วยเรื่องเลขลำดับ

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

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