Chào mừng bạn đến với Vimentor!

Hỏi đáp
Đăng ký

16. Javascript - Kỹ thuật tối ưu hoá vòng lặp

Kỹ thuật áp dụng Javascript hiệu quả - Kỹ thuật tối ưu hoá vòng lặp

Giả sử ta có một biến công ty. Biến công ty có chứa thuộc tính là một mảng chứa 5 phần tử là 5 chuỗi chứa tên 5 nhân viên. Cấu trúc biến công ty như sau:

congty
    ten
        nhanvien: ["An", "Minh", "Anh", "Ngoc", "Trung"]

Ta cần viết một đoạn code xuất ra tên 5 nhân viên. Thật đơn giản phải không nào! Hãy xem đoạn code sau:

console.log("Ten cac nhan vien trong cong ty:");
for (var i = 0; i < congty.nhanvien.length; i++) {
    console.log(congty.nhanvien[i]);
}

Ở đầu mỗi vòng lặp, chương trình sẽ thực hiện các bước sau:

  1. Lấy ra giá trị i.

  2. Lấy ra đối tượng congty.

  3. Lấy ra thuộc tính nhanvien.

  4. Lấy ra mảng mà thuộc tính nhanvien tham chiếu đến.

  5. Lấy ra thuộc tính length của thuộc tính nhân viên.

Ta sẽ tối ưu bằng kỹ thuật lưu biến tạm, ta sẽ lưu độ dài của mảng nhanvien vào trong một biến tạm, như sau:

console.log("Ten cac nhan vien trong cong ty: ");
var sonhanvien = congty.nhanvien.length;
for (var i = 0; i < sonhanvien; i++) {
    console.log(congty.nhanvien[i]);
}

Ta thử so sánh giữa 2 đoạn chương trình để xem số lần tính toán được tối ưu như thế nào.

Với đoạn chương trình đầu tiên

Ta có 5 bước cho đoạn tạo ra biến sonhanvien.

→ Vòng lặp chạy 6 lần (kể cả lần kiểm tra để dừng) nên tổng số bước là 5 x 6 = 30 bước

 

Với đoạn chương trình đã được cải tiến

+ Ta có 5 bước cho đoạn tạo ra biến sonhanvien.

+ Ta có 2 bước cho đoạn khởi tạo i và sonhanvien trong từng bước lặp.

+ Ta có 5 bước lặp và 1 bước kiểm tra để dừng = 6 bước

➔ Ta có 2 x 6 + 5 = 17 bước truy xuất bộ nhớ cho CPU.

Chênh lệch số bước truy xuất bộ nhớ giữa 2 đoạn chương trình là 13. Trông qua thì thật ít ỏi. Nhưng giả sử ta mở rộng quy mô công ty lên 10 ngàn nhân viên.

Khi đó, ta sẽ có sự chênh lệch về số bước truy xuất bộ nhớ như sau:

5 x (10,000 + 1) – 2 x (10,000+1) +5 ~ 30,000

 

Rõ ràng chỉ với một kỹ thuật khá đơn giản, ta đã cải thiện được hiệu năng chương trình đáng kể. Không dừng lại ở đó, ta có thể tiếp tục cải tiến thêm chương trình vẫn với kỹ thuật lưu biến tạm:

console.log("Ten cac nhan vien trong cong ty: ");
var sonhanvien = congty.nhanvien.length;
var danhsach = congty.nhanvien;
for (var i = 0; i < sonhanvien; i++) {
    console.log(danhsach[i]);
}

Và ở đây, ta có thể áp dụng về phạm vi (scope) của biến trong đoạn chương trình con, để làm code sạch hơn như sau:

console.log("Ten cac nhan vien trong cong ty: ");
var danhsach = congty.nhanvien;
for (var i = 0, sonhanvien = congty.nhanvien.length; i < sonhanvien; i++) {
    console.log(danhsach[i]);
}

Ở đây, chắc chắn sẽ có một số bạn cải tiến như sau, sử dụng kỹ thuật for-in loop:

console.log("Ten cac nhan vien trong cong ty: ");
var danhsach = congty.nhanvien;
for (index in danhsach) {
    console.log(danhsach[index]);
}

Vừa trông qua thì thấy code rất đẹp, rất gọn và rõ nghĩa. Tuy nhiên, lưu ý hãy thật cẩn thận khi sử dụng for-in loop, vì lý do được giải thích như sau.

Giả sử ta có viết thêm vài thuộc tính cho Array.prototype, ví dụ như:

Array.prototype.count = function(nhanvien) {
……
};

Array.prototype.clear = function(danhsach) {
…….
};

Tạm thời ta không cần quan tâm nội dung bên trong các hàm này, vì đây chỉ là một ví dụ minh hoạ cho sự hạn chế của kỹ thuật for-in loop.

Khi chạy đoạn code trên, ta sẽ được kết quả như sau:

Ten cac nhan vien trong cong ty:
An
Minh
Anh
Ngoc
Trung
function(nhanvien){
    ……
}

function(danhsach){
    ……
}


Lý do là vì khi ta truy xuất dựa trên chỉ mục bằng cách tiếp cận thuộc tính thì Javascript sẽ tự động add vào tất cả các phương thức đã được thêm vào trong Array.prototype. Do đó phải hết sức cẩn thận khi sử dụng for-in loop.

 

Kết luận

Qua bài học này chúng ta đã cùng tìm hiểu và nắm vững cách tối ưu hoá vòng lặp. Ở bài kế tiếp chúng ta sẽ cùng tìm hiểu về một số kỹ thuật để tăng hiệu năng của đoạn code Javascript.

Khóa học liên quan

** Nếu bạn muốn viết các nội dung đặt biệt thì hãy làm theo hướng dẫn sau

Xem thêm 10 bình luận
Viết blog mới của bạn
Báo lỗi trang
Đang tải