JavaScript Hiệu suất: Hướng dẫn dành cho người mới bắt đầu tối ưu hóa mã của bạn

Xin chào các bạn đang học lập trình JavaScript! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình khám phá thế giới fascinante của việc tối ưu hóa hiệu suất JavaScript. Như một ai đó đã dạy lập trình hơn một thập kỷ, tôi có thể告诉 bạn rằng việc hiểu cách viết mã hiệu quả cũng quan trọng như việc biết cách viết mã hoạt động. Vậy hãy cùng nhau lặn xuống và khám phá cách chúng ta có thể làm cho JavaScript của mình chạy nhanh hơn và mượt hơn!

JavaScript - Performance

Tại sao hiệu suất lại quan trọng

Trước khi chúng ta đi vào chi tiết, hãy để tôi chia sẻ một câu chuyện nhanh. Tôi từng có một học sinh đã xây dựng một trang web đẹp mắt, nhưng nó tải chậm hơn một con khỉ leo cây. Chúng tôi tối ưu hóa JavaScript của anh ấy, và đột nhiên, trang web của anh ấy chạy nhanh như một con báo! Đó là sức mạnh của tối ưu hóa hiệu suất, và đó là điều chúng ta sẽ học hôm nay.

Tối ưu hóa thao tác DOM

DOM: Xương sống của trang web của bạn

Trước tiên, hãy nói về DOM (Document Object Model). Hãy tưởng tượng nó như xương sống của trang web của bạn. Mỗi khi bạn thay đổi điều gì đó trên trang của bạn bằng JavaScript, bạn đang thao tác DOM. Nhưng đây là catches: Thao tác DOM có thể chậm nếu không được thực hiện đúng cách.

Giảm thiểu truy cập DOM

Một trong những quy tắc vàng của hiệu suất JavaScript là giảm thiểu truy cập DOM. Hãy xem một ví dụ:

// Không tốt lắm
for (let i = 0; i < 1000; i++) {
document.getElementById('myElement').innerHTML += 'Hello ';
}

// Tốt hơn nhiều
let content = '';
for (let i = 0; i < 1000; i++) {
content += 'Hello ';
}
document.getElementById('myElement').innerHTML = content;

Trong ví dụ đầu tiên, chúng ta đang truy cập DOM 1000 lần! Đó như việc gõ cửa hàng xóm 1000 lần để deliver một thông điệp dài. Trong ví dụ thứ hai, chúng ta chuẩn bị thông điệp trước và gõ cửa chỉ một lần. Hiệu quả hơn nhiều!

Sử dụng Document Fragments

Khi bạn cần thêm nhiều phần tử vào DOM, hãy sử dụng document fragments. Chúng giống như một khu vực tạm thời để giữ các phần tử của bạn trước khi bạn thêm chúng vào trang.

let fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
let newElement = document.createElement('div');
newElement.innerHTML = 'Element ' + i;
fragment.appendChild(newElement);
}
document.body.appendChild(fragment);

Bằng cách này, chúng ta chỉ cập nhật DOM một lần, sau khi tất cả các phần tử của chúng ta đã sẵn sàng. Đó như việc chuẩn bị cả bữa ăn trước khi phục vụ, thay vì phục vụ mỗi nguyên liệu khi chúng sẵn sàng.

Thao tác đồng bộ với Promises

Phép màu của mã đồng bộ

Hãy tưởng tượng bạn đang ở một nhà hàng. Bạn có muốn nhân viên phục vụ đứng ở bàn của bạn, không làm gì trong khi đầu bếp chuẩn bị món ăn của bạn, hay bạn muốn họ phục vụ khách hàng khác trong thời gian đó? Đó là sự khác biệt giữa mã đồng bộ và mã không đồng bộ.

Promises: Một cách tốt hơn để xử lý thao tác không đồng bộ

Promises là một cách để xử lý thao tác không đồng bộ trong JavaScript. Chúng đại diện cho một giá trị có thể không có sẵn ngay lập tức nhưng sẽ được giải quyết vào một thời điểm nào đó trong tương lai.

function fetchData(url) {
return new Promise((resolve, reject) => {
fetch(url)
.then(response => response.json())
.then(data => resolve(data))
.catch(error => reject(error));
});
}

fetchData('https://api.example.com/data')
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

Trong ví dụ này, fetchData trả về một Promise. Chúng ta có thể sử dụng .then() để xử lý trường hợp thành công và .catch() để xử lý lỗi. Điều này cho phép mã của chúng ta tiếp tục chạy trong khi chờ đợi dữ liệu, cải thiện hiệu suất tổng thể.

Tải JavaScript bị hoãn

Đừng ngăn cản buổi tiệc

Tải JavaScript có thể giống như một kẻ xấu xí đến dự buổi tiệc và ngăn cản mọi người cho đến khi nó ổn định. Để ngăn chặn điều này, chúng ta có thể sử dụng tải bị hoãn.

Thuộc tính 'defer'

Bằng cách thêm thuộc tính defer vào thẻ script của bạn, bạn đang告诉 trình duyệt: "Hey, tải script này, nhưng đừng chạy nó cho đến khi HTML hoàn toàn tải xong."

<script src="myScript.js" defer></script>

Điều này đảm bảo rằng HTML của bạn tải nhanh chóng, cung cấp trải nghiệm người dùng tốt hơn, đặc biệt là trên các kết nối chậm.

Tải script động

Đối với các script không cần thiết ngay lập tức, chúng ta có thể tải chúng động:

function loadScript(src) {
let script = document.createElement('script');
script.src = src;
document.body.appendChild(script);
}

loadScript('https://example.com/non-essential-script.js');

Bằng cách này, chúng ta chỉ tải các script khi cần thiết, giữ cho lần tải trang đầu tiên nhanh và mượt.

Tránh sử dụng biến toàn cục

Vùng toàn cục: Một nơi quá đông

Biến toàn cục trong JavaScript giống như để đồ của bạn khắp nhà. Nó bừa bộn và ai đó có thể vấp phải! Hãy giữ cho mọi thứ ngăn nắp.

Sử dụng biến cục bộ

Khi có thể, hãy sử dụng biến cục bộ thay vì biến toàn cục:

// Không tốt lắm
var count = 0;
function incrementCounter() {
count++;
}

// Tốt hơn nhiều
function incrementCounter() {
let count = 0;
return function() {
count++;
return count;
}
}
let counter = incrementCounter();

Trong ví dụ thứ hai, count là một biến cục bộ, an toàn và không làm phiền các phần khác của mã của bạn.

Mẫu Module

Đối với các tình huống phức tạp hơn, hãy xem xét sử dụng mẫu module:

const myModule = (function() {
let privateVariable = 0;

function privateFunction() {
console.log('This is private');
}

return {
publicFunction: function() {
privateVariable++;
privateFunction();
}
};
})();

myModule.publicFunction(); // Đây hoạt động
// myModule.privateFunction(); // Đây sẽ gây ra lỗi

Mẫu này cho phép bạn giữ một số biến và hàm riêng tư, giảm nguy cơ xung đột tên và sửa đổi không mong muốn.

Tóm tắt các phương pháp tối ưu hóa hiệu suất

Phương pháp	Mô tả
Giảm thiểu truy cập DOM	Giảm số lần tương tác với DOM
Sử dụng Document Fragments	Chuẩn bị nhiều phần tử off-screen trước khi thêm vào DOM
Sử dụng Promises	Xử lý thao tác không đồng bộ hiệu quả
Tải script bị hoãn	Sử dụng thuộc tính 'defer' hoặc tải script động
Tránh sử dụng biến toàn cục	Sử dụng biến cục bộ và mẫu module

Và đây là tất cả, các bạn! Chúng ta đã xem qua một số chiến lược quan trọng để tối ưu hóa hiệu suất JavaScript. Nhớ rằng viết mã hiệu quả là một quá trình liên tục. Khi bạn phát triển như một nhà phát triển, bạn sẽ khám phá thêm nhiều cách để làm cho mã của mình chạy nhanh hơn và mượt hơn. Hãy tiếp tục thực hành, tiếp tục tối ưu hóa, và quan trọng nhất, hãy vui vẻ khi lập trình!

Credits: Image by storyset

Hướng Dẫn Trước:

JavaScript - Debouncing

Hướng Dẫn Tiếp Theo:

JavaScript - Hướng dẫn phong cách