🚀 Tối ưu JavaScript cho Thông Thể - Phần 2
Xin chào mọi người! Hôm nay, chúng ta sẽ tiếp tục khám phá những phương pháp tối ưu hóa JavaScript cực kỳ hiệu quả mà mình đã áp dụng. Dưới đây là 6 kỹ thuật quan trọng để cải thiện hiệu suất của ứng dụng web mà bạn không nên bỏ qua.
1. Memorization
Memorization là một kỹ thuật tối ưu hóa giúp tăng tốc tính toán bằng cách lưu trữ kết quả của các hàm. Khi một hàm được gọi với input giống nhau, kết quả sẽ được trả về từ cache mà không cần tính toán lại. Trong ví dụ dưới đây, lần đầu tiên gọi hàm tiêu tốn 57ms, nhưng lần thứ hai, chỉ cần 0.02ms.
2. Debounce
Debounce là kỹ thuật trì hoãn việc thực hiện hàm cho đến khi khoảng thời gian nhất định trôi qua sau lần gọi cuối cùng. Có 2 cách để thực hiện: dùng JavaScript thuần hoặc thư viện Lodash. Debounce cực kỳ hữu ích trong việc xử lý các sự kiện như tìm kiếm, nhằm tránh việc gọi API liên tục khi người dùng gõ.
3. DocumentFragment
DocumentFragment là một đối tượng trong DOM giúp cải thiện việc chèn các phần tử. Khi sử dụng DocumentFragment, bạn có thể chèn nhiều phần tử vào DOM chỉ một lần, giảm thiểu số lần trình duyệt phải thực hiện reflow và re-render.
4. Event Delegation
Kỹ thuật Event Delegation giúp tiết kiệm bộ nhớ và cải thiện hiệu suất bằng cách gán sự kiện cho phần tử cha. Nếu có nhiều phần tử cần xử lý sự kiện giống nhau, việc xử lý ở cấp độ cha sẽ giảm thiểu tài nguyên và cải thiện hiệu suất.
5. Tree-Shaking
Tree-Shaking là quy trình loại bỏ mã không sử dụng khỏi code bundle, giúp giảm kích thước và cải thiện hiệu suất. Các công cụ như Webpack hoặc Rollup thực hiện tree-shaking bằng cách phân tích code. Lợi ích chính của tree-shaking là: giảm kích thước bundle, cải thiện hiệu suất và dễ bảo trì hơn.
6. Các phương pháp truy xuất key-value từ Object
So sánh hiệu suất của ba phương pháp truy cập key-value trong Object:
- for...in: Nhanh nhất.
- Object.keys(): Chậm hơn vì phải tạo mảng các key.
- Object.entries(): Chậm nhất do việc tạo mảng các cặp key-value tiêu tốn nhiều bộ nhớ và thời gian.
Kết luận
Cảm ơn các bạn đã đọc bài viết. Hy vọng kiến thức này sẽ hữu ích cho các bạn. Đừng quên theo dõi mình trên YouTube và LinkedIn để nhận thêm nhiều bài viết thú vị nhé!
- YouTube: Kênh của mình
- LinkedIn: Hồ sơ của mình
source: viblo
