JavaScript Performance - Hiệu năng trong JavaScript
Làm cách nào để tăng tốc độ cho code JavaScript của bạn.
Giảm hoạt động trong các vòng lặp
Các vòng lặp thường được 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 thi cho mỗi lần lặp của vòng lặp.
Các câu lệnh hoặc cá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.
Không tốt:
var i;
for (i = 0; i < arr.length; i++) {Code tốt hơn
var i;
var l = arr.length;
for (i = 0; i < l; i++) {
Đoạn code không tốt truy cập vào thuộc tính length của một mảng mỗi lần vòng lặp được lặp.
Đoạn code 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 chay nhanh hơn.
Giảm thiểu truy cập vào DOM
Truy cập vào HTML DOM thường rất chậm, so sánh 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 thành phần DOM một vài lần, truy cập nó một lần, và dùng nó như một biến cục bộ:
ví dụ
var obj;
obj = document.getElementById("demo");
obj.innerHTML = "Hello";<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var obj;
obj = document.getElementById("demo");
obj.innerHTML = " Hello";
</script>
</body>
</html>
Giảm kích thước DOM
Giữ số lượng của các thành phần trong HTML DOM nhỏ thôi.
Điều đó sẽ luôn cải thiện việc tải trang, và tăng tốc phiên dịch (hiển thị trang), đặc biệt trên thiết bị nhỏ hơn.
Mỗi cố gắng khi tìm DOM (như getElementsByTagName) sẽ lợi hơn nếu một DOM nhỏ hơn.
Tránh 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 định lưu các giá trị.
Thông thường bạn có thể thay thế code như thế này:
var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
Bằng code này:
document.getElementById("demo").innerHTML = firstName + " " + lastName;Trì hoãn tải trang JavaScript
Đặt các tập lệnh script ở dưới đáy body của trang sẽ làm trình duyệt tải trang trước.
Khi một script đang tải, trình duyệt sẽ không bắt đầu 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 cú pháp và biên dịch có thể bị chặn.
Đặc tả về HTTP chỉ rõ các trình duyệt không nên tải xuống nhiều hơn hai thành phần song song.
Một các khác là sử dụng defer="true" trong thẻ Script. Thuộc tính defer xác định rằng script nên được thực thi sau khi trang đã phân tích xong, nhưng chỉ hoạt động cho các Script bên ngoài(external).
Nếu có thể, bạn có thể thêm script của bạn vào trang bằng code, sau khi trang đã được tải:
ví dụ
<script>
window.onload = function() {
var element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>Tránh dùng with
Tránh sử dụng từ khóa with . Nó có tác động tiêu cực với tốc độ. Nó cũng làm tăng phạm vi của JavaScipt.
Từ khóa with không được cho phép trong chế độ nghiêm ngặt.
Tags: