ประสิทธิภาพของ JavaScript
วิธีเพิ่มความเร็วโค้ด JavaScript ของคุณ
ลดกิจกรรมในลูป
ลูปมักใช้ในการเขียนโปรแกรม
แต่ละคำสั่งในลูป รวมถึงคำสั่ง for จะถูกดำเนินการสำหรับการวนซ้ำแต่ละครั้ง
คำสั่งหรือการมอบหมายที่สามารถวางนอกลูปจะทำให้การวนซ้ำทำงานเร็วขึ้น
แย่:
for (let i = 0; i < arr.length; i++) {
รหัสที่ดีกว่า:
let l = arr.length;
for (let i = 0; i < l; i++) {
รหัสที่ไม่ถูกต้องเข้าถึงคุณสมบัติความยาวของอาร์เรย์ทุกครั้งที่วนซ้ำ
รหัสที่ดีกว่าจะเข้าถึงคุณสมบัติความยาวนอกลูปและทำให้การวนซ้ำทำงานเร็วขึ้น
ลดการเข้าถึง DOM
การเข้าถึง HTML DOM นั้นช้ามาก เมื่อเทียบกับคำสั่ง JavaScript อื่นๆ
หากคุณคาดว่าจะเข้าถึงองค์ประกอบ DOM หลายครั้ง ให้เข้าถึงเพียงครั้งเดียว และใช้เป็นตัวแปรในเครื่อง:
ตัวอย่าง
const obj = document.getElementById("demo");
obj.innerHTML = "Hello";
ลดขนาด DOM
รักษาจำนวนองค์ประกอบใน HTML DOM ให้น้อย
สิ่งนี้จะปรับปรุงการโหลดหน้าเสมอ และเพิ่มความเร็วในการแสดงผล (การแสดงหน้า) โดยเฉพาะบนอุปกรณ์ขนาดเล็ก
ทุกความพยายามในการค้นหา DOM (เช่น getElementsByTagName) จะได้รับประโยชน์จาก DOM ที่เล็กกว่า
หลีกเลี่ยงตัวแปรที่ไม่จำเป็น
อย่าสร้างตัวแปรใหม่หากคุณไม่ได้วางแผนที่จะบันทึกค่า
บ่อยครั้งคุณสามารถเปลี่ยนรหัสได้ดังนี้:
let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
ด้วยสิ่งนี้:
document.getElementById("demo").innerHTML = firstName + " " + lastName;
ความล่าช้าในการโหลดจาวาสคริปต์
การวางสคริปต์ของคุณไว้ที่ด้านล่างสุดของเนื้อหาหน้าทำให้เบราว์เซอร์โหลดหน้าก่อน
ขณะที่กำลังดาวน์โหลดสคริปต์ เบราว์เซอร์จะไม่เริ่มการดาวน์โหลดอื่นๆ นอกจากนี้ กิจกรรมการแยกวิเคราะห์และการแสดงผลทั้งหมดอาจถูกบล็อก
ข้อกำหนด HTTP กำหนดว่าเบราว์เซอร์ไม่ควรดาวน์โหลดมากกว่าสององค์ประกอบพร้อมกัน
อีกทางเลือกหนึ่งคือใช้defer="true"
ในแท็กสคริปต์ แอตทริบิวต์ defer ระบุว่าสคริปต์ควรถูกเรียกใช้งานหลังจากที่หน้าแยกวิเคราะห์เสร็จแล้ว แต่จะใช้ได้เฉพาะกับสคริปต์ภายนอกเท่านั้น
หากเป็นไปได้ คุณสามารถเพิ่มสคริปต์ของคุณไปที่หน้าด้วยรหัส หลังจากที่โหลดหน้าแล้ว:
ตัวอย่าง
<script>
window.onload = function() {
const element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>
หลีกเลี่ยงการใช้กับ
หลีกเลี่ยงการใช้with
คำสำคัญ มีผลเสียต่อความเร็ว นอกจากนี้ยังทำให้ขอบเขต JavaScript รกอีกด้วย
ไม่อนุญาตให้ใช้คีย์เวิร์ดwith
ในโหมดเข้มงวด