JavaScript: 20 cách thực hành tốt nhất để cải thiện hiệu suất JavaScript

JavaScript là một phần không thể thiếu của mỗi trang web, ứng dụng di động và phần mềm dựa trên web. Mặc dù các khả năng kịch bản phía máy khách của JavaScript có thể làm cho các ứng dụng trở nên linh động và hấp dẫn hơn, nhưng nó cũng làm tăng thời gian tải trang web. Do đó, JavaScript được viết kém có thể gây khó khăn cho việc đảm bảo trải nghiệm nhất quán cho tất cả người dùng.

Bài hướng dẫn này sẽ khám phá nguyên nhân của các vấn đề về hiệu suất JavaScript và cung cấp danh sách các thực tiễn tốt nhất để tối ưu hóa mã JavaScript.

Các vấn đề về hiệu suất JavaScript phổ biến

Bước đầu tiên để khắc phục bất kỳ vấn đề nào là xác định nguyên nhân thực tế. Dưới đây là một số điều có thể khiến hiệu suất JavaScript giảm:

1. Quá nhiều tương tác với máy chủ

Mọi tương tác với đối tượng máy chủ hoặc trình duyệt của người dùng, sẽ làm tăng thời gian tải trang và góp phần làm chậm hiệu suất. Vấn đề này thường biểu hiện là kết xuất chậm các đối tượng DOM. Bạn rõ ràng không thể tránh các tương tác như vậy, nhưng bạn có thể giữ chúng ở mức tối thiểu.

2. Quá nhiều phụ thuộc

Nếu các phụ thuộc JavaScript có nhiều và được quản lý kém, thì hiệu suất của ứng dụng web sẽ bị ảnh hưởng. Người dùng của bạn sẽ phải chờ lâu hơn để các đối tượng hiển thị, điều này đặc biệt gây khó chịu cho người dùng di động với băng thông hạn chế.

3. Xử lý sự kiện kém

Việc sử dụng đúng trình xử lý sự kiện có thể cải thiện hiệu suất bằng cách giảm độ sâu của ngăn xếp lời gọi; tuy nhiên, nếu bạn không theo dõi chúng, chúng có thể thực thi nhiều lần mà bạn không biết. Hãy sử dụng chúng một cách tiết kiệm và khôn ngoan.

4. Lặp lại không hiệu quả

Vì các lần lặp chiếm quá nhiều thời gian xử lý, chúng cung cấp một điểm khởi đầu tuyệt vời để tối ưu hóa mã của bạn. Loại bỏ các vòng lặp hoặc lời gọi không cần thiết trong các vòng lặp sẽ tăng tốc hiệu suất JavaScript của bạn.

5. Mã không có tổ chức

Bản chất lỏng lẻo của JavaScript là cả tài sản và trách nhiệm pháp lý. Bạn có thể làm rất nhiều việc chỉ với một tập hợp nhỏ các cấu trúc từ vựng, nhưng việc thiếu tổ chức trong mã của bạn có thể dẫn đến việc phân bổ tài nguyên không đầy đủ. Tự làm quen với các tiêu chuẩn ECMA có thể giúp bạn xây dựng code JavaScript ngắn gọn hơn.

20 mẹo và cách thực hành tốt nhất để cải thiện hiệu suất JavaScript

Bây giờ chúng ta hãy xem xét một số cách để tăng hiệu suất JavaScript của ứng dụng:

1. Sử dụng HTTP/2

HTTP/2 là phiên bản mới nhất của giao thức HTTP và cung cấp một số cải tiến tuyệt vời không chỉ giúp cải thiện hiệu suất JavaScript của bạn mà còn giúp tăng tốc trang web của bạn nói chung . HTTP/2 sử dụng ghép kênh, do đó cho phép gửi nhiều yêu cầu và phản hồi cùng một lúc. Nếu bạn chưa chuyển sang HTTPS, hãy đảm bảo thực hiện càng sớm càng tốt để tận dụng các cải tiến hiệu suất mà HTTP/2 cung cấp.

2. Sử dụng tham chiếu con trỏ

Bạn cũng có thể cắt giảm các lần đi ngang qua DOM bằng cách lưu trữ các tham chiếu con trỏ cho các đối tượng trong trình duyệt trong thời gian khởi tạo. Nếu bạn không mong đợi DOM của mình thay đổi, việc lưu trữ một tham chiếu đến các đối tượng DOM hoặc jQuery cần thiết để tạo trang của bạn có thể giúp tăng tốc mọi thứ. Ngoài ra, nếu bạn cần lặp lại code bên trong một hàm, nhưng bạn chưa lưu trữ một tham chiếu, bạn có thể tạo một biến cục bộ với một tham chiếu đến đối tượng.

3. Cắt HTML

Độ phức tạp của HTML của bạn đóng một vai trò lớn trong việc xác định thời gian cần thiết để truy vấn và sửa đổi các đối tượng DOM. Nếu bạn có thể cắt HTML của ứng dụng xuống một nửa, bạn có khả năng có thể tăng gấp đôi tốc độ DOM. Đó là một mục tiêu khó khăn, nhưng bạn có thể bắt đầu bằng cách loại bỏ các thẻ <div> và <span> không cần thiết .

4. Sử dụng document.getEuityById()

Sử dụng jQuery cho phép bạn tạo các bộ chọn cụ thể dựa trên tên thẻ và các lớp, nhưng cách tiếp cận này đòi hỏi một số lần lặp như các vòng lặp jQuery thông qua các phần tử DOM để tìm sự trùng khớp. Bạn có thể tăng tốc DOM bằng cách sử dụng phương thức document.getElementById() thay thế.

// Với jQuery
var button = jQuery('body div.window > div.minimize-button:nth-child(3)')[0];

// Với document.getElementById()
var button = document.getElementById('window-minimize-button');

5. Batch thay đổi DOM

Mỗi khi bạn thực hiện thay đổi DOM, hãy gộp chúng lại để ngăn kết xuất màn hình lặp lại. Nếu bạn đang thực hiện thay đổi kiểu, hãy thử thực hiện tất cả các sửa đổi của bạn cùng một lúc thay vì áp dụng các thay đổi cho từng kiểu riêng lẻ.

6. Đệm DOM

Nếu bạn có một thẻ DIV có thể cuộn, bạn có thể sử dụng bộ đệm để xóa các mục khỏi DOM hiện không hiển thị bên trong chế độ xem. Kỹ thuật này giúp bạn tiết kiệm cả việc sử dụng bộ nhớ và truyền tải DOM.

7. Nén tệp của bạn

Sử dụng phương pháp nén như Gzip hoặc Brotli để giảm kích thước tệp JavaScript của bạn. Với tệp kích thước nhỏ hơn sẽ làm hiệu suất được cải thiện.

8. Giới hạn phụ thuộc thư viện

Thư viện phụ thuộc làm tăng rất nhiều vào thời gian tải, vì vậy hãy cố gắng duy trì việc sử dụng chúng ở mức tối thiểu và tránh hoàn toàn nếu có thể. Một cách để giảm sự phụ thuộc của bạn vào các thư viện bên ngoài là phụ thuộc nhiều hơn vào công nghệ trên trình duyệt.

Hơn nữa, nếu bạn cần các bộ chọn CSS phức tạp, hãy thử sử dụng Sizzle.js thay vì jQuery. Nếu bạn có các thư viện chỉ chứa một tính năng, sẽ tốt hơn nếu chỉ thêm riêng tính năng đó.

9. Giảm thiểu mã lệnh

Kết hợp các thành phần của ứng dụng của bạn vào các tệp *.js và chuyển chúng qua chương trình thu nhỏ JavaScript sẽ giúp mã của bạn gọn hơn. Xem bài viết liên quan tại ĐÂY.

10. Thêm trình quản lý phụ thuộc sau tải

Thêm trình quản lý phụ thuộc, như RequireJS hoặc webpack, vào tập lệnh tải của bạn cho phép người dùng thấy bố cục của ứng dụng của bạn trước khi nó hoạt động. Điều này có thể có tác động tích cực rất lớn đến chuyển đổi cho khách truy cập lần đầu. Chỉ cần đảm bảo rằng trình quản lý phụ thuộc của bạn được thiết lập để theo dõi những phụ thuộc nào đã được tải, nếu không các thư viện tương tự có thể tải hai lần. Luôn đặt mục tiêu tải tối thiểu tuyệt đối người dùng cần xem.

11. Cache càng nhiều càng tốt

Bộ nhớ đệm là tài sản lớn nhất của bạn để tăng tốc thời gian tải. Đảm bảo bạn tận dụng bộ nhớ đệm trình duyệt cũng như các cơ chế bộ đệm trung gian như mạng phân phối nội dung . Điều này sẽ đảm bảo rằng tài nguyên của bạn được tải nhanh chóng cho cả khách truy cập trước cũng như khách truy cập lần đầu.

12. Hãy nhớ xử lý sự kiện của bạn

Vì các sự kiện như 'mousemove' và 'resize' thực hiện hàng trăm lần mỗi giây, đặc biệt chú ý đến bất kỳ trình xử lý sự kiện nào bị ràng buộc với các sự kiện đó. Nếu chúng mất hơn 2-3 mili giây để hoàn thành, bạn cần tối ưu hóa mã của mình tốt hơn.

13. Thay thế 'onclick' bằng 'mouseup'

Liên kết chức năng của bạn với sự kiện 'mouseup', phát sinh trước sự kiện 'click', mang lại hiệu suất tăng bằng cách đảm bảo rằng không có tương tác nào bị bỏ lỡ nếu người dùng thực hiện vài lần nhấp chuột trong sự tách biệt nhanh chóng.

14. Sử dụng các loại tham chiếu có trách nhiệm

Trong khi các loại giá trị nguyên thủy như chuỗi và số nguyên được sao chép mỗi khi chúng được chuyển vào một hàm mới, các kiểu tham chiếu, như mảng và đối tượng, được truyền dưới dạng tham chiếu ưu tiên thấp. Do đó, bạn có thể thực hiện những việc như vượt qua các tham chiếu nút DOM theo cách đệ quy để cắt giảm DOM traversal. Ngoài ra, hãy nhớ rằng việc so sánh các chuỗi luôn mất nhiều thời gian hơn so với các tham chiếu.

15. Cắt chuỗi phạm vi của bạn

Khi các hàm được thực thi trong JavaScript, một tập hợp các biến thứ tự đầu tiên bao gồm chuỗi phạm vi trực tiếp, các đối số của hàm và bất kỳ biến được khai báo cục bộ nào đều được khởi tạo. Do đó, cần có thời gian để leo lên chuỗi phạm vi khi bạn cố gắng truy cập vào một biến được khai báo toàn cục. Giảm độ sâu của lời gọi ngăn xếp và tận dụng từ khóa this có thể tăng tốc độ thực hiện.

16. Sử dụng phạm vi cục bộ ('this')

Nói về điều này, this cho phép bạn không chỉ viết mã không đồng bộ với các lời gọi lại, mà còn giúp tăng hiệu suất bằng cách giảm sự phụ thuộc vào các biến toàn cục hoặc đóng cửa nằm trong chuỗi phạm vi cao hơn. Ngược lại, bạn nên tránh từ khóa with vì nó sửa đổi chuỗi phạm vi, làm giảm hiệu suất. Bạn có thể dùng lại biến phạm vi bằng cách sử dụng các phương thức call() và apply() như sau:

var Person = Object.create({
    init: function(name) {
        this.name = name;
    },
    do: function(callback) {
        callback.apply(this);
    }
});

var bob = new Person('bob');

bob.do(function() {
    alert(this.name); // 'bob' is alerted because 'this' was rewired
});

17. Ưu tiên các hàm và cấu trúc gốc

Thay vì viết các thuật toán của riêng bạn hoặc phụ thuộc quá nhiều vào các đối tượng máy chủ, hãy tận dụng các hàm và cấu trúc gốc càng nhiều càng tốt. ECMAScript liệt kê hàng trăm cấu trúc gốc để bạn lựa chọn.

18. Hãy dùng Async và Defer

Nếu bạn muốn các thẻ script tải không đồng bộ hoặc trì hoãn cho đến khi phần còn lại của trang tải xong, bạn có thể thêm các thuộc tính async hoặc defer:

// tải example.js mà không bị ngắt hiển thị trang web
<script src="example.js" async></script>

// tải example.js sau khi trang web tải xong
<script src="example.js" defer></script>

Biểu đồ dưới đây cho thấy sự khác biệt giữa tải đồng bộ và không đồng bộ. Như chúng ta có thể thấy, tài sản đồng bộ cần đợi tài sản trước đó tải xong trước khi tài sản mới có thể bắt đầu; trong khi các tài sản được tải không đồng bộ có thể tải cùng một lúc.

19. Hoạt ảnh với requestAnimationFrame

Đối với ảnh động thì nên kết xuất ở tốc độ 60fps. Các thư viện JavaScript như Anime.js và Gsap rất hữu ích để tạo hoạt ảnh nhanh, nhưng nếu hoạt ảnh JavaScript của bạn vẫn chạy chậm, hãy thử sử dụng phương thức requestAnimationFrame() để tăng tốc độ.

20. Điều tiết và gỡ lỗi

Đặt giới hạn về số lượng JavaScript được thực thi cùng một lúc có thể giúp tinh chỉnh hiệu suất của ứng dụng của bạn. Hãy đặt số lần tối đa mà một hàm có thể được gọi theo thời gian, trong khi gỡ lỗi đảm bảo rằng một hàm không được gọi lại cho đến khi một khoảng thời gian được chỉ định trôi qua.

Các công cụ để cải thiện hiệu suất JavaScript

Nếu bạn cần thêm một chút hỗ trợ, có một số công cụ nén mã được thiết kế để giúp các nhà phát triển tối ưu hóa hiệu suất JavaScript của ứng dụng của họ. Nén mã, hoặc thu nhỏ mã, loại bỏ các ký tự không cần thiết khỏi mã nguồn, dẫn đến kích thước tệp nhỏ hơn và thời gian tải nhanh hơn . Dưới đây là mẫu của các công cụ hàng đầu để điều chỉnh mã JavaScript: