การเข้าถึงองค์ประกอบ DOM นั้นมีค่าใช้จ่ายและการปรับเปลี่ยนองค์ประกอบ DOM นั้นมีราคาแพงกว่าเพราะมันทำให้เบราว์เซอร์คำนวณการเปลี่ยนแปลงทางเรขาคณิตของหน้าใหม่
แน่นอนกรณีที่เลวร้ายที่สุดคือการเข้าถึงองค์ประกอบที่แก้ไขในลูปโดยเฉพาะการดำเนินการวนซ้ำในคอลเลกชันองค์ประกอบ HTML
ตัวอย่างเช่น:
การคัดลอกรหัสมีดังนี้:
<!-ก่อนการเพิ่มประสิทธิภาพ->
<script type = "text/javascript">
ฟังก์ชั่น innerhtmlloop () {
สำหรับ (var count = 0; count <15000; count ++) {
document.getElementById ('ที่นี่'). innerhtml+= 'a';
-
-
</script>
ฟังก์ชั่นนี้ลูปเพื่อแก้ไขเนื้อหาขององค์ประกอบหน้า ปัญหาเกี่ยวกับรหัสนี้คือการวนซ้ำแต่ละลูปองค์ประกอบจะถูกเข้าถึงสองครั้ง: เมื่ออ่านคุณสมบัติ InnerHTML และเมื่อเขียนใหม่
วิธีที่มีประสิทธิภาพมากขึ้นคือการใช้ตัวแปรท้องถิ่นเพื่อจัดเก็บเนื้อหาที่อัปเดตแล้วเขียนในครั้งเดียวหลังจากลูปสิ้นสุดลง:
การคัดลอกรหัสมีดังนี้:
<!-หลังจากการเพิ่มประสิทธิภาพ->
<script type = "text/javascript">
ฟังก์ชั่น innerhtmlloop () {
var content = '';
สำหรับ (var count = 0; count <15000; count ++) {
เนื้อหา+= 'a';
-
document.getElementById ('ที่นี่'). innerhtml+= เนื้อหา;
-
</script>
ยิ่งคุณเข้าถึง DOM ได้มากเท่าไหร่รหัสก็จะช้าลง ดังนั้นเมื่อมีวิธีแก้ปัญหาอื่น ๆ ที่จะแทนที่เราควรพยายามลดจำนวนการเข้าชม DOM ให้น้อยที่สุด