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à tính toán kiểu.
Trình duyệt bắt đầu tính toán các 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ó.
Vai trò của việc tính toán lại kiểu trong độ 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 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. Hướng dẫn này tập trung vào chi phí tính toán kiểu, nhưng giảm bất kỳ phần nào trong tổng thời lượng hiển thị của tương tác cũng làm giảm tổng thời lượng độ trễ.
Giảm độ phức tạp của bộ chọn
Việc đơn giản hoá bộ chọn CSS có thể giúp bạn tính toán kiểu trên trang nhanh hơ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à một lớp
box có phải là phần tử con trừ-nth-cộng-1 của phần tử mẹ không? Tìm hiểu điều này
có thể mất chút thời gian cho trình duyệt. Để đơn giản hoá việc này, bạn có thể thay đổi
bộ chọn làm tên lớp cụ thể hơn:
.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ử trên cơ sở duy nhất là tên lớp.
Giảm số lượng phần tử đang được tạo kiểu
Một cân nhắc khác về hiệu suất—và thường là bộ chọn quan trọng hơ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
Có một số cách giúp bạn đo lường chi phí tính toán lại kiểu trong trình duyệt. Mỗi yếu tố trong số đó phụ thuộc vào việc bạn có muốn đo lường lượt chuyển đổi đó trong trình duyệt hay không trong môi trường phát triển hoặc nếu bạn muốn đo lường thời gian quá trình này tiếp cận người dùng thực trên trang web của bạn.
Đo lường chi phí tính toán lại kiểu trong Công cụ của Chrome cho nhà phát triển
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 dấu vào hộp Số liệu thống kê về bộ chọn (không bắt buộc).
- 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ể dùng để bắt đầu cố gắng tìm bản sửa lỗi trong mã của bạn.
Nếu bạn đã đánh dấu hộp đánh dấu Số liệu thống kê về bộ chọn trong phần cài đặt Bảng hiệu suất trước khi theo dõi, sau đó ở dưới cùng bảng điều khiển trong dấu vết sẽ có thêm một thẻ cùng tên.
Bảng này cung cấp dữ liệu hữu ích về chi phí tương đối của từng công cụ chọn, cho phép bạn xác định các bộ chọn CSS tốn kém.
Để biết thêm thông tin, hãy xem tài liệu về Số liệu thống kê về bộ chọn CSS.
Đo lường chi phí tính toán lại kiểu cho người dùng thực
Nếu bạn muốn biết mất bao lâu để tính toán lại kiểu
người dùng thực trên trang web của bạn, API Khung ảnh động dài
sẽ cung cấp cho bạn các công cụ cần thiết để làm như vậy. Dữ liệu từ API này đã được thêm vào
web-vitals thư viện JavaScript,
bao gồm cả thời gian tính toán lại kiểu.
Nếu bạn nghi ngờ rằng độ trễ trình bày tương tác là yếu tố chính người đóng góp vào INP của trang, bạn sẽ muốn xác định xem mất bao nhiêu thời gian đã dành tính toán lại kiểu trên trang. Để biết thêm thông tin, hãy đọc về cách đo thời gian tính toán lại kiểu trong trường.
Tài nguyên
- Số liệu thống kê về bộ chọn trong Công cụ của Chrome cho nhà phát triển
- Vô hiệu hoá kiểu trong Blink
- Lượt tương tác với nội dung hiển thị tiếp theo (INP)
- Thư viện JavaScript
web-vitals - Đo lường thời gian tính toán lại kiểu trong trường
Hình ảnh chính của Unsplash, của Markus Spiske.