JavaScript thường là yếu tố kích hoạt các thay đổi về hình ảnh. Đôi khi, JavaScript thực hiện những thay đổi đó trực tiếp thông qua việc thao tác với kiểu, và đôi khi thông qua các phép tính dẫn đến thay đổi về hình ảnh, chẳng hạn như tìm kiếm hoặc sắp xếp dữ liệu. JavaScript không đúng thời điểm hoặc 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. Bạn nên cố gắng giảm thiểu tác động của JavaScript ở những nơi có thể.
Tính toán kiểu
Việc 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 sẽ khiến trình duyệt tính toán lại các kiểu phần tử và trong nhiều trường hợp, 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 bộ chọn phù hợp để xác định những lớp, bộ chọn giả và mã nhận dạng áp dụng cho bất kỳ phần tử nào. Sau đó, trình duyệt sẽ xử lý các quy tắc kiểu từ bộ chọn phù hợp và xác định kiểu cuối cùng của phần tử.
Vai trò của việc tính toán lại kiểu trong độ trễ tương tác
Lượt tương tác đến nội dung hiển thị tiếp theo (INP) là một chỉ số hiệu suất thời gian chạy tập trung vào người dùng, đá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ừ thời điểm người dùng tương tác với trang cho đến khi trình duyệt kết xuất khung hình tiếp theo cho thấy các bản cập nhật hình ảnh tương ứng cho giao diện người dùng.
Một thành phần quan trọng của lượt tương tác là thời gian cần thiết để kết xuất khung hình tiếp theo. Công việc kết xuất được thực hiện để trình bày khung hình tiếp theo bao gồm nhiều phần, trong đó có việc tính toán các kiểu trang xảy ra ngay trước khi bố cục, kết xuất và 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 việc giảm bất kỳ phần nào trong tổng thời lượng kết xuất của lượt tương tác cũng sẽ làm giảm tổ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 tăng tốc độ tính toán kiểu của trang. Bộ chọn đơn giản nhất tham chiếu đến một phần tử trong CSS chỉ bằng tên lớp:
.title {
/* styles */
}
Tuy nhiên, khi bất kỳ dự án nào phát triển, dự án đó có thể cần CSS phức tạp hơn và bạn có thể kết thúc với 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 hỏi một cách hiệu quả "đây có phải là phần tử có lớp title với phần tử mẹ có lớp box là phần tử con thứ (n-1) của phần tử mẹ không? Việc tìm ra điều này có thể mất 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 thành tên lớp cụ thể hơn:
.final-box-title {
/* styles */
}
Những tên lớp thay thế này có thể trông không phù hợp, nhưng chúng giúp công việc của trình duyệt trở nên đơn giản hơn rất nhiều. Ví dụ: trong phiên bản trước, để trình duyệt biết một phần tử là phần tử cuối cùng thuộc loại đó, trước tiên, trình duyệ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 xuất hiện sau phần tử đó có thể là nth-last-child hay không. Việc này có thể tốn kém hơn nhiều về mặt tính toán so với việc so khớp bộ chọn với một phần tử chỉ dựa trên tên lớp của phần tử đó.
Giảm số lượng phần tử đượ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 quan trọng hơn độ phức tạp của bộ chọn) là lượng công việc cần thực hiện khi một phần tử thay đổi.
Nói chung, chi phí trường hợp xấu nhất để tính toán kiểu phần tử đã tính toán là số lượng phần tử nhân với số lượng bộ chọn, 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 phần tử đó có khớp hay không.
Các phép tính kiểu có thể nhắm mục tiêu trực tiếp vào một số phần tử thay vì vô hiệu hoá toàn bộ trang. Trong các trình duyệt hiện đại, vấn đề này có xu hướng ít xảy ra 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 phần tử mà thay đổi có thể ảnh hưởng. Mặt khác, các trình duyệt cũ không phải lúc nào cũng được tối ưu hoá cho các tác vụ như vậy. Ở những nơi có thể, bạn nên giảm số lượng phần tử bị vô hiệu hoá.
Đo lường chi phí tính toán lại kiểu
Bạn có thể đo lường chi phí tính toán lại kiểu trong trình duyệt theo một vài cách. Mỗi cách trong số đó phụ thuộc vào việc bạn muốn đo lường trong trình duyệt trong môi trường phát triển hay muốn đo lường thời gian cần thiết để quá trình này diễn ra đối với 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 Chrome DevTools
Một cách để đo lường chi phí tính toán lại kiểu là sử dụng bảng điều khiển hiệu suất trong Chrome DevTools. Hãy làm như sau để bắt đầu:
- Mở DevTools.
- Chuyển đến thẻ Hiệu suất.
- Đánh dấu vào hộp Thống kê bộ chọn (không bắt buộc).
- Nhấp vào Ghi.
- Tương tác với trang.
Khi ngừng ghi, bạn sẽ thấy hình ảnh tương tự như sau:
Dải ở trên cùng là biểu đồ hình ngọn lửa thu nhỏ cũng vẽ biểu đồ khung hình/giây. Hoạt động càng gần cuối dải, thì trình duyệt càng kết xuất khung hình nhanh hơn. Nếu bạn thấy biểu đồ hình ngọn lửa ổn định ở trên cùng với các thanh màu đỏ phía trên, thì bạn có công việc đang gây ra các khung hình chạy trong thời gian dài.
Các khung hình chạy trong thời gian dài trong một lượt tương tác như cuộn trang đáng được xem xét kỹ hơn. Nếu bạn thấy một khối màu tím lớn, hãy phóng to hoạt động và chọn bất kỳ công việc nào được gắn nhãn 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 có thể tốn kém.
Khi nhấp vào sự kiện, bạn sẽ thấy ngăn xếp lệnh gọi của sự kiện đó. Nếu công việc kết xuất là do lượt tương tác của người dùng, thì công việc đó sẽ gọi JavaScript đã kích hoạt thay đổi kiểu. Công việc này cũng cho biết số lượng phần tử mà thay đổi ảnh hưởng (chỉ hơn 900 phần tử 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 tìm cách khắc phục trong mã của mình.
Nếu bạn đánh dấu vào hộp kiểm Thống kê bộ chọn trong phần cài đặt Bảng điều khiển hiệu suất trước khi thực hiện dấu vết, thì bảng điều khiển dưới cùng trong dấu vết sẽ có một thẻ bổ sung có cùng tên.
Bảng điều khiển này cung cấp dữ liệu hữu ích về chi phí tương đối của từng bộ chọn, cho phép bạn xác định các bộ chọn CSS tốn kém.
Hãy bật tính năng này khi bạn cần kiểm tra hiệu suất của các sự kiện Tính toán lại kiểu và thông tin kết xuất khác.Để biết thêm thông tin, hãy xem tài liệu về Thống kê 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 thời gian cần thiết để tính toán lại kiểu cho
người dùng thực trên trang web của mình, thì API Khung hình ảnh động dài
sẽ cung cấp cho bạn các công cụ cần thiết để thực hiện việc này. Dữ liệu từ API này đã được thêm vào thư viện
web-vitals 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 của một lượt tương tác là yếu tố chính đóng góp vào INP của một trang, thì bạn sẽ muốn tìm hiểu xem thời gian đó được dùng để tính toán lại các kiểu trên trang là bao nhiêu. Để biết thêm thông tin, hãy đọc về cách đo lường thời gian tính toán lại kiểu trong thực tế.