Hiệu suất 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 câu lệnh trong một vòng lặp, bao gồm cả câu lệnh for, được thực thi cho mỗi lần lặp của vòng lặp.
Các câu lệnh hoặc phép gán có thể được đặt bên ngoài vòng lặp sẽ làm cho vòng lặp chạy nhanh hơn.
Tồi tệ:
for (let i = 0; i < arr.length; i++) {
Mã tốt hơn:
let l = arr.length;
for (let i = 0; i < l; i++) {
Mã xấu truy cập thuộc tính độ dài của một mảng mỗi khi vòng lặp được lặp lại.
Mã tốt hơn truy cập thuộc tính độ dài bên ngoài vòng lặp và làm cho vòng lặp chạy nhanh hơn.
Giảm quyền truy cập DOM
Việc truy cập HTML DOM rất chậm, so với các câu lệnh JavaScript khác.
Nếu bạn muốn truy cập một phần tử DOM nhiều lần, hãy truy cập nó một lần và sử dụng nó như một biến cục bộ:
Thí dụ
const obj = document.getElementById("demo");
obj.innerHTML = "Hello";
Giảm kích thước DOM
Giữ số lượng phần tử trong HTML DOM nhỏ.
Điều này sẽ luôn cải thiện tải trang và tăng tốc độ hiển thị (hiển thị trang), đặc biệt là trên các thiết bị nhỏ hơn.
Mọi nỗ lực tìm kiếm DOM (như getElementsByTagName) sẽ được hưởng lợi từ DOM nhỏ hơn.
Tránh các biến không cần thiết
Đừng tạo biến mới nếu bạn không có kế hoạch lưu giá trị.
Thường thì bạn có thể thay thế mã như thế này:
let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
Với cái này:
document.getElementById("demo").innerHTML = firstName + " " + lastName;
Trì hoãn tải JavaScript
Đặt các tập lệnh của bạn ở cuối thân trang sẽ cho phép trình duyệt tải trang trước.
Trong khi một tập lệnh đang tải xuống, trình duyệt sẽ không bắt đầu bất kỳ quá trình tải xuống nào khác. Ngoài ra, tất cả hoạt động phân tích cú pháp và hiển thị có thể bị chặn.
Đặc tả HTTP xác định rằng các trình duyệt không được tải xuống nhiều hơn hai thành phần song song.
Một giải pháp thay thế là sử dụng defer="true"trong thẻ script. Thuộc tính defer chỉ định rằng tập lệnh sẽ được thực thi sau khi trang hoàn tất quá trình phân tích cú pháp, nhưng nó chỉ hoạt động đối với các tập lệnh bên ngoài.
Nếu có thể, bạn có thể thêm tập lệnh của mình vào trang bằng mã, sau khi trang tải xong:
Thí dụ
<script>
window.onload = function() {
const element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>
Tránh sử dụng với
Tránh sử dụng withtừ khóa. Nó có ảnh hưởng tiêu cực đến tốc độ. Nó cũng làm lộn xộn các phạm vi JavaScript.
Từ withkhóa không được phép ở chế độ nghiêm ngặt.