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

Bài viết được sự cho phép của tác giả Sơn Dương

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.

  Triển khai mã hiệu quả hơn với compose & pipe function trong Javascript

  7 khái niệm Javascript cơ bản không thể bỏ qua

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

Tham khảo việc làm JavaScript hấp dẫn trên TopDev

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.

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

Bài viết gốc được đăng tải tại vntalking.com

Tìm việc làm IT mới nhất trên TopDev

Bài viết liên quan

Top 5 tips and tricks hot nhất của JavaScript năm 2024
Tác giả Filip Mở đầu Dưới đây tôi sẽ chia sẻ với các bạn top 5 tip cho JavaScript tốt nhất, hữu ích nhất khi làm việc mà tôi rút ra được sau quá trình làm việc với vai trò là một Software Engineering. 1. Lọc ra những value duy nhất trong cùng một array Tip cho JavaScript đầu tiên bạn cần thiết lập một array và tạo cho nó những value khác nhau, phụ thuộc vào mục đích coding của bạn. Sau đó hãy bắt đầu khai thác các value duy nhất từ array này bằng cách sử dụng lệnh Const filtered array để cho tất cả các value còn lại vào trong một tập hợp array mới. Tiếp theo sử dụng lệnh console.log(filteredArray)màn hình kết quả sẽ xuất hiện một terminal và chạy node tricks.js sẽ lọc được các value phức tạp. Bằng cách này, bạn không chỉ áp dụng lọc value duy nhất cho một array mà có thể áp dụng với mọi objects, [...]
Công nghệLập Trình
Chi tiết

Callback hell là gì? 6 cách “trị” callback hell trong javascript
Bài viết được sự cho phép của tác giả Sơn Dương Chắc hẳn những bạn nào quen lập trình Nodejs hay Javascript rồi thì khái niệm Callback không còn xa lạ nữa. Nhưng với người mới như mình thì callback hell trong javascript luôn là một ám ảnh. Vậy Callback hell là gì? Nó có hay xảy ra khi làm việc với Nodejs không? Mình phải thừa nhận một điều là mình quyết định học Nodejs chẳng qua bị sếp ép mà thôi. Với xuất phát điểm từ lập trình Java, cho đến lập trình Android nên tư duy xử lý bất đồng bộ của Javascript thực sự làm mình bối rối. Như mọi người cũng biết, việc xử lý các tác vụ trong Javascript là bất đồng bộ. Tức là các tác vụ sẽ được Javascript đẩy hết một event loop. Các bạn có thể xem video bên dưới để hiểu rõ hơn về Event Loop trong Javascript nhé. Tác vụ nào hoàn thành thì sẽ đượ [...]
Lập Trình
Chi tiết

Top 10 câu hỏi phỏng vấn JavaScript cực chi tiết
Theo khảo sát dành cho các lập trình viên hàng năm của Stack Overflow (Stack Overflow Developer Survey) thì trong 2 năm trở lại đây, JavaScript là ngôn ngữ lập trình phổ biến nhất hiện nay. Mức phổ biến của JavaScript (JS) khiến cho nhu cầu tuyển dụng lập trình viên về ngôn ngữ này trở nên rất lớn trong những năm trở lại đây. Nếu bạn cũng đang có dự định chuẩn bị cho việc cuộc phỏng vấn tuyển dụng vị trí lập trình viên JS, bài viết này sẽ dành cho bạn. Chúng ta cùng nhau đi qua top 10 những câu hỏi phỏng vấn về JavaScript phổ biến nhất nhé. Câu 1: JavaScript là gì? Nó thường sử dụng để làm gì? Đây là câu hỏi cơ bản mà thường để bắt đầu phỏng vấn chuyên môn thì nhà tuyển dụng sẽ hay hỏi. Tất nhiên nếu bạn apply vào vị trí Senior thì sẽ không nhà tuyển dụng nào hỏi câu [...]
FrontendLập Trình
Chi tiết