Kỹ thuật tối ưu Javascript nhằm tăng tốc độ web gấp 2 lần

Khi ứng dụng của bạn ngày càng phát triển với vô số tính năng được thêm vào thì performance luôn là vấn đề nhức nhối. Chẳng hạn như các animation hay transition không được mượt, scroll thì giật hay thậm chí là treo cả UI của ứng dụng. Một trải nghiệm tồi tệ với người dùng! Vậy làm thế nào tối ưu Javascript để tăng tốc độ web?

Tất cả đều chỉ ra một điều, ứng dụng bị chậm là khi bạn không thể giữ hiệu năng ứng dụng với tiêu chuẩn cơ bản 60 FPS (khung hình/giây).

Hãy thử làm một vài phép toán và xem nó là gì nhé!

FPS là gì?

Trước khi chúng ta bắt tay vào đo đạc và tối ưu mã nguồn, mình muốn làm rõ khái niệm đã nhắc đến ở trên. Thực sự FPS là gì?

FPS là viết tắt của từ Frames per second, dịch nghĩa là: khung hình trên giây. Giống như bạn hay xem tivi, người ta hay nhắc đến cụm từ 24 hình/giây đó. Thì khái niệm này cũng tương tự như vậy.

FPS là đại lượng biểu thị số lượng khung hình mà card màn hình của bạn có thể hiển thị mỗi giây và/hoặc số lượng các khung hình mà màn hình của bạn có thể hiển thị mỗi giây.

Giá trị nhỏ nhất để một ứng dụng được coi là mượt mà là 60 FPS. Đây là con số vàng mà các lập trình viên front end nên biết rõ. Nó giống như 24 hình/giây trong video vậy.

Cách tính Performance để tối ưu Javascript

1 second = 1000 milliseconds
1000/60 = ~16.6 milliseconds

Vì vậy, bạn chỉ có khoảng 16,6ms cho hiển thị 1 khung hình. Chính là điều kiện để ứng dụng của bạn được coi là mượt mà.

Ứng dụng bắt đầu có vẻ giật lag khi fps giảm xuống dưới 30fps. Tức là:

1000/30 = ~ 33,3 mili giây

Khung hình của bạn đang cần nhiều hơn 33,3ms để hiển thị. Có thể bạn đang thực hiện một số tính toán cần nhiều tài nguyên và hệ thống phải chờ kết quả của việc tính toán đó.

Và mục tiêu của bạn phải tăng khung hình 30 fps đến 60 fps (tất nhiên cao hơn thì càng tốt) bằng mọi giá.

👍 Đọc thêm: Các khái niệm javascript cơ bản mà có thể bạn cần.

Một số gợi ý tối ưu Javascript

Như các bạn đã biết thì JavaScript Runtime bao gồm Call Stack, Render Queue và Callback queue.

Và thứ tự ưu tiên để hệ thống thực hiện là:

Call Stack > Render Queue > Callback queue

Khi code chạy, các hàm bạn gọi ra sẽ được đẩy vào Call Stack. Khi chúng được thực hiện xong, chúng sẽ được đẩy ra khỏi stack đó.

Vì vậy, mục tiêu là xử lý mọi thứ trong stack trong khoảng từ 16 đến ~ 33 ms. Nếu còn bất kỳ chức năng nào hơn 33 ms trên Call Stack, render queue sẽ không thể khung hình hiển thị cho người dùng.

Có nhiều cách làm giảm gánh nặng cho call stack để hạn chế ứng dụng bị giật lag.

Gợi ý 1: Ưu tiên sử dụng API bất đồng bộ

Đầu tiên, là với những tác vụ nặng cần thời gian để xử lý thì nên dùng các API async (là các API bất đồng bộ) thay vì sử dụng API đồng bộ.

Ví dụ: Với Nodejs chẳng hạn, các tác vụ đọc ghi file (IO processing) thì nên dùng API async thay vì API sync.

// Nên sử dụng async api
fs.writeFile('message.txt', 'Hello Node.js', (err) => {
  if (err) throw err;
  console.log('The file has been saved!');
});
//Không nên sử dụng sync API
fs.writeFileSync('message.txt', 'Hello Node.js')
console.log('The file has been saved!');

Lý do là Render queue được ưu tiên nhiều hơn callback queue. Không giống như call stack, callback queue cho phép chuyển sang render queue để vẽ lại màn hình trước khi xử lý xong tất cả mọi callback.

💦 Có thể bạn sẽ quan tâm đến callback hell Javascript mà mình đã đề cập.

Gợi ý 2: Chọn API phù hợp cho Animation

Cuối cùng ưu tiên sử dụng  requestAnimationFramehơn setTimeout hoặc setInterval cho các animation.

// Không nên
setTimeout(function() {
    console.log(‘running async callback’);
}, 0);
// Thay vì đó nên dùng hàm này
requestAnimationFrame(function() {
    console.log(‘running async callback’);
});

Như vậy mình đã chia sẻ với các bạn 2 thủ thuật rất đơn giản để tối ưu code Javascript. Nhờ đó giúp bạn hạn chế tối đa ứng dụng bị sluggish (hiện tượng giật lag).

Nếu bạn có bí kíp nào khác nữa thì comment bên dưới để mọi người cùng thảo luận nhé.