JavaScript ประสิทธิภาพ

แนวทางเพื่อเร่งระบบ JavaScript ของคุณ

ลดกิจกรรมในวงลูป

วงลูปเป็นสิ่งที่ใช้บ่อยในการเขียนโปรแกรม

ในทุกครั้งที่วงลูปเร่งเร็วขึ้น คำสั่งในวงลูป รวมถึง for จะถูกปฎิบัติ

คำสั่งหรือการกำหนดค่าที่สามารถถือว่าจะถูกจัดเก็บนอกวงลูปจะทำให้วงลูปร่งเร็วขึ้น

รหัสที่รุนแรง:

var i;
for (i = 0; i < arr.length; i++) {

รหัสที่ดีขึ้น:

var i;
var l = arr.length;
for (i = 0; i < l; i++) {

รหัสที่รุนแรงจะเข้าถึงองค์ประกอบของแอร์เรย์ในวงลูปทุกครั้ง length attribute.

รหัสที่ดีจะเข้าถึงองค์ประกอบนอกวงลูป length ทางที่ทำให้วงลูปเร่งเร็วขึ้น

ลดการเข้าถึง DOM

การเข้าถึง DOM ใน JavaScript จะช้ากว่า JavaScript อื่นๆ

หากคุณคาดหวังจะเข้าถึงองค์ประกอบ DOM หลายครั้ง ลองเข้าถึงเพียงครั้งเดียวและใช้เป็นตัวแปรท้องที่:

ตัวอย่าง

var obj;
obj = document.getElementById("demo");
obj.innerHTML = "Hello";

ลองด้วยตัวเอง

ลดขนาด DOM

กรุณาให้ความสนใจในการรักษาจำนวนอิเลเมนต์ที่น้อยใน HTML DOM

การกระทำนี้จะเพิ่มการโหลดหน้าเว็บและเร่งการแสดงผล (การแสดงหน้าเว็บ) โดยเฉพาะในอุปกรณ์ที่เล็ก

ในทุกครั้งที่คุณพยายามค้นหา DOM (เช่น getElementsByTagNameจะได้ประโยชน์จาก DOM ที่เล็กกว่า

หลีกเลี่ยงตัวแปรที่ไม่จำเป็น

กรุณาไม่ทำให้มีตัวแปรใหม่ที่คุณไม่คาดหวังจะเก็บค่า

ทั่วไปแล้วคุณสามารถแทนที่โค้ดนี้:

var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;

ใช้โค้ดนี้:

document.getElementById("demo").innerHTML = firstName + " " + lastName

ละเมิดการโหลด JavaScript

กรุณาจัดเก็บสคริปต์ที่ด้านล่างของหน้าเว็บ เพื่อให้เบราเซอร์ลงหน้าเว็บเป็นที่แรก

ขณะที่สคริปต์กำลังดาวน์โหลด บราวเซอร์จะไม่เริ่มดาวน์โหลดอะไรอื่น นอกจากนี้ การแก้ไขและการวาดทั้งหมดอาจถูกขัดขวาง

มาตราฐาน HTTP กำหนดว่าเครื่องนี้ไม่ควรดาวน์โหลดมากกว่าสองประเภทประกอบ

หนึ่งในทางที่สามารถทำได้คือใช้คุณสมบัติ defer ในแท็ก script defer="true"คุณสมบัติ defer กำหนดว่าสคริปต์ควรที่จะปฏิบัติตัวหลังจากการแก้ไขหน้าเสร็จ แต่มันมีผลบวกเฉพาะสคริปต์ภายนอกเท่านั้น

หากท่านสามารถทำได้ ท่านสามารถเพิ่มสคริปต์ลงบนหน้าหลังจากการโหลดหน้าเสร็จด้วยรหัสโดยตรง:

ตัวอย่าง

<script>
window.onload = downScripts;
function downScripts() {
    var element = document.createElement("script");
    element.src = "myScript.js";
    document.body.appendChild(element);
}
</script>

หลีกเลี่ยงการใช้ with

โปรดหลีกเลี่ยงการใช้ with คำสั่งที่มีความเร็วต่ำและสร้างความสับสนใน JavaScript สเคลตร

ในโหมด strictไม่อนุญาต คำสั่ง with