บทความนี้อธิบายถึงวิธีการของ JS เพื่อป้องกันการกระพริบเมื่อเลื่อนเลย์เอาต์ DIV และแบ่งปันกับคุณสำหรับการอ้างอิงของคุณ วิธีการเฉพาะมีดังนี้:
เมื่อเร็ว ๆ นี้ฉันได้สัมผัสกับประสิทธิภาพของหน้าเว็บและมีเนื้อหาที่ละเอียดอ่อนและเป็นต้นฉบับมากมายเช่นการแสดงผลของเบราว์เซอร์ มีข้อมูลมากมายดังนั้นฉันจึงเลือกบางอย่างสำหรับการแปลและบันทึกข้อตกลง
JavaScript เขียนและอ่าน DOM หลายครั้งและทำให้เกิด "การกระแทกเลย์เอาต์" ทำให้เอกสารไหลเวียนกระบวนการของการสร้างทรีเรนเดอร์
การคัดลอกรหัสมีดังนี้: จาก DOM Tree1)
// อ่าน
var h1 = element1.clientheight;
// เขียน (เลย์เอาต์ไม่ถูกต้อง)
Element1.style.height = (H1 * 2) + 'PX';
// อ่าน (Touch Release)
var h2 = element2.clientheight;
// เขียน (เลย์เอาต์ไม่ถูกต้อง)
Element2.style.height = (H2 * 2) + 'px';
// อ่าน (Touch Release)
var h3 = element3.clientheight;
// เขียน (เลย์เอาต์ไม่ถูกต้อง)
Element3.style.height = (H3 * 2) + 'px';
เมื่อเขียน DOM เค้าโครงจะไม่ถูกต้องและจำเป็นต้องจัดเรียงใหม่ในช่วงเวลาหนึ่ง แต่เบราว์เซอร์ขี้เกียจและต้องการรอจนกว่าการดำเนินการปัจจุบัน (หรือเฟรม) จะจบลงก่อนที่จะทำการจัดเรียงใหม่
อย่างไรก็ตามหากเราอ่านค่าเรขาคณิตจาก DOM ก่อนสิ้นสุดการดำเนินการปัจจุบัน (หรือเฟรม) เราก็บังคับให้เบราว์เซอร์จัดเรียงเค้าโครงล่วงหน้าใหม่ สิ่งนี้เรียกว่า
บนเบราว์เซอร์เดสก์ท็อปสมัยใหม่ผลข้างเคียงของเลย์เอาต์เป็นหลุมเป็นบ่ออาจไม่ชัดเจน แต่บนอุปกรณ์มือถือต่ำสุดปัญหานั้นร้ายแรง
วิธีแก้ปัญหาอย่างรวดเร็ว
ในโลกอุดมคติเราสามารถอ่านและเขียน DOM เป็นแบทช์ได้เพียงแค่จัดเรียงลำดับการดำเนินการรหัสใหม่ ซึ่งหมายความว่าเอกสารจะต้องมีการจัดเรียงใหม่ในครั้งเดียว
คัดลอกรหัสดังนี้:/ อ่าน
var h1 = element1.clientheight;
var h2 = element2.clientheight;
var h3 = element3.clientheight;
// เขียน (เลย์เอาต์ไม่ถูกต้อง)
Element1.style.height = (H1 * 2) + 'PX';
Element2.style.height = (H2 * 2) + 'px';
Element3.style.height = (H3 * 2) + 'px';
// เอกสารจะจัดเรียงใหม่ที่ส่วนท้ายของเฟรม
แล้วโลกแห่งความเป็นจริงล่ะ?
มันไม่ใช่เรื่องง่ายในความเป็นจริง ในโปรแกรมขนาดใหญ่รหัสจะแพร่กระจายไปทุกหนทุกแห่งและมี DOM ที่อันตรายเช่นนี้ เราไม่สามารถผสมโค้ดที่สวยงามและดีของเราได้อย่างง่ายดายเพื่อควบคุมลำดับการดำเนินการ ดังนั้นเพื่อเพิ่มประสิทธิภาพการทำงานเราจะจัดเตรียมการอ่านและเขียนได้อย่างไร?
มารู้ว่าการร้องขอ frame
window.requestanimationframe กำหนดเวลาฟังก์ชันที่จะดำเนินการในเฟรมถัดไปคล้ายกับ settimout (fn, 0) สิ่งนี้มีประโยชน์มากเพราะเราสามารถใช้เพื่อกำหนดเวลาการดำเนินการเขียน DOM ทั้งหมดที่จะดำเนินการร่วมกันในเฟรมถัดไปและการดำเนินการอ่าน DOM จะถูกดำเนินการแบบซิงโครนัสในลำดับปัจจุบัน
คัดลอกรหัสดังนี้:/ อ่าน
var h1 = element1.clientheight;
// เขียน
RequestAnimationFrame (function () {
Element1.style.height = (H1 * 2) + 'PX';
-
// อ่าน
var h2 = element2.clientheight;
// เขียน
RequestAnimationFrame (function () {
Element2.style.height = (H2 * 2) + 'px';
-
-
ฉันหวังว่าคำอธิบายในบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรมเว็บของทุกคนตาม JavaScript