JavaScript thường là yếu tố kích hoạt cho những thay đổi về hình ảnh. Đôi khi, điều đó khiến thay đổi trực tiếp thông qua thao tác kiểu cách, đôi khi thông qua tính toán để dẫn đến những thay đổi về hình ảnh, chẳng hạn như tìm kiếm hoặc sắp xếp dữ liệu. Đúng giờ hoặc JavaScript chạy trong thời gian dài có thể là nguyên nhân phổ biến gây ra các vấn đề về hiệu suất và bạn phải tìm cách giảm thiểu tác động của nó nếu có thể.
Tính toán kiểu
Thay đổi DOM bằng cách thêm và xoá các phần tử, thay đổi thuộc tính, lớp, hoặc phát ảnh động khiến trình duyệt phải tính toán lại các kiểu phần tử và trong nhiều trường hợp là bố cục của một phần hoặc toàn bộ trang. Quá trình này được gọi là phép tính kiểu tính toán.
Trình duyệt bắt đầu tính toán kiểu bằng cách tạo một tập hợp các bộ chọn phù hợp để xác định lớp, bộ chọn giả và mã nhận dạng nào áp dụng cho phần tử nhất định bất kỳ. Sau đó, Google Analytics 4 sẽ xử lý các quy tắc kiểu từ các bộ chọn phù hợp và tìm ra kiểu cuối cùng mà phần tử có.
Thời gian tính toán lại kiểu và độ trễ tương tác
Tương tác với Next Paint (INP) là môi trường thời gian chạy tập trung vào người dùng chỉ số hiệu suất đánh giá khả năng phản hồi tổng thể của một trang đối với hoạt động đầu vào của người dùng. Chỉ số này đo lường độ trễ tương tác từ khi người dùng tương tác với trang cho đến khi trình duyệt sẽ hiển thị khung tiếp theo hiển thị các cập nhật trực quan tương ứng giao diện người dùng.
Một thành phần quan trọng của một lượt tương tác là thời gian để vẽ điểm tiếp theo khung. Quá trình kết xuất công việc đã thực hiện để hiển thị khung hình tiếp theo bao gồm nhiều phần, bao gồm tính toán kiểu trang xảy ra ngay trước bố cục, tô màu và công việc tổng hợp. Trang này tập trung vào chi phí tính toán kiểu, nhưng giảm chi phí của giai đoạn kết xuất liên quan đến tương tác cũng làm giảm tổng độ trễ, bao gồm cả việc tính toán kiểu.
Giảm độ phức tạp của bộ chọn
Việc đơn giản hoá tên bộ chọn có thể giúp tăng tốc độ định kiểu cho trang tính toán. Các bộ chọn đơn giản nhất tham chiếu một phần tử trong CSS chỉ bằng một tên lớp:
.title {
/* styles */
}
Nhưng khi bất kỳ dự án nào phát triển, dự án đó có thể sẽ cần CSS phức tạp hơn và bạn có thể kết thúc bằng các bộ chọn như sau:
.box:nth-last-child(-n+1) .title {
/* styles */
}
Để xác định cách các kiểu này áp dụng cho trang, trình duyệt phải thực hiện một cách hiệu quả
hỏi "đây có phải là phần tử có lớp title có phần tử mẹ là
Phần tử contrừ-nth-plus-1 có lớp box?"
Việc tìm ra quy trình này có thể mất nhiều thời gian, tuỳ thuộc vào bộ chọn được dùng như
cũng như trình duyệt được đề cập. Để đơn giản hoá việc này, bạn có thể thay đổi bộ chọn
chỉ là tên lớp:
.final-box-title {
/* styles */
}
Những tên lớp thay thế này có vẻ khó xử lý, nhưng chúng khiến trình duyệt
công việc đơn giản hơn rất nhiều. Trong phiên bản trước, ví dụ: để trình duyệt biết
là phần tử cuối cùng thuộc loại này, trước hết phải biết mọi thứ về tất cả
các phần tử khác để xác định xem có phần tử nào đứng sau nó có thể
là nth-last-child. Việc này có thể tốn kém hơn rất nhiều so với
khớp bộ chọn với một phần tử chỉ vì lớp của nó khớp.
Giảm số lượng phần tử đang được tạo kiểu
Một yếu tố khác cần cân nhắc về hiệu suất, và thường là yếu tố quan trọng hơn bộ chọn độ phức tạp là lượng công việc cần xảy ra khi một phần tử thay đổi.
Nói chung, chi phí trong trường hợp xấu nhất khi tính kiểu phần tử được tính là số phần tử nhân với số lượng bộ chọn, bởi vì trình duyệt cần kiểm tra từng phần tử ít nhất một lần so với mỗi kiểu để xem kết quả phù hợp.
Các phép tính kiểu có thể nhắm mục tiêu trực tiếp một vài phần tử thay vì làm mất hiệu lực toàn bộ trang. Trong các trình duyệt hiện đại, điều này thường ít gặp phải vấn đề hơn vì trình duyệt không phải lúc nào cũng cần kiểm tra tất cả các yếu tố mà một thay đổi có thể ảnh hưởng. Mặt khác, các trình duyệt cũ hơn không phải lúc nào cũng được tối ưu hóa cho các tác vụ như vậy. Địa điểm có thể, bạn nên giảm số lượng phần tử không hợp lệ.
Đo lường chi phí tính toán lại kiểu
Một cách để đo lường chi phí tính toán lại kiểu là sử dụng hiệu suất trong Công cụ của Chrome cho nhà phát triển. Hãy làm như sau để bắt đầu:
- Mở Công cụ cho nhà phát triển.
- Chuyển đến thẻ Hiệu suất.
- Nhấp vào Ghi.
- Tương tác với trang.
Khi dừng quay, bạn sẽ thấy hình ảnh như sau:
Dải ở trên cùng là một biểu đồ hình ngọn lửa thu nhỏ cũng vẽ biểu đồ số khung hình theo giây. Hoạt động càng gần cuối dải thì càng nhanh khung đang được vẽ bởi trình duyệt. Nếu bạn thấy biểu đồ hình ngọn lửa đang chững lại trên cùng có các thanh màu đỏ ở trên thì bạn có công việc gây ra các khung chạy trong thời gian dài.
Các khung hình chạy lâu trong một tương tác như cuộn sẽ đáng để ánh sáng. Nếu bạn thấy một khối lớn màu tím, hãy phóng to hoạt động này và chọn một khối bất kỳ có nhãn Recalculate Style (Tính toán lại kiểu) để biết thêm thông tin về công việc tính toán lại kiểu tốn kém.
Khi bạn nhấp vào một sự kiện, ngăn xếp lệnh gọi của sự kiện đó sẽ xuất hiện. Nếu công việc kết xuất là do tương tác của người dùng, mã này gọi JavaScript đã kích hoạt thay đổi về kiểu. Biểu đồ này cũng cho thấy số lượng phần tử mà thay đổi này ảnh hưởng đến—chỉ hơn 900 trong trường hợp này và thời gian tính toán kiểu. Bạn có thể sử dụng thông tin này để bắt đầu cố gắng tìm bản sửa lỗi trong mã của bạn.
Sử dụng Khối, Phần tử, Đối tượng sửa đổi
Các phương pháp lập trình như BEM (Khối, Phần tử, Đối tượng sửa đổi) tích hợp trong bộ chọn phù hợp với các lợi ích về hiệu suất. BEM cho rằng mọi thứ đều có một lớp duy nhất và bạn cần hệ thống phân cấp cũng được đưa vào tên lớp:
.list {
/* Styles */
}
.list__list-item {
/* Styles */
}
Nếu cần một đối tượng sửa đổi, như trong ví dụ về con cuối cùng, bạn có thể thêm như trong ví dụ sau:
.list__list-item--last-child {
/* Styles */
}
BEM là xuất phát điểm phù hợp để sắp xếp CSS, cả từ một cấu trúc và vì việc tra cứu kiểu giúp đơn giản hoá nó.
Nếu bạn không thích BEM, có nhiều cách khác để tiếp cận CSS, nhưng bạn nên đánh giá hiệu suất và hiệu quả của chúng trước khi bạn bắt đầu.
Tài nguyên
Hình ảnh chính của Unsplash, của Markus Spiske.