Cải thiện Performance của Javascript - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Cải thiện Performance của Javascript

JavaScript

Hướng dẫn JavaScript

Biểu mẫu JavaScript

Đối tượng JavaScript

Hàm JavaScript

DOM JavaScript

Trình duyệt BOM

JavaScript Ajax

JavaScript Json

Làm thế nào để tăng tốc mã JavaScript của bạn.

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

Vòng lặp Loop 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âu lệnh for, được thực hiện cho mỗi lần lặp của vòng lặp.

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.

Chậm:

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

Nhanh hơn:

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

Mã xấu truy cập thuộc tính length của một mảng mỗi khi vòng lặp được lặp lại. Các mã tốt hơn truy cập vào thuộc tính length bên ngoài vòng lặp và làm cho vòng lặp chạy nhanh hơn.

Giảm truy cập DOM

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 mong muốn truy cập vào 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ư là một biến cục bộ:

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

Giảm kích thước DOM

Giữ số lượng các phần tử trong HTML DOM ít nhất có thể. Điều này sẽ luôn cải tiến việc 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ỏ.

Mỗi nỗ lực tìm kiếm DOM (như getElementsByTagName) sẽ có lợi từ một DOM nhỏ hơn.

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

Không tạo các biến mới nếu bạn không có kế hoạch lưu các giá trị. Thường bạn có thể thay thế mã như thế này:

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

bằng

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

Trì trệ việc tải JavaScript

Đưa các tập lệnh của bạn ở dưới cùng của trang cho phép trình duyệt tải trang đầu tiên. Trong khi một script được tải xuống, trình duyệt sẽ không thực hiện thao tác tải 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.

HTTP xác định rằng các trình duyệt không nên tải nhiều hơn hai thành phần song song.

Một cách khác là sử dụng defer = “true” trong thẻ script. Thuộc tính defer chỉ định rằng script nên được thực hiện sau khi trang đã hoàn thành phân tích cú pháp, nhưng nó chỉ hoạt động cho các script bên ngoài.

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

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

Tránh sử dụng từ khóa with

Tránh sử dụng từ khóa with vì ảnh hưởng tiêu cực đến tốc độ. Nó cũng làm xáo trộn phạm vi JavaScript. Từ khóa with cũng không được phép dùng trong strict mode.