Để làm cho trang web hoặc ứng dụng của bạn nhanh hơn, bạn sẽ cần một số kiến thức về hiệu suất (performance) trong JavaScript. Điều này là rất quan trọng vì người dùng không thích sử dụng các ứng dụng chậm chạp tí nào. 

Trong bài viết này, chúng ta sẽ cùng đi qua một số mẹo đơn giản sẽ giúp các lập trình viên JavaScript cải thiện hiệu suất, từ đó làm cho trang web hoặc ứng dụng của bạn hoạt động trơn tru và nhanh hơn.

1. Tránh các biến không cần thiết

Các biến không cần thiết trong code của bạn làm giảm hiệu suất, vì chúng sử dụng bộ nhớ. Thế nên, đừng tạo các biến mới nếu bạn không cần phải lưu các giá trị. Ví dụ:

Hãy thay thế code như thế này:

Hiệu suất kém

Với code thế này:

Hiệu suất tốt

2. Giảm hoạt động trong vòng lặp

Vòng lặp (loop) thường được sử dụng trong lập trình, cụ thể là vòng lặp for. Để giúp vòng lặp chạy nhanh hơn, hãy đặt các câu lệnh hoặc phép gán ở bên ngoài vòng lặp. Hãy xem các ví dụ dưới đây:

Code tệ. Hiệu suất kém

Code tốt. Hiệu suất tốt

Đoạn code thứ nhất được xem là tệ vì nó sẽ truy cập độ dài của mảng cho mỗi lần lặp trong vòng lặp, và điều đó không tốt cho hiệu suất, đặc biệt nếu chương trình của bạn có nhiều câu lệnh. Mặt khác, đoạn code tốt hơn truy cập thuộc tính độ dài bên ngoài vòng lặp, khiến vòng lặp chạy nhanh hơn.

3. Trì hoãn việc tải JavaScript

Đặt các script (tập lệnh) ở cuối thân trang (page body) sẽ giúp trang tải nhanh hơn vì JavaScript sẽ được thực thi sau khi trang được tải xong. Một giải pháp thay thế cho điều đó là sử dụng từ khóa defer (trì hoãn) trên script của bạn như sau:

Trì hoãn việc tải JavaScript

Thuộc tính defer chỉ định rằng script sẽ được thực thi sau khi trang hoàn tất quá trình phân tích cú pháp, nhưng thuộc tính này chỉ hoạt động đối với các script bên ngoài.

4. Giảm truy cập DOM

Làm việc với document object model (mô hình đối tượng tài liệu) trong JavaScript tốn nhiều thời gian hơn khi làm việc với các câu lệnh JavaScript. Lý do là vì DOM được xây dựng bởi trình duyệt chứ không phải là một phần của ngôn ngữ. Nếu bạn muốn truy cập một phần tử DOM nhiều lần, hãy truy cập một lần và sử dụng nó như một biến cục bộ (local variable), như vậy sẽ giúp ích đôi chút trong việc cải thiện hiệu suất. Như ví dụ dưới đây:

Giảm truy cập DOM

5. Giảm kích thước DOM

Hãy giữ số lượng phần tử DOM càng ít càng tốt, vì càng nhiều phần tử sẽ càng khiến việc tải trở nên chậm hơn, đặc biệt là trên các thiết bị nhỏ.

Kết luận

Một trang web hoặc ứng dụng có hiệu suất tốt là điều mà các lập trình viên JavaScript phải luôn ưu tiên. Trải nghiệm người dùng rất quan trọng, chẳng ai muốn truy cập lần thứ hai vào một trang web hay ứng dụng có thời gian tải chậm chạp cả.

Tổng hợp việc làm IT - Software trên VietnamWorks
VietnamWorks InTECH
Theo medium