การยับยั้ง CSS ใน Chrome 52

TL;DR

พร็อพเพอร์ตี้ CSS Containment ใหม่ช่วยให้นักพัฒนาซอฟต์แวร์จำกัดขอบเขตของสไตล์ เลย์เอาต์ และงานระบายสีของเบราว์เซอร์ได้

การควบคุม CSS ก่อน: เลย์เอาต์จะใช้เวลา 59.6 มิลลิวินาที หลังจาก: เลย์เอาต์ใช้เวลา 0.05 มิลลิวินาที

ซึ่งมีค่าอยู่ 2-3 ค่า ซึ่งทำให้ไวยากรณ์มีลักษณะดังนี้

    contain: none | strict | content | [ size || layout || style || paint ]

เพราะ Chrome 52 ขึ้นไป และ Opera 40 ขึ้นไป (ได้รับการสนับสนุนจากสาธารณะจาก Firefox) ดังนั้นลองใช้และบอกเราว่าคุณเป็นอย่างไรบ้าง

พร็อพเพอร์ตี้มี

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

ตัวอย่างเช่น สมมติว่า DOM บางส่วนมีลักษณะดังต่อไปนี้

    <section class="view">
      Home
    </section>

    <section class="view">
      About
    </section>

    <section class="view">
      Contact
    </section>

และคุณเพิ่มองค์ประกอบใหม่ลงในมุมมอง 1 รายการ ซึ่งจะเรียกให้แสดงรูปแบบ เลย์เอาต์ และสี

    <section class="view">
      Home
    </section>

    <section class="view">
      About
      <div class="newly-added-element">Check me out!</div>
    </section>

    <section class="view">
      Contact
    </section>

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

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

แต่ที่ดียิ่งกว่านั้นก็คือมีพร็อพเพอร์ตี้ CSS ใหม่ที่จะควบคุมขอบเขตให้กับนักพัฒนาซอฟต์แวร์ได้ นั่นคือ Containment

การควบคุม CSS เป็นพร็อพเพอร์ตี้ใหม่ที่มีคีย์เวิร์ด "ประกอบด้วย" ซึ่งรองรับ 4 ค่า ดังนี้

  • layout
  • paint
  • size
  • style

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

เลย์เอาต์ (มี: เลย์เอาต์)

การควบคุมเลย์เอาต์อาจเป็นประโยชน์ที่ใหญ่ที่สุดของการควบคุม ร่วมกับ contain: paint

โดยปกติเลย์เอาต์จะกำหนดขอบเขตของเอกสาร ทำให้ปรับขนาดตามสัดส่วนของขนาดของ DOM ดังนั้นหากคุณเปลี่ยนพร็อพเพอร์ตี้ left ขององค์ประกอบ คุณอาจต้องตรวจสอบทุกองค์ประกอบใน DOM

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

สี (มี: สี)

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

  • ทำหน้าที่เป็นบล็อกที่เก็บองค์ประกอบที่มีตำแหน่งคงที่และคงที่ ซึ่งหมายความว่าเด็กจะได้รับตำแหน่งตามองค์ประกอบที่มี contain: paint ไม่ใช่องค์ประกอบหลักอื่นๆ เช่น เอกสาร
  • เนื้อหาจะกลายเป็นบริบทแบบซ้อนกัน ซึ่งหมายความว่าสิ่งต่างๆ เช่น z-index จะส่งผลต่อองค์ประกอบ และจะมีการจัดเรียงรายการย่อยตามบริบทใหม่
  • กลายเป็นบริบทการจัดรูปแบบใหม่ ซึ่งหมายความว่า ตัวอย่างเช่น หากคุณมีองค์ประกอบระดับบล็อกที่มีการกันสี องค์ประกอบนั้นจะถือเป็นสภาพแวดล้อมของเลย์เอาต์ใหม่ที่แยกเป็นอิสระ ซึ่งหมายความว่าโดยทั่วไปเลย์เอาต์นอกองค์ประกอบจะไม่ส่งผลต่อองค์ประกอบย่อยขององค์ประกอบที่มีองค์ประกอบอยู่

ขนาด (มี: ขนาด)

ความหมาย contain: size หมายความว่าองค์ประกอบย่อยขององค์ประกอบไม่มีผลต่อขนาดของระดับบนสุด และมิติข้อมูลที่อนุมานหรือที่ประกาศไว้จะเป็นขนาดที่ใช้ ดังนั้นหากคุณตั้งค่า contain: size แต่ไม่ได้ระบุมิติข้อมูลขององค์ประกอบ (ไม่ว่าโดยตรงหรือผ่านพร็อพเพอร์ตี้เฟลกซ์) ก็จะแสดงผลที่ 0 x 0 พิกเซล

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

สไตล์ (มี: สไตล์)

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

เพื่อความชัดเจน สิ่งที่ contain: style ไม่ได้ระบุคือการจัดรูปแบบที่กำหนดขอบเขตซึ่งคุณจะได้รับจาก Shadow DOM การควบคุมในที่นี้มีไว้เพื่อจำกัดส่วนของโครงสร้างต้นไม้ที่ต้องพิจารณาเมื่อมีการเปลี่ยนรูปแบบเท่านั้น ไม่ใช่เมื่อมีการประกาศรูปแบบ

การเข้มงวดและการป้องกันเนื้อหา

นอกจากนี้ คุณยังรวมคีย์เวิร์ด เช่น contain: layout paint ซึ่งจะใช้เฉพาะลักษณะการทำงานเหล่านั้นกับองค์ประกอบได้อีกด้วย แต่ประกอบด้วยรองรับค่าเพิ่มเติมอีก 2 ค่าด้วย ได้แก่

  • contain: strict มีความหมายเหมือนกับ contain: size layout paint
  • contain: content มีความหมายเหมือนกับ contain: layout paint

การใช้การควบคุมแบบเข้มงวดจะมีประโยชน์มากเมื่อคุณทราบขนาดขององค์ประกอบล่วงหน้า (หรือต้องการสงวนขนาดองค์ประกอบ) แต่โปรดทราบว่าหากคุณประกาศการกักเก็บที่เข้มงวดโดยไม่มีมิติข้อมูล เนื่องจากขนาดที่โดยนัย องค์ประกอบอาจแสดงเป็นช่องขนาด 0 x 0 พิกเซล

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

จาก 2 รายการ contain: content คือรายการที่คุณควรจะใช้โดยค่าเริ่มต้น คุณควรถือว่าการควบคุมเข้มงวดเป็นช่องทางลี้ภัยเพิ่มเติมเมื่อ contain: content ยังไม่รัดกุมเพียงพอสำหรับความต้องการ

โปรดแจ้งให้เราทราบการใช้งานของคุณ

การควบคุมเป็นวิธีที่ดีในการเริ่มระบุสิ่งที่คุณต้องการจะแยกไว้ในหน้าเว็บให้เบราว์เซอร์ทราบ ลองใช้งานใน Chrome 52 ขึ้นไป และแจ้งให้เราทราบการใช้งานของคุณ!