Hiệu suất trong JavaScript

Cách tăng tốc mã JavaScript của bạn.

Giảm hoạt động trong vòng lặp

Vòng lặp thường được sử dụng trong lập trình.

Mỗi lần lặp của vòng lặp, mỗi câu lệnh trong vòng lặp, bao gồm for cả các câu lệnh, sẽ được thực thi.

Các câu lệnh hoặc gán giá trị có thể đặt bên ngoài vòng lặp sẽ làm cho vòng lặp chạy nhanh hơn.

Mã xấu:

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

Mã tốt hơn:

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

Mã xấu sẽ truy cập vào mảng trong mỗi lần lặp: length thuộc tính.

Mã tốt sẽ truy cập bên ngoài vòng lặp length thuộc tính, để làm cho vòng lặp nhanh hơn.

Giảm số lần truy cập DOM

So với JavaScript khác, việc truy cập vào HTML DOM rất chậm.

Nếu bạn mong muốn truy cập vào một yếu tố DOM nhiều lần, hãy chỉ truy cập một lần và sử dụng nó như một biến cục bộ:

Mô hình

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

Hãy thử tự mình

Giảm quy mô DOM

Hãy cố gắng duy trì số lượng yếu tố ít hơn trong HTML DOM.

Làm như vậy sẽ luôn luôn tăng tốc độ tải trang và tăng tốc độ render (hiển thị trang), đặc biệt là trên các thiết bị nhỏ.

Mỗi lần cố gắng tìm kiếm DOM (ví dụ như getElementsByTagName）sẽ获益于 một DOM nhỏ hơn.

Tránh biến không cần thiết

Hãy không tạo biến mới mà không dự định lưu trữ giá trị.

Thường thì bạn có thể thay thế mã:

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

Dùng đoạn mã này:

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

Độ trễ tải JavaScript

Đặt kịch bản ở cuối trang, để trình duyệt tải trang trước tiên.

Khi tải xuống, trình duyệt sẽ không khởi động bất kỳ tải xuống nào khác. Ngoài ra, tất cả các hoạt động phân tích và render có thể bị chặn.

Tiêu chuẩn HTTP định nghĩa rằng trình duyệt không nên tải song song quá hai yếu tố.

Một tùy chọn là sử dụng trong thẻ script defer="true".Thuộc tính defer quy định rằng mã nên được thực thi sau khi trang hoàn thành phân tích, nhưng nó chỉ áp dụng cho mã bên ngoài.

Nếu có thể, bạn có thể thêm mã vào trang sau khi trang đã tải xong bằng mã:

Mô hình

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

Tránh sử dụng with

Hãy tránh sử dụng with Từ khóa. Nó có tác động tiêu cực đến tốc độ. Nó cũng có thể làm rối loạn phạm vi JavaScript.

Trong chế độ chặt chẽKhông được phép Từ khóa with.