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

Pete LePage

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

และ Pete LePage จะเป็นผู้ดูแลคุณในวันนี้ มาเจาะลึกกันว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 63

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

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

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

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

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

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

ตัวแปรการวนซ้ำและตัวสร้างแบบไม่ซิงค์

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

ตอนนี้เมื่อใช้ฟังก์ชัน Generator แบบแอสซิงค์และโปรโตคอล การทำซ้ำแบบแอสซิงค์ การใช้หรือการติดตั้งใช้งานแหล่งข้อมูลสตรีมมิงจะมีประสิทธิภาพมากขึ้น และคำถามการเขียนโค้ดของฉันก็ง่ายขึ้นมาก

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 ของสิทธิ์

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

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

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

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

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

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

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

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

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