Cải thiện Performance của Javascript

Bài đăng này đã không được cập nhật trong 8 năm

Làm thế nào để tăng tốc javascript code

1/ Cắt giảm các câu lệnh trong vòng lặp

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

Mỗi câu lệnh trong vòng lặp là được thi hành mỗi khi vòng lặp được lặp lại.

Tìm kiếm những câu lệnh và assign các giá trị mà có thể thay thế được khi để ngoài vòng lặp.

Bad Code

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

Better Code

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

Code bad tiếp cận thuộc tính length của mảng mỗi lần vòng lặp được lặp lại.

Better Code tiếp cận thuộc tính length bên ngoài vòng lặp và làm vòng lặp chạy nhanh hơn.

2/Cắt giảm việc tiếp cận DOM

Tiếp cận HTML DOM là rất chậm so với các câu lệnh javascript khác.

Nếu bạn tiếp cận phần tử DOM một vài lần hãy dùng nó như một biến local.

Ví dụ :

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

3/ Cắt giảm cỡ DOM

Giữ số phần tử trong HTML DOM nhỏ thôi.

Điều này luôn cải thiện vấn đề load trang và tăng tốc việc redering cho trang được trưng bày đặc biệt trên những thiết bị nhỏ hơn.

Mỗi khi tìm kiếm the DOM (như việc getElementsByTagName) sẽ mang lại lợi ích khi DOM được làm cho nhỏ đi.

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

Đừng tạo ra biến mà bạn không định lưu giá trị.

Bạn luôn luôn có thể cắt giảm code như thế này :

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

Thay thế với code trên đây

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

5/ Trì hoãn việc loading của javascript

Để javascript ở cuối trang để cho phép trình duyệt load trang đầu tiên đã

Trong khi javascript đang được download, trình duyệt sẽ không bắt đầu bất kỳ một download nào khác. Thêm vào đó hoạt động parsing và rendering có lẽ bị block.

Cách thay thế là dùng defer="true"trong tab script. Defer chỉ ra ràng script nên được thi hành sau khi trang hoàn thành việc parsing nhưng nó chỉ làm việc cho các script bên ngoài.

Nếu có thể bạn có thể thêm javascript tới trang bằng code, sau khi trang đã được load.

<script>
window.onload = downScripts;

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