เมื่อเราพัฒนา Rich Internet Applications (RIA) เรามักจะเขียนสคริปต์จาวาสคริปต์เพื่อแก้ไขหรือเพิ่มองค์ประกอบของหน้า ในที่สุดงานเหล่านี้จะเสร็จสมบูรณ์โดย DOM - หรือ Document Object Model - และวิธีการใช้งานของเราจะส่งผลต่อความเร็วในการตอบสนองของแอปพลิเคชัน
การดำเนินการ DOM จะทำให้เบราว์เซอร์แยกวิเคราะห์ใหม่ (จัดเรียงใหม่) ซึ่งเป็นกระบวนการคำนวณของเบราว์เซอร์ที่กำหนดวิธีการแสดงองค์ประกอบของหน้า การแก้ไข DOM โดยตรง การแก้ไขสไตล์ CSS ขององค์ประกอบ หรือการแก้ไขขนาดหน้าต่างเบราว์เซอร์จะทำให้เกิดการแยกวิเคราะห์ใหม่ การอ่านคุณสมบัติโครงร่างขององค์ประกอบ เช่น offsetHeithe หรือ offsetWidth จะทริกเกอร์การแยกวิเคราะห์ใหม่ด้วย การแยกวิเคราะห์ใหม่ต้องใช้เวลาในการคำนวณ ดังนั้น ยิ่งมีการทริกเกอร์การแยกวิเคราะห์น้อยลง แอปพลิเคชันก็จะยิ่งเร็วขึ้นเท่านั้น
การดำเนินการ DOM มักจะแก้ไของค์ประกอบของหน้าที่มีอยู่หรือสร้างองค์ประกอบของหน้าใหม่ โซลูชันการปรับให้เหมาะสมสี่ประการต่อไปนี้ครอบคลุมสองวิธีในการแก้ไขและสร้างโหนด DOM ซึ่งช่วยให้คุณลดจำนวนครั้งที่ทริกเกอร์การแยกวิเคราะห์เบราว์เซอร์อีกครั้ง
โซลูชันที่ 1: แก้ไข DOM โดยการเปลี่ยนชื่อคลาส CSS
โซลูชันนี้ช่วยให้เราสามารถแก้ไขแอตทริบิวต์สไตล์หลายรายการขององค์ประกอบและองค์ประกอบย่อยได้ในคราวเดียว และทริกเกอร์การแยกวิเคราะห์ใหม่เพียงครั้งเดียวเท่านั้น
ความต้องการ:
( หมายเหตุนกอีมู : ผู้เขียนบทความต้นฉบับเห็นได้ชัดว่ามีการลัดวงจรในสมองของเขาเมื่อเขาเขียนสิ่งนี้ และนำปัญหามาแก้ไขในโหมดการจัดการ DOM แบบไม่ไหลลื่นที่ตามมาที่นี่ อย่างไรก็ตาม มันเป็น ผู้เขียนเข้าใจง่ายจากโค้ดสาธิต ปัญหาที่อยากอธิบายจริงๆ นกอีมูจะไม่ทำซ้ำข้อความต้นฉบับ)
ตอนนี้เราจำเป็นต้องเขียนฟังก์ชันเพื่อแก้ไขกฎสไตล์ต่างๆ ของไฮเปอร์ลิงก์ การนำไปใช้นั้นง่ายมาก เพียงเปลี่ยนแอตทริบิวต์ที่สอดคล้องกับกฎเหล่านี้ทีละรายการ แต่ปัญหาคือทุกครั้งที่มีการแก้ไขแอตทริบิวต์ style จะทำให้มีการแยกวิเคราะห์หน้าเว็บใหม่
ฟังก์ชั่น selectAnchor (องค์ประกอบ) {
element.style.fontWeight = 'ตัวหนา';
element.style.textDecoration = 'ไม่มี';
element.style.color = '#000';
-
สารละลาย:
เพื่อแก้ไขปัญหานี้ อันดับแรกเราสามารถสร้างชื่อสไตล์และใส่กฎสไตล์ทั้งหมดที่จะแก้ไขบนชื่อคลาสนี้ จากนั้นเราจะเพิ่มชื่อคลาสใหม่นี้ในไฮเปอร์ลิงก์ เพื่อให้เราสามารถเพิ่มกฎสไตล์ได้หลายกฎ และมีเพียงการแยกวิเคราะห์ใหม่เท่านั้น กระตุ้น ข้อดีอีกประการของโมเดลนี้คือสามารถแยกประสิทธิภาพและตรรกะออกจากกันได้
.selectedAnchor {
น้ำหนักตัวอักษร: ตัวหนา;
การตกแต่งข้อความ: ไม่มี;
สี: #000;
-
ฟังก์ชั่น selectAnchor (องค์ประกอบ) {
element.className = 'selectedAnchor';
-