Về vấn đề hiệu năng trong JavaScript

Trong bài này bạn sẽ biết cách tăng tốc khả năng thực thi code JavaScript.

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

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

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

Lệnh tìm kiếm hoặc gán có thể được đặt bên ngoài vòng lặp.

Code hiệu năng thấp:

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

Code hiệu năng cao:

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

Code hiệu năng thấp truy cập thuộc tính chiều dài của chuỗi mỗi khi vòng lặp được thực thi.

Code hiệu năng cao truy cập thuộc tính chiều dài bên ngoài vòng lặp, điều đó làm cho vòng lặp chạy nhanh hơn.

Giảm thiểu hoạt động truy cập DOM

Truy cập vào HTML DOM thường rất chậm, nếu bạn so sánh với các lệnh JavaScript khác.

Nếu bạn muốn truy cập vào phần tử DOM nhiều lần, truy cập nó một lần và sử dụng nó như là một biến địa phương sẽ giúp tiết kiệm thời gian hơn nhiều:

Ví dụ

obj = document.getElementById(“demo”);
obj.innerHTML = “Kiến càng”;

Giảm thiểu kích cỡ DOM

Hãy giữ số lượng phần tử trong HTML DOM nhỏ.

Điều này giúp nâng cao tốc độ tải trang, và tăng tốc khả năng xuất dữ liệu (hiển thị trang), đặc biệt là trên các thiết bị nhỏ.

Mọi nỗ lực để tìm kiếm trên DOM (như getElementsByTagName) sẽ được hưởng lợi từ một DOM nhỏ hơn.

Tránh sử dụng các biến không cần thiết

Đừng tạo các biến mới nếu bạn không có kế hoạch sử dụng nó.

Bạn có thấy đoạn code này có cái gì đó thừa thãi không?

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

Bạn nhận ra chưa? đó chính là biến fullName.

Bạn làm như dưới đây, cho kết quả tương tự mà không cần khai báo thêm biến:

document.getElementById(“demo”).innerHTML = firstName + ” ” + lastName

Trì hoãn tải JavaScript

Đưa đoạn mã của bạn vào chân của phần body trang (phần thân), điều này giúp trình duyệt tải trang trước.

Trong khi đoạn mã JavaScript được tải về, trình duyệt sẽ không tải bất cứ thứ gì khác. Thêm vào đó tất cả các hoạt động phân tích và xuất dữ liệu có thể bị chặn lại.

Các đặc điểm kỹ thuật HTTP định nghĩa các trình duyệt không được tải về hơn hai thành phần song song.

Thuộc tính defer=”true” sử dụng trong thẻ script. Thuộc tính “trì hoãn” chỉ định đoạn mã nên được thực thi sau khi trang được phân tích xong, tuy nhiên điều này chỉ áp dụng với các mã JavaScript gắn ngoài.

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

Ví dụ

<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

Tránh sử dụng từ khoá with. Nó làm ảnh hưởng tiêu cực đến tốc độ, làm mã JavaScript thêm hỗn tạp.

Từ khoá with cũng không được cho phép trong mode strict (chế độ nghiêm ngặt).

Leave a Comment