Thủ thuật giúp cải thiện hiệu suất chương trình

- Trong JavaScript, khi chúng ta muốn xây dựng một chương trình để thực hiện một công việc nào đó thì chúng ta có rất nhiều giải thuật để xây dựng chương trình đó. Tuy nhiên, mỗi giải thuật sẽ mang lại một hiệu suất (tốc độ hoàn thành công việc) khác nhau.

- Ví dụ: Hai đoạn mã bên dưới cùng thực hiện một công việc là hiển thị dòng chữ "Hello JavaScript" lên màn hình. Tuy nhiên, đoạn mã thứ hai có tốc độ hoàn thành công việc chậm hơn so với đoạn mã thứ nhất (Vì nó phải thực thi tới hai câu lệnh)

<script>
    document.write("Hello JavaScript");
</script>

<script>
    var str = "Hello JavaScript";
    document.write(str);
</script>

- Qua ví dụ trên thì chắc các bạn cũng đã thấy "Những giải thuật khác nhau mà thực hiện cùng một công việc thì sẽ có giải thuật mang lại hiệu suất cao và giải thuật mang lại hiệu suất thấp". Người lập trình viên luôn mong muốn chương trình của mình có hiệu suất cao để tăng tốc độ tải trang. Nên ở bài hướng dẫn này, chúng tôi sẽ giới thiệu đến bạn một số thủ thuật phổ biến nhất để xây dựng được chương trình có hiệu suất cao.

1) Tránh khai báo những biến không cần thiết

- Câu lệnh khai báo biến có tốc độ thực thi chậm hơn so với những câu lệnh thông thường, ta không nên khai báo một biến mới nếu như không có mục đích sử dụng lại biến đó nhiều lần.

- Ví dụ, đoạn mã có hiệu suất thấp:

<script>
    var fullName = "Nguyễn Thành Nhân";
    document.write(fullName);
</script>

- Ví dụ, đoạn mã có hiệu suất cao:

<script>
    document.write("Nguyễn Thành Nhân");
</script>

2) Hạn chế truy cập vào phần tử HTML

- Những câu lệnh truy cập vào phần tử HTML có tốc độ thực thi rất chậm. Nếu muốn truy cập vào cùng một phần tử nhiều lần thì ta nên truy cập một lần rồi sau đó lưu nó vào một biến để sử dụng lại.

- Ví dụ, đoạn mã có hiệu suất thấp:

<script>
    document.getElementById("demo").innerHTML = "1";
    document.getElementById("demo").innerHTML = "2";
    document.getElementById("demo").innerHTML = "3";
    document.getElementById("demo").innerHTML = "4";
</script>

- Ví dụ, đoạn mã có hiệu suất cao:

<script>
    var a = document.getElementById("demo");
    a.innerHTML = "1";
    a.innerHTML = "2";
    a.innerHTML = "3";
    a.innerHTML = "4";
</script>

- Ngoài ra, tốc độ thực thi của những câu lệnh truy cập vào phần tử HTML sẽ càng bị chậm nếu số lượng phần tử trong một trang quá lớn (Vì nó phải tìm phần tử phù hợp, ít phần tử thì tìm ra nhanh, nhiều phần tử thì tìm lâu). Cho nên trong quá trình thiết kế giao diện của trang, số lượng phần tử HTML ít chừng nào thì tốt chừng nấy.

3) Tối ưu hóa vòng lặp

- Các vòng lặp như for, while, do while thường được sử dụng rất nhiều trong JavaScript. Nếu ta tối ưu hóa được hết tất cả các vòng lặp thì tốc độ tải trang sẽ được cải thiện đáng kể.

- Vòng lặp dùng để lặp lại việc thực thi một đoạn mã nhiều lần, nếu trong vòng lặp có chứa những những câu lệnh phức tạp thì tốc độ thực thi sẽ chậm lại. Do đó, để tăng tốc độ thực thi thì ta nên thay thế những câu lệnh phức tạp bằng những câu lệnh đơn giản hơn.

- Ví dụ, đoạn mã có hiệu suất thấp:

<script>
    for (var i = 0; i < arr.length; i++){
        document.write(arr[i]);
    }
</script>

- Ví dụ, đoạn mã có hiệu suất cao:

<script>
    var n = arr.length;
    for (var i = 0; i < n; i++){
        document.write(arr[i]);
    }
</script>

4) Không sử dụng từ khóa new

- Chúng ta không nên sử dụng từ khóa new để tạo chuỗi, số, mảng, đối tượng, hàm, .... vì nó có tốc độ thực thi rất chậm.

- Ví dụ, đoạn mã có hiệu suất thấp:

<script>
    var a = new String("Nguyễn Thành Nhân");
    var b = new Number(100);
    var c = new Array("HTML", "CSS", "JavaScript");
</script>

- Ví dụ, đoạn mã có hiệu suất cao:

<script>
    var a = "Nguyễn Thành Nhân";
    var b = 100;
    var c = ["HTML", "CSS", "JavaScript"];
</script>

5) Đặt mã JavaScript ở dưới cùng

- Trong quá trình tải trang, các câu lệnh sẽ được thực thi lần lượt theo thứ tự từ trên xuống dưới. Nếu mã HTML được đặt ở trên thì nó sẽ được thực thi trước đồng nghĩa với việc giao diện được hiển thị trước (Điều đó tạo cảm giác như trang được tải nhanh). Vì vậy, chúng ta nên cố gắng sắp xếp các đoạn mã HTML nằm trên còn mã JavaScript thì nằm ở dưới.