Tăng tốc độ code Javascript chỉ với thủ thuật đơn giản

0
180

javascript-speed-up

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ăng tốc độ code Javascript?

Tất cả đều chỉ ra một điều, 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 mỗi giây). Đây là con số vàng của mỗi nhà phát triển JS hoặc frontend nên biết rõ. Nó giống như 24 hình / giây trong video vậy.

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

Tính toán Performance cho tốc độ code Javascript

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

Vì vậy, bạn chỉ có khoản 16,6ms cho hiển thị 1 khung hình, để ứng dụng của bạn trở nên mượt mà.
Ứng dụng bắt đầu có vẻ giật lag khi fps giảm xuống dưới 30fps

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

Khung 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á

Một số gợi ý tăng performance

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 của bạn 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 mili giây 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.

Đầ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 sync.

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

// 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.

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 ứng dụng Javascript, hạn chế tối đa ứng dụng bị sluggish(bị 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é.

Dành cho bạn: [Ý tưởng ứng dụng] 4 Quy tắc vàng giúp thay đổi tư duy – Phần 1

Bình luận. Đặt câu hỏi cũng là một cách học

avatar
  Theo dõi bình luận  
Thông báo