Sáu thực tiễn tốt nhất về jQuery để cải thiện hiệu suất
jQuery là một trong các thư viện JavaScript phổ biến nhất hiện nay. API của nó rất dễ sử dụng dẫn đến một đường cong học tập không quá dốc. Rất nhiều dự án sử dụng mã jQuery thay vì sử dụng trực tiếp JavaScript vanilla để mang lại các chức năng động.
Nhưng jQuery cũng có những thiếu sót.. Nó có thể dẫn đến một số vấn đề về hiệu suất nếu sử dụng bất cẩn giống như ngôn ngữ mà nó dựa trên. Bài đăng này sẽ liệt kê một số thực tiễn tốt nhất trong việc sử dụng jQuery sẽ giúp chúng tôi tránh mọi vấn đề về hiệu suất.
1. Tập lệnh tải lười biếng khi cần
Các trình duyệt chạy JavaScript trước khi tạo cây DOM và vẽ các pixel trên màn hình, bởi vì các tập lệnh có thể thêm các phần tử mới vào trang hoặc thay đổi bố cục hoặc kiểu của một số nút DOM. Vậy nên cung cấp cho trình duyệt ít tập lệnh hơn để thực thi trong khi tải trang, chúng ta có thể giảm thời gian để tạo và vẽ cây DOM cuối cùng, sau đó người dùng sẽ có thể xem trang.
Một cách để làm điều này trong jQuery là sử dụng $ .getScript để tải bất kỳ tệp script nào tại thời điểm cần thiết hơn là trong khi tải trang.
$ .getScript ("scripts / gallery.js", gọi lại); Đây là một chức năng ajax sẽ nhận được một tệp script khi bạn muốn, nhưng lưu ý rằng tệp được tìm nạp không được lưu trong bộ nhớ cache. Để bật bộ đệm cho getScript bạn sẽ phải kích hoạt tương tự cho tất cả các yêu cầu ajax. Bạn có thể làm như vậy bằng cách sử dụng mã dưới đây:
$ .ajaxSetup (cache: true);
2. Tránh $ (cửa sổ) .load () nếu tập lệnh của bạn không cần bất kỳ tài nguyên phụ nào của trang
Các $ (tài liệu). yet () tương đương với DOMContentLoaded (Ở đâu DOMContentLoaded có sẵn) và $ (cửa sổ) .load () đến Tải. Cái đầu tiên được kích hoạt khi DOM riêng của một trang được tải, nhưng không phải tài sản bên ngoài như hình ảnh và bảng định kiểu. Cái thứ hai được kích hoạt khi mọi thứ mà một trang được tạo thành, bao gồm nội dung của chính nó và tài nguyên phụ của nó được tải.
Vì vậy, nếu bạn đang viết một tập lệnh dựa trên tài nguyên phụ của trang, như thay đổi màu nền của div được tạo kiểu bởi biểu định kiểu bên ngoài, tốt nhất nên sử dụng $ (cửa sổ) .load ().
Nhưng, nếu không phải vậy, tốt hơn là nên bám vào $ (tài liệu). yet () bởi vì, jQuery gọi nó là sẳn sàng xử lý sự kiện cho dù bạn sử dụng $ (tài liệu). yet () hoặc không, vì vậy hãy sử dụng nó khi bạn có thể.
3. Sử dụng tách ra để xóa các thành phần khỏi DOM cần thay đổi.
“Từ chối” là một thuật ngữ chỉ sự thay đổi bố cục trong trang web, khi trình duyệt sắp xếp lại các yếu tố của trang để điều chỉnh một yếu tố mới, điều chỉnh thay đổi cấu trúc của một yếu tố, lấp đầy khoảng trống do một yếu tố bị loại bỏ hoặc một số hành động khác cần thay đổi bố cục trong trang. trào ngược là một đắt quá trình trình duyệt.
Chúng ta có thể giảm không. phản xạ gây ra bởi sự thay đổi cấu trúc của một yếu tố bằng cách thực hiện các thay đổi trên nó sau đưa nó ra khỏi dòng trang và đặt nó trở lại khi nó hoàn thành. Nếu bạn thêm nhiều hàng vào một bảng một, nó sẽ gây ra nhiều phản xạ. Vì vậy, tốt hơn là lấy bảng ra khỏi cây DOM, thêm các hàng vào nó và đưa nó trở lại DOM; điều này sẽ làm giảm phản xạ.
jQuery tách ra () cho phép chúng tôi xóa một phần tử khỏi trang, nó khác với tẩy() bởi vì nó sẽ lưu dữ liệu được liên kết với phần tử khi nó cần được thêm vào trang sau. Một phần tử tách rời sau đó có thể được đưa trở lại vào trang khi nó đã được sửa đổi.
4. Sử dụng css () để đặt chiều cao hoặc chiều rộng thay vì Chiều cao() và chiều rộng()
Nếu bạn đang đặt chiều cao hoặc chiều rộng của một phần tử trong jQuery, tôi khuyên bạn nên sử dụng css () chức năng vì thiết lập các giá trị đó bằng cách sử dụng Chiều cao() và chiều rộng() sẽ gây ra phản xạ thêm do sự truy cập của một số thuộc tính bố trí trong hàm tính toánStyleTests trong jQuery (được thử nghiệm trong phiên bản mới nhất).
Đối với mã p.height ("300px"); đây là những phản xạ.
Dành cho p.css ("chiều cao": "300px");
tính toánStyleTests được sử dụng để làm một số xét nghiệm hỗ trợ. Nó cũng được gọi trong khi nhận được chiều cao và chiều rộng sử dụng cả hai css () và chiều cao chiều rộng() , nhưng cho cài đặt nó chỉ được gọi cho chiều cao chiều rộng() mà có thể không cần thiết, vì vậy hãy sử dụng css () thay thế.
5. Không truy cập các thuộc tính bố trí không cần thiết
Truy cập các thuộc tính bố cục như chiều cao, chiều rộng, lề, v.v. sẽ kích hoạt chỉnh lại dòng trong trang. Lý do là bất cứ khi nào bạn yêu cầu trình duyệt cho bất kỳ thuộc tính bố trí nào, nó đảm bảo bạn nhận được giá trị cập nhật (trong trường hợp giá trị đã bị vô hiệu trước đó) bởi tính toán lại các giá trị và áp dụng bất kỳ thay đổi bố cục.
Vì vậy, cho dù bạn đang sử dụng jQuery hay vanilla JavaScript, cảnh giác với việc truy cập các thuộc tính bố trí không cần thiết đặc biệt là trong một vòng lặp hoặc do đó sau khi thực hiện thay đổi phong cách.
6. Sử dụng bộ nhớ đệm nơi bạn có thể
Một số chức năng của jQuery đi kèm với các cơ chế lưu trữ có thể được sử dụng tốt. Các yêu cầu Ajax làm bộ đệm tài nguyên, nhưng nó không có sẵn cho kịch bản và jsonp, vì vậy nếu bạn muốn lưu trữ trên tất cả các yêu cầu ajax của mình, bạn có thể muốn đặt nó trên toàn cầu như dưới đây.
Cũng lưu ý rằng nếu bạn tìm nạp tài nguyên bằng bài đăng nó sẽ không được lưu trong bộ nhớ cache ngay cả khi bạn bật bộ đệm với thiết lập ở trên.
Như tôi đã đề cập trước đó, tách ra () lưu trữ dữ liệu liên quan đến phần tử được loại bỏ không giống như tẩy();ẩn giấu() lưu trữ CSS ban đầu trưng bày giá trị của một phần tử trước khi ẩn nó để có thể khôi phục lại sau mà không mất dữ liệu.
Phần kết luận
Một cách bạn có thể chắc chắn rằng bạn đang sử dụng mã jQuery hiệu quả nhất cho nhu cầu của mình là đợi cho đến khi bạn thực sự chạy mã của mình và nhận thấy liệu có bất kỳ vấn đề về hiệu năng nào hay không. Nếu có, hãy sử dụng các công cụ gỡ lỗi và hiệu năng để phát hiện gốc rễ của vấn đề.
Vì jQuery giống như một cái kén cho JavaScript với các chức năng bổ sung cho tính tương thích và tính năng của trình duyệt, nên có thể khó chẩn đoán các sự cố nếu không có các công cụ này.
