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

สรุปคร่าวๆ

พร็อพเพอร์ตี้ 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 ใหม่ที่มอบการควบคุมให้แก่นักพัฒนาแอป ซึ่งก็คือการควบคุม

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

  • layout
  • paint
  • size
  • style

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

เลย์เอาต์ (มี: เค้าโครง)

การล้อมองค์ประกอบรูปแบบน่าจะเป็นข้อดีสูงสุดของการควบคุม เช่นเดียวกับ contain: paint

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

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

สี (มี: สี)

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

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

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

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

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

รูปแบบ (มี: รูปแบบ)

การคาดเดาสิ่งที่จะเกิดขึ้นกับแผนผัง 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 ขึ้นไป แล้วบอกเราว่าคุณเป็นอย่างไรบ้าง