ฟีเจอร์ใหม่ใน 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