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

Pete LePage

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

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

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

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

ResizeObserver

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

แล้วจะเกิดอะไรขึ้นถ้าหน้าต่างเบราว์เซอร์ไม่เปลี่ยนขนาด แต่มีการเพิ่มองค์ประกอบใหม่ในเอกสาร หรือคุณได้เพิ่ม 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