กระบวนการที่เบราว์เซอร์คำนวณตำแหน่งและรูปทรงขององค์ประกอบของหน้าใหม่เพื่อเรนเดอร์บางส่วนหรือทั้งหน้าใหม่เรียกว่าการจัดเรียงใหม่ เนื่องจากการจัดเรียงใหม่เป็นการดำเนินการบล็อกผู้ใช้ในเบราว์เซอร์ จึงเป็นสิ่งสำคัญที่จะต้องเข้าใจวิธีลดจำนวนการจัดเรียงใหม่และคุณลักษณะของเอกสารที่แตกต่างกัน (ความลึกของ DOM, ประสิทธิภาพของ CSS, การเปลี่ยนแปลงสไตล์โดยไม่มีประเภท) ส่งผลต่อจำนวนการจัดเรียงใหม่อย่างไร จำเป็นมากสำหรับนักพัฒนา บางครั้งองค์ประกอบในหน้าการจัดเรียงใหม่จะจัดเรียงองค์ประกอบหลักใหม่ (คำอธิบายประกอบ: พหูพจน์ที่นี่) และองค์ประกอบย่อยทั้งหมด
มีการดำเนินการต่างๆ ของผู้ใช้และการเปลี่ยนแปลง DHTML ที่อาจก่อให้เกิดการจัดเรียงใหม่ การปรับขนาดหน้าต่างเบราว์เซอร์ การใช้จาวาสคริปต์ในการคำนวณสไตล์ ( รูปแบบที่คำนวณ ) การสร้างและการลบองค์ประกอบใน DOM และการเปลี่ยนคลาสขององค์ประกอบจะทำให้เกิดการจัดเรียงใหม่ เป็นที่น่าสังเกตว่าการดำเนินการบางอย่างจะทำให้เกิดการจัดเรียงซ้ำหลายครั้ง ซึ่งเกินกว่าที่คุณจะจินตนาการได้ ภาพต่อไปนี้มาจากสุนทรพจน์ของ Steve Souders " Even Faster Web Sites ":
จากตารางด้านบน เห็นได้ชัดว่าไม่ใช่ทุกสไตล์ที่ควบคุมด้วย JavaScript จะทริกเกอร์การจัดเรียงใหม่ในทุกเบราว์เซอร์ และแม้ว่าจะถูกทริกเกอร์ แต่จำนวนครั้งก็ไม่เท่ากัน ในขณะเดียวกัน จะเห็นได้ว่าเบราว์เซอร์สมัยใหม่เริ่มดีขึ้นเรื่อยๆ ในการควบคุมจำนวนการเรียงซ้ำ
ที่ Google เราวัดความเร็วของหน้าเว็บและเว็บแอปพลิเคชันด้วยวิธีต่างๆ มากมาย และการจัดเรียงใหม่เป็นปัจจัยสำคัญที่เราพิจารณาเมื่อเพิ่ม UI เรามุ่งมั่นที่จะมอบประสบการณ์ผู้ใช้ที่มีชีวิตชีวา มีการโต้ตอบ และน่าพึงพอใจ
ในหลักการ
ต่อไปนี้เป็นหลักการบางประการในการลดการไหลซ้ำ:
ในวิดีโอด้านล่าง (ไม่สามารถดูคำอธิบายประกอบ: อ้างอิงจาก YouTube ได้ โปรดไปที่ข้อความต้นฉบับเพื่อหลีกเลี่ยงกำแพง) Lindsey แนะนำวิธีการบางอย่างเพื่อลดการเรียงซ้ำ
อ่านเพิ่มเติม
การแปลต้นฉบับ: http://www.99css.com/2009/06/minimizing-browser-reflow.html