วิธีการเขียน CSS ที่ดีขึ้นด้วยประสิทธิภาพในใจ

ในการโพสต์วันนี้เราจะไตร่ตรองเกี่ยวกับตัวเลือกรหัสที่เราสามารถทำได้ใน CSS เพื่อปรับปรุงประสิทธิภาพของไซต์ แต่ก่อนที่เราจะดำลงไปในตัวเลือกเหล่านั้นก่อนอื่นเราจะมาพิจารณาอย่างย่อและสั้นลงเกี่ยวกับขั้นตอนการแสดงผลเว็บเพจพื้นที่ (ปัญหาที่ชาญฉลาด) ที่มีปัญหาที่สามารถแก้ไขได้ผ่าน CSS.

นี่คือการดำเนินการอย่างคร่าว ๆ ของเบราว์เซอร์หลังจากการสร้างทรี DOM:

1. คำนวณรูปแบบใหม่ (และสร้างการสร้างต้นไม้). เบราว์เซอร์คำนวณสไตล์ที่จะใช้กับองค์ประกอบในแผนผัง DOM โครงสร้างการแสดงผลจะถูกสร้างขึ้นในภายหลังในขณะที่ทิ้งโหนด (องค์ประกอบ) จากต้นไม้ DOM ที่ไม่ต้องการแสดงผล (องค์ประกอบที่มี display: none) และผู้ที่เป็น (องค์ประกอบหลอก).
2. เลย์เอาต์ (aka Reflow). เมื่อใช้รูปแบบที่คำนวณจากก่อนหน้าเบราว์เซอร์จะคำนวณตำแหน่งและรูปทรงเรขาคณิตของแต่ละองค์ประกอบบนหน้า.
3. ทาสี. เมื่อเค้าโครงถูกแมปแล้วพิกเซลจะถูกวาดลงบนหน้าจอ.
4. คอมโพสิตเลเยอร์. ในระหว่างการทาสีใหม่การทาสีอาจทำได้ในหลาย ๆ ชั้นอย่างอิสระ เลเยอร์เหล่านั้นจะรวมเข้าด้วยกันในที่สุด.

ตอนนี้เรามาดูสิ่งที่เราสามารถทำได้ในสามขั้นตอนแรกของการดำเนินการเพื่อเขียนโค้ด CSS ที่มีประสิทธิภาพดีกว่า.

1. ลดการคำนวณสไตล์

อย่างที่กล่าวไว้ก่อนหน้านี้ในสเตจ "สไตล์การคำนวณใหม่" เบราว์เซอร์จะคำนวณสไตล์ที่จะใช้กับองค์ประกอบต่างๆ เมื่อต้องการทำสิ่งนี้เบราว์เซอร์จะค้นหาตัวเลือกทั้งหมดใน CSS ที่ชี้ไปยังโหนดองค์ประกอบที่กำหนดในแผนผัง DOM จากนั้นจะผ่านกฎสไตล์ทั้งหมดในตัวเลือกเหล่านั้นและตัดสินใจว่าจะใช้กฎใดกับองค์ประกอบ.

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

วิธีการจ้างงานอื่น ๆ ได้แก่ ลดจำนวนกฎสไตล์ (ที่เป็นไปได้), ลบ CSS ที่ไม่ได้ใช้ และหลีกเลี่ยง ความซ้ำซ้อน & การแทนที่, เพื่อให้เบราว์เซอร์ไม่ต้องดำเนินการในลักษณะเดียวกันซ้ำแล้วซ้ำอีกในระหว่างการคำนวณลักษณะ.

2. ลดการไหลของ

Reflows หรือการเปลี่ยนแปลงเค้าโครงในองค์ประกอบเป็นกระบวนการ "แพง" มากและอาจเป็นปัญหาที่ใหญ่กว่าเมื่อองค์ประกอบที่ผ่านการเปลี่ยนเค้าโครงมีจำนวนลูกจำนวนมาก (เนื่องจาก เรียงลำดับซ้อนกันลงตามลำดับชั้น).

การเรียกคืนจะถูกเรียกใช้โดยการเปลี่ยนเค้าโครงขององค์ประกอบเช่นการเปลี่ยนแปลงคุณสมบัติทางเรขาคณิตเช่นความสูงหรือขนาดตัวอักษรการเพิ่มหรือลบคลาสสำหรับองค์ประกอบการปรับขนาดหน้าต่างการเปิดใช้งาน : เลื่อน, การเปลี่ยนแปลง DOM โดย JavaScript เป็นต้น.

เช่นเดียวกับการคำนวณรูปแบบเพื่อลดการไหลของข้อมูล, หลีกเลี่ยงตัวเลือกที่ซับซ้อน และ ต้นไม้ DOM ลึก (อีกครั้งเพื่อป้องกันไม่ให้มีการเรียงซ้อนมากเกินไป).

หากคุณต้องเปลี่ยนรูปแบบเค้าโครงของส่วนประกอบในหน้าของคุณ, กำหนดเป้าหมายสไตล์ขององค์ประกอบที่ต่ำที่สุดในลำดับชั้นขององค์ประกอบ ส่วนประกอบนั้นทำจาก นี่คือเพื่อให้การเปลี่ยนแปลงรูปแบบไม่ได้เรียก (เกือบ) Reflow อื่น ๆ.

หากคุณเคลื่อนไหวองค์ประกอบที่ต้องผ่านการเปลี่ยนแปลงเค้าโครง, นำออกจากโฟลว์หน้า โดย การวางตำแหน่ง absoutely มัน, เนื่องจากการ Reflow ในองค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนจะไม่ส่งผลกระทบต่อองค์ประกอบที่เหลือในหน้า.

เพื่อสรุป:

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

3. ลด repaints

ทาสีใหม่หมายถึงการวาดภาพพิกเซลบนหน้าจอและเป็นกระบวนการที่มีราคาแพงเช่นเดียวกับ Reflow การเรียกซ้ำสามารถเรียกใช้โดย Reflows การเลื่อนหน้าการเปลี่ยนแปลงคุณสมบัติเช่นสีการมองเห็นและความทึบ.

เพื่อหลีกเลี่ยงการทำซ้ำบ่อย ๆ และขนาดใหญ่, ใช้คุณสมบัติที่ก่อให้เกิดค่าใช้จ่ายน้อยลง เหมือนเงา.

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

ในบางเบราว์เซอร์, ความทึบแสง (มีค่าน้อยกว่า 1) และ แปลง (นอกเหนือจากค่า ไม่มี) ได้รับการเลื่อนชั้นใหม่โดยอัตโนมัติและมีการใช้การเร่งความเร็วฮาร์ดแวร์สำหรับภาพเคลื่อนไหวและการเปลี่ยน การชอบคุณสมบัติเหล่านี้สำหรับภาพเคลื่อนไหวจึงถือว่าดี.

เพื่อให้เกิดความเข้มแข็ง เลื่อนระดับองค์ประกอบไปยังเลเยอร์ใหม่และเข้าสู่การเร่งด้วยฮาร์ดแวร์ สำหรับแอนิเมชันมีสองเทคนิคที่ invovled:

1. เพิ่ม แปลง: translate3d (0, 0, 0); ไปที่องค์ประกอบโดยหลอกให้เบราว์เซอร์เรียกใช้การเร่งด้วยฮาร์ดแวร์สำหรับภาพเคลื่อนไหวและช่วงการเปลี่ยนภาพ.
2. เพิ่ม จะเปลี่ยน คุณสมบัติให้กับองค์ประกอบซึ่งแจ้งเบราว์เซอร์ของคุณสมบัติที่มีแนวโน้มที่จะเปลี่ยนแปลงในองค์ประกอบในอนาคต. บันทึก: Sara Soueidan มีบทความเชิงลึกและมีประโยชน์มากในเรื่องนี้ในเว็บไซต์ Dev.Opera.

เพื่อสรุป:

• หลีกเลี่ยงรูปแบบที่มีราคาแพงซึ่งเป็นสาเหตุให้ผู้วาด
• แสวงหาการเลื่อนชั้นและการเร่งฮาร์ดแวร์เพื่อสร้างภาพเคลื่อนไหวและการเปลี่ยนที่แข็งแกร่ง.

จดบันทึก

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

(2) นอกจากนี้ยังแนะนำให้เลือก อย่าเปลี่ยนแปลงสไตล์ขององค์ประกอบใน JavaScript มากเกินไป. แทนที่จะเพิ่มคลาสให้กับองค์ประกอบ (โดยใช้ JavaScript) ที่เก็บสไตล์ใหม่เพื่อทำการเปลี่ยนแปลงเหล่านี้ - ซึ่งจะช่วยป้องกันการไหลที่ไม่จำเป็น.

(3) คุณจะต้องการ หลีกเลี่ยงเค้าโครง Thrashing เช่นกัน (การบังคับการซิงโครนัส Reflows) ซึ่งเกิดขึ้นเนื่องจากการเข้าถึงและการแก้ไขคุณสมบัติเค้าโครงขององค์ประกอบโดยใช้ JavaScript อ่านเพิ่มเติมเกี่ยวกับประสิทธิภาพที่ฆ่าได้ที่นี่.