นับตั้งแต่เปิดตัวตัวควบคุมแผนผัง MzTreeView1.0 ของฉัน ฉันได้รับคำติชมมากมาย ชาวเน็ตจำนวนมากให้คำแนะนำที่เกี่ยวข้องแก่ฉันมากมาย และชี้ให้เห็นข้อบกพร่องและข้อบกพร่องมากมายในการควบคุมนี้ ดังนั้นฉันจึงวางแผนที่จะเขียนเวอร์ชันใหม่ Tree รวมข้อเสนอแนะของทุกคนไปสู่การปฏิบัติ ฉันกำลังเขียนเวอร์ชันใหม่ของแผนผังนี้ สิ่งที่สำคัญที่สุดเกี่ยวกับการควบคุมแผนผังคือประสิทธิภาพ โดยเฉพาะอย่างยิ่งเมื่อจำนวนโหนดมีขนาดใหญ่ โหมดที่มีประสิทธิภาพน้อยลงเล็กน้อยจะทำให้เบราว์เซอร์ไม่ทำงาน สิ่งสำคัญอันดับแรกของฉันคือการปรับปรุงประสิทธิภาพ เช่น การเพิ่มการรองรับการโหลดข้อมูลแบบอะซิงโครนัส เป็นต้น นอกจากนี้ ฉันยังมีความคิดที่ว่าเส้นแนวตั้งของโครงสร้างต้นไม้ถูกนำมาใช้โดยใช้สไตล์ชีต (ภาพพื้นหลัง) ภาพพื้นหลังสไตล์ชีทจะต้องโหลดเพียงครั้งเดียว และตอนนี้โหมดนี้ (โดยใช้ แม้ว่ารูปภาพ <img> หลายรูป) จะมีกลไกการแคช แต่ก็ยังสามารถขอเซิร์ฟเวอร์ได้หนึ่งครั้งสำหรับรูปภาพขนาดเล็กแต่ละรูป ดังนั้นฉันจึงคิดว่ามันดีแค่ไหน จะใช้สไตล์ชีตเพื่อให้บรรลุเป้าหมายนี้ โค้ดมีความคล่องตัว โครงสร้างชัดเจน และผลที่ได้ก็เยี่ยมมาก แต่หลังจากการทดสอบเกือบหนึ่งสัปดาห์ ความคิดของฉันก็ล้มเหลวโดยสิ้นเชิง สไตล์ชีตไม่ดีเกินไป แนวคิดใหม่นี้ไม่สามารถเกิดขึ้นได้ และฉันรู้สึกหงุดหงิดเล็กน้อย แต่ฉันคิดว่าควรแบ่งปันผลการทดสอบกับทุกคน
ในที่นี้ฉันจะอธิบายเส้นแนวตั้งในรูปต้นไม้ มี ┌ ├ │ │ ทางด้านซ้ายของต้นไม้ เส้นแนวตั้งเหล่านี้แสดงถึงระดับของต้นไม้ ในเวอร์ชัน 1.0 ของฉัน ฉันใช้รูปภาพขนาดเล็กซ้อนกันทีละภาพ ประเภทของการใช้งาน สไตล์ชีตถูกนำมาใช้โดยใช้โค้ดเช่น <div class="l2"></div> และสไตล์ชีตมีหน้าที่ในการเติมภาพพื้นหลัง
#mtvroot div td{ความกว้าง:20px;ความสูง:20px;}
#mtvroot .l0{พื้นหลัง:url(line0.gif) ไม่ทำซ้ำศูนย์}
#mtvroot .l1{พื้นหลัง:url(line1.gif) ศูนย์ไม่ซ้ำ}
#mtvroot .l2{พื้นหลัง:url(line2.gif) ไม่ทำซ้ำศูนย์}
#mtvroot .l3 {พื้นหลัง: url (line3.gif) ไม่ทำซ้ำศูนย์}
#mtvroot .l4{พื้นหลัง:url(line4.gif) ไม่ทำซ้ำศูนย์}
#mtvroot .ll{พื้นหลัง:url(line5.gif) ศูนย์ไม่ทำซ้ำ}
#mtvroot .pm0 {พื้นหลัง: url (plus0.gif) ศูนย์ไม่ซ้ำ}
#mtvroot .pm1 {พื้นหลัง: url (plus1.gif) ศูนย์ไม่ซ้ำ}
#mtvroot .pm2 {พื้นหลัง: url (plus2.gif) ศูนย์ไม่ซ้ำ}
#mtvroot .pm3 {พื้นหลัง: url (plus3.gif) ศูนย์ไม่ซ้ำ}
#mtvroot .expand .pm0{พื้นหลัง: url (ลบ0.gif) ศูนย์ไม่ซ้ำ}
#mtvroot .expand .pm1{พื้นหลัง:url(minus1.gif) ศูนย์ไม่ซ้ำ}
#mtvroot .expand .pm2{พื้นหลัง: url (ลบ2.gif) ศูนย์ไม่ซ้ำ}
#mtvroot .expand .pm3{พื้นหลัง:url(minus3.gif) no-repeat center}
CSS ข้างต้นเป็นส่วนหนึ่งของสไตล์ที่ฉันสร้างขึ้นแบบไดนามิกในสคริปต์ ซึ่งฉันโพสต์ไว้เพื่อช่วยอธิบายในภายหลัง หลังจากใช้สไตล์ชีท มันได้รับการปรับปรุงให้ดีขึ้นมากและการสร้างแต่ละโหนดก็เร็วพอ อย่างไรก็ตาม ฉันพบว่าเมื่อจำนวนโหนดแบบต้นไม้ของฉันถึง เช่น 300-500 โหนด ประสิทธิภาพของการสร้างโหนดก็ไม่มีผลกระทบใดๆ แต่ทุกครั้ง การขยาย/ย่อโหนดจะช้ามาก ใช้เวลามากกว่าสองสามวินาทีหรือ 10 วินาที และการใช้งาน CPU ในช่วงเวลานี้คือ 100% เพื่ออธิบาย การขยาย/การหดตัวของทรีทำได้โดยการตั้งค่า style.display = none|block ของโหนดพาเรนต์ การกำหนดค่าคอมพิวเตอร์ของฉันคือ: หน่วยความจำ AMD2800+ 1GDDR400 การกำหนดค่าก็ไม่เลว
ปฏิกิริยาแรกของฉันคือ: การใช้ <table>s มากเกินไปส่งผลต่อประสิทธิภาพหรือไม่ เนื่องจากฉันใช้ <table> สำหรับแต่ละโหนด แต่ฉันแทนที่ <table> ด้วย <div>, <span> ฯลฯ แต่ไม่มีการปรับปรุงประสิทธิภาพซึ่งหมายความว่าปัญหาการใช้งาน CPU 100% ไม่ใช่ ปัญหาของแท็ก HTML ปัญหาที่เหลือคือการใช้สไตล์ชีตที่นี่
จากตัวอย่างจำนวน 500 โหนด จะมีรูปภาพขนาดเล็กประมาณ 2,000 ภาพซ้อนกันทางด้านซ้ายใน 1.0 ในกรณีนี้ จะมีปัญหาใหญ่เมื่อตั้งค่าเบราว์เซอร์ไม่ให้แคชในเครื่อง ต้องใช้เวลาและทรัพยากรเซิร์ฟเวอร์มากในการโหลดรูปภาพขนาดเล็กจำนวนมากเหล่านี้ ดังนั้นฉันจึงมีสไตล์ชีตใหม่นี้ วิธีแก้ปัญหาคือตอนนี้ใช้แล้ว วิธีสไตล์ชีต ซึ่งหมายความว่ามีประมาณ 2,000 ตำแหน่งที่ต้องใช้สไตล์ชีตในการแสดงภาพพื้นหลัง ฉันทดสอบสถานการณ์ต่างๆ และเปรียบเทียบกับโค้ดเวอร์ชัน 1.0 และได้ข้อสรุปว่าอัตราการใช้งาน CPU สูงมาก เหตุผลเดียวคือการเรนเดอร์ที่ใช้เวลานาน การตรวจสอบก็ง่ายมาก ฉันลบส่วน #mtvroot ทางด้านซ้ายของสไตล์ชีตด้านบนออก ซึ่งหมายถึงการลบความสัมพันธ์การพึ่งพาของสไตล์ชีตออก ผลการทดสอบพบว่าประสิทธิภาพดีขึ้นมาก แต่ใช้เวลานาน ยังคงมากอยู่ 3-5 วินาที มาก
นอกจากนี้ ฉันเปลี่ยนไปใช้เบราว์เซอร์อื่น และผลการทดสอบก็แตกต่างออกไปด้วย สิ่งที่น่าขยะแขยงที่สุดคือใน IE ตัวอย่างเช่น หากฉันมีโหนดย่อย 500 โหนด ฉันจะปิดมัน (CPU 100% รอ 3 -5 วินาที) นั่นคือ display="none" ในเวลานี้ ถ้าฉันยุบโหนดหลักของโหนดนี้ (โหนดนี้ไม่มีโหนดพี่น้องอื่น นั่นคือ โหนดหลักของมันมีเพียงโหนดย่อยที่เหมือนกันเท่านั้น) มีเหตุผลว่ามีเพียงโหนดเดียวยุบทันที แต่ผลลัพธ์คือ CPU 100% เป็นเวลา 3-5 วินาที นี่ทำให้ฉันบ้าและหดหู่ใจ วัตถุ HTML ถูกซ่อนโดย display="none" ซึ่งเป็นพาเรนต์ เมื่อดำเนินการใดๆ ในระดับนั้น IE จะแสดงวัตถุที่ซ่อนอยู่เหล่านี้อีกครั้งโดยใช้สไตล์ชีต ฉันไม่เข้าใจว่านักพัฒนาของ IE กำลังคิดอะไรอยู่
ฉันไปที่ FIREFOX เพื่อทดสอบอีกครั้ง เมื่อพับแล้ว (display=none) มันเกิดขึ้นทันที ฉันมั่นใจได้ว่า FF จะไม่ใช้พลังงานอีกต่อไปเมื่อจัดการกับวัตถุที่ซ่อนอยู่ แน่นอนว่าเบราว์เซอร์ทั้งหมดจะเหมือนกันเมื่อขยาย: CPU 3-5 วินาที 100% แต่ FF จะเร็วกว่าเล็กน้อย
จากปรากฏการณ์ข้างต้น ฉันจึงได้ข้อสรุป: สไตล์ชีทไม่มีประสิทธิภาพเมื่อเรนเดอร์แบบไดนามิก เมื่อคอนเทนเนอร์หลักตรวจพบการเปลี่ยนแปลงสถานะ มันจะทำให้สไตล์ชีตของออบเจ็กต์ที่สืบทอดทั้งหมดถูกเรนเดอร์ใหม่ วัตถุ noneHidden จะไม่แสดงผลซ้ำ แต่ IE จะทำ
เหตุใดจึงไม่เคยพบปัญหาประสิทธิภาพการเรนเดอร์สไตล์ชีทนี้มาก่อน สวัสดี เมื่อคุณสร้างหน้าเว็บ คุณแทบจะไม่ได้ทำอะไรสุดโต่งขนาดนั้น ในหน้าเว็บมีภาพพื้นหลังนับพันภาพที่ต้องใช้สไตล์ชีทในการแสดงภาพพื้นหลัง โดยปกติแล้วจะมีเพียงไม่กี่ที่หรือหลายสิบแห่ง ดังนั้นคุณจะไม่รู้สึกถึงประสิทธิภาพของการเรนเดอร์ และคุณไม่รู้สึกถึงความแตกต่างระหว่างเบราว์เซอร์ต่างๆ ในเรื่องนี้ อย่างไรก็ตาม เมื่อสร้างการควบคุม เช่น ทรี คุณจะพบกับปัญหาร้ายแรงมากมาย เช่น อาร์เรย์ข้อมูลขนาดใหญ่ จำนวนอ็อบเจ็กต์ HTML ที่สร้างขึ้น เป็นต้น ความแตกต่างในประสิทธิภาพการเรนเดอร์คือเมื่อฉันเขียนสคริปต์ JS เพียงปัญหาเดียวเท่านั้น เผชิญหน้า วันนี้ผมมาแชร์ผลการทดสอบนี้โดยหวังว่าจะเป็นประโยชน์กับทุกคนในการเขียนโปรแกรมในอนาคตและนำไปพิจารณาเมื่อทำการออกแบบด้วย
สุดท้ายนี้ ขอขอบคุณทุกท่านสำหรับการยืนยันและการสนับสนุนการควบคุมที่ฉันเขียน ขอบคุณ!