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

Pete LePage

  • การรองรับ ResizeObservers จะแจ้งให้คุณทราบเมื่อสี่เหลี่ยมผืนผ้าของเนื้อหาองค์ประกอบมีการเปลี่ยนแปลงขนาด
  • ตอนนี้โมดูลสามารถเข้าถึงข้อมูลเมตาที่เฉพาะเจาะจงของโฮสต์ได้ด้วย import.meta
  • ตัวบล็อกป๊อปอัปมีประสิทธิภาพมากขึ้น
  • window.alert() จะไม่เปลี่ยนโฟกัสอีกต่อไป

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

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

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

ResizeObserver

การติดตามเมื่อขนาดขององค์ประกอบเปลี่ยนแปลงอาจเป็นเรื่องยุ่งยาก ในกรณีส่วนใหญ่ คุณจะต้องแนบ Listener กับเหตุการณ์ resize ของเอกสาร จากนั้นเรียกใช้ getBoundingClientRect หรือ getComputedStyle แต่ทั้ง 2 รายการนี้อาจทําให้เกิดการกระชากเลย์เอาต์

จะเกิดอะไรขึ้นหากหน้าต่างเบราว์เซอร์ไม่มีการเปลี่ยนแปลงขนาด แต่มีการเพิ่มองค์ประกอบใหม่ลงในเอกสาร หรือคุณเพิ่ม display: none ลงในองค์ประกอบ ทั้ง 2 รายการดังกล่าวสามารถเปลี่ยนขนาดขององค์ประกอบอื่นๆ ภายในหน้าได้

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

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

const ro = new ResizeObserver( entries => {
  for (const entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px × ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  }
});

// Observe one or multiple elements
ro.observe(someElement);

ดูรายละเอียดเพิ่มเติมและตัวอย่างการใช้งานจริงได้ที่ ResizeObserver: เหมือนกับ document.onresize สำหรับ Elements

ฉันไม่ชอบแท็บใต้ คุณก็ทราบดี นั่นคือเมื่อหน้าเว็บเปิดป๊อปอัปไปยังปลายทางและไปยังส่วนต่างๆ ของหน้า โดยปกติแล้วรายการใดรายการหนึ่งจะเป็นโฆษณาหรือสิ่งที่คุณไม่ต้องการ

ตั้งแต่ Chrome 64 เป็นต้นไป ระบบจะบล็อกการนําทางประเภทนี้ และ Chrome จะแสดง UI เดิมบางส่วนต่อผู้ใช้ ซึ่งจะช่วยให้ผู้ใช้ไปยังหน้าเว็บที่เปลี่ยนเส้นทางได้หากต้องการ

import.meta

เมื่อเขียนโมดูล JavaScript คุณมักจะต้องการเข้าถึงข้อมูลเมตาเฉพาะโฮสต์เกี่ยวกับโมดูลปัจจุบัน ตอนนี้ Chrome 64 รองรับพร็อพเพอร์ตี้ import.meta ภายในโมดูลและแสดง URL ของโมดูลเป็น import.meta.url

ซึ่งจะมีประโยชน์อย่างยิ่งเมื่อคุณต้องการแก้ไขทรัพยากรที่เกี่ยวข้องกับไฟล์ข้อบังคับแทนเอกสาร HTML ปัจจุบัน

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

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

  • ตอนนี้ Chrome รองรับการจับที่ชื่อและการหนีค่าพร็อพเพอร์ตี้ Unicode ในนิพจน์ทั่วไปแล้ว
  • ค่า preload เริ่มต้นสำหรับองค์ประกอบ <audio> และ <video> เปลี่ยนเป็น metadata แล้ว ซึ่งจะช่วยให้ Chrome ทำงานได้สอดคล้องกับเบราว์เซอร์อื่นๆ และช่วยลดแบนด์วิดท์และการใช้ทรัพยากรด้วยการโหลดเฉพาะข้อมูลเมตาและไม่โหลดสื่อ
  • ตอนนี้คุณใช้ Request.prototype.cache เพื่อดูโหมดแคชของ Request และระบุว่าคำขอเป็นคำขอโหลดซ้ำหรือไม่ได้แล้ว
  • เมื่อใช้ Focus Management API ตอนนี้คุณโฟกัสองค์ประกอบได้โดยไม่ต้องเลื่อนไปหาโดยใช้แอตทริบิวต์ preventScroll

window.alert()

และอีกเรื่อง แม้ว่านี่จะไม่ใช่ "ฟีเจอร์สำหรับนักพัฒนาแอป" จริงๆ แต่เราก็ดีใจ window.alert() จะไม่นําแท็บที่ทำงานอยู่เบื้องหลังมาไว้ที่เบื้องหน้าอีกต่อไป แต่การแจ้งเตือนจะแสดงเมื่อผู้ใช้เปลี่ยนไปใช้แท็บนั้นแทน

แท็บจะไม่สลับไปมาเองอีกต่อไปเนื่องจากมีบางอย่างทำให้ฉันได้รับ window.alert เรากําลังดู Google ปฏิทินเวอร์ชันเก่า

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

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