Javascript là một trong những nguyên nhân khiến Wordprress bị chậm. Bài viết hôm nay sẽ giới thiệu tới bạn 2 cách tối ưu Javascript cực đơn giản giúp tăng tốc độ load website WordPress.
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’);
});
Chúc bạn tối ưu Javascript thành công!
Nguồn: VNTALKING