วิธีเพิ่มความเร็วโค้ด JavaScript ของคุณ
ลูปมักใช้ในการเขียนโปรแกรม
แต่ละคำสั่งในลูป รวมถึงคำสั่ง for จะถูกดำเนินการในการวนซ้ำแต่ละครั้ง วนซ้ำ
คำสั่งหรือการมอบหมายงานที่สามารถวางไว้นอกวงจะทำให้ ลูปทำงานเร็วขึ้น
for (let i = 0; i < arr.length; i++) {let l = arr.length;
for (let i = 0; i < l; i++) {รหัสที่ไม่ถูกต้องจะเข้าถึงคุณสมบัติความยาวของอาร์เรย์ทุกครั้งที่มีการวนซ้ำ ทำซ้ำ
รหัสที่ดีกว่าจะเข้าถึงคุณสมบัติความยาวนอกลูปและทำให้ ลูปทำงานเร็วขึ้น
การเข้าถึง HTML DOM นั้นช้ามาก เมื่อเทียบกับคำสั่ง JavaScript อื่นๆ
หากคุณคาดว่าจะเข้าถึงองค์ประกอบ DOM หลายครั้ง ให้เข้าถึงเพียงครั้งเดียวแล้วใช้งาน มันเป็นตัวแปรท้องถิ่น:
const obj = document.getElementById("demo");
obj.innerHTML = "Hello";ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Performance</h2>
<p>If you expect to access a DOM element several times, access it once, and the use it as a local variable:</p>
<p id="demo"></p>
<script>
const obj = document.getElementById("demo");
obj.innerHTML = " Hello";
</script>
</body>
</html>
รักษาจำนวนองค์ประกอบใน 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>หลีกเลี่ยงการใช้คีย์เวิร์ด กับ มันมีผลกระทบเชิงลบต่อ ความเร็ว. นอกจากนี้ยังทำให้ขอบเขต JavaScript ยุ่งเหยิงอีกด้วย
คีย์เวิร์ด with ไม่ได้รับอนุญาต ในโหมดเข้มงวด