Người dùng sẽ nhận thấy nếu trang web và ứng dụng không chạy tốt, vì vậy, việc tối ưu hoá hiệu suất kết xuất là rất quan trọng!
Người dùng web ngày nay mong muốn các trang họ truy cập sẽ có tính tương tác và mượt mà. Đó là lý do bạn cần ngày càng tập trung thời gian và công sức vào việc này. Các trang không chỉ cần tải nhanh mà còn phải phản hồi nhanh với hoạt động đầu vào của người dùng trong toàn bộ vòng đời của trang. Trên thực tế, khía cạnh này của trải nghiệm người dùng chính là điều mà chỉ số Lượt tương tác đến nội dung hiển thị tiếp theo (INP) đo lường. Chỉ số INP tốt có nghĩa là trang phản hồi một cách nhất quán và đáng tin cậy theo nhu cầu của người dùng.
Mặc dù thành phần chính giúp trang có cảm giác nhanh chóng liên quan đến lượng JavaScript bạn thực thi để phản hồi các hoạt động tương tác của người dùng, nhưng điều người dùng mong đợi là những thay đổi về hình ảnh đối với giao diện người dùng. Những thay đổi về hình ảnh đối với giao diện người dùng là kết quả của một số loại công việc, thường được gọi chung là kết xuất và công việc này cần diễn ra nhanh nhất có thể để trải nghiệm người dùng có cảm giác nhanh chóng và đáng tin cậy.
Để viết các trang phản hồi nhanh với hoạt động tương tác của người dùng, bạn cần hiểu cách trình duyệt xử lý HTML, JavaScript và CSS, đồng thời đảm bảo rằng mã bạn viết (cũng như mọi mã của bên thứ ba khác mà bạn đưa vào) chạy hiệu quả nhất có thể.
Lưu ý về tốc độ làm mới của thiết bị
Hầu hết các thiết bị hiện nay đều làm mới màn hình 60 lần mỗi giây. Mỗi lần làm mới sẽ tạo ra kết quả hình ảnh mà bạn thấy và thường được gọi là khung hình. Trong video sau, khái niệm về khung hình được minh hoạ:
Mặc dù màn hình của thiết bị luôn làm mới ở tốc độ nhất quán, nhưng các ứng dụng chạy trên thiết bị không nhất thiết phải luôn tạo ra đủ khung hình để phù hợp với tốc độ làm mới đó. Ví dụ: nếu có ảnh động hoặc hiệu ứng chuyển đổi đang chạy, trình duyệt cần phải khớp với tốc độ làm mới của thiết bị để tạo ra một khung hình cho mỗi lần màn hình làm mới.
Giả sử một màn hình thông thường làm mới 60 lần mỗi giây, thì một phép tính nhanh sẽ cho thấy trình duyệt có 16,66 mili giây để tạo ra mỗi khung hình. Tuy nhiên, trên thực tế, trình duyệt có mức hao tổn riêng cho mỗi khung hình, vì vậy, bạn cần hoàn tất tất cả công việc trong vòng 10 mili giây. Khi bạn không đáp ứng được ngân sách này, tốc độ khung hình sẽ giảm và nội dung trang sẽ bị giật trên màn hình. Hiện tượng này thường được gọi là giật.
Tuy nhiên, mục tiêu của bạn sẽ thay đổi dựa trên loại công việc bạn đang cố gắng thực hiện. Việc đáp ứng ngưỡng 10 mili giây là rất quan trọng đối với ảnh động, trong đó các đối tượng trên màn hình được nội suy trên một loạt khung hình giữa hai điểm. Khi nói đến những thay đổi riêng biệt trong giao diện người dùng (tức là chuyển từ trạng thái này sang trạng thái khác mà không có bất kỳ chuyển động nào ở giữa), bạn nên thực hiện những thay đổi đó trong một khung thời gian mà người dùng cảm thấy là tức thì. Trong những trường hợp như vậy, 100 mili giây là con số thường được trích dẫn, nhưng ngưỡng "tốt" của chỉ số INP là 200 mili giây trở xuống để phù hợp với nhiều loại thiết bị có các chức năng khác nhau.
Dù mục tiêu của bạn là gì (cho dù là tạo ra nhiều khung hình mà ảnh động yêu cầu để tránh bị giật hay chỉ đơn thuần là tạo ra một thay đổi trực quan riêng biệt trong giao diện người dùng nhanh nhất có thể), thì việc hiểu cách hoạt động của quy trình kết xuất pixel của trình duyệt là điều cần thiết cho công việc của bạn.
Quy trình pixel
Có 5 khía cạnh chính mà bạn cần biết và lưu ý trong công việc của một nhà phát triển web. Năm khía cạnh này là những khía cạnh mà bạn có quyền kiểm soát nhiều nhất và mỗi khía cạnh đại diện cho một điểm chính trong quy trình từ pixel đến màn hình:
- JavaScript: JavaScript thường được dùng để xử lý công việc dẫn đến
những thay đổi về hình ảnh đối với giao diện người dùng. Ví dụ: đây có thể là hàm
animatecủa jQuery, sắp xếp tập dữ liệu hoặc thêm các phần tử DOM vào trang. Tuy nhiên, JavaScript không hoàn toàn cần thiết để kích hoạt các thay đổi về hình ảnh: Ảnh động CSS, hiệu ứng chuyển đổi CSS và API Ảnh động web có thể tạo ảnh động cho nội dung trang. - Tính toán kiểu: Đây là quá trình tìm ra quy tắc CSS nào áp dụng cho phần tử HTML nào dựa trên bộ chọn phù hợp. Ví dụ:
.headlinelà một ví dụ về bộ chọn CSS áp dụng cho mọi phần tử HTML có giá trị thuộc tínhclasschứa lớpheadline. Từ đó, khi đã biết các quy tắc, trình duyệt sẽ áp dụng các quy tắc đó và tính toán kiểu cuối cùng cho từng phần tử. - Bố cục: Sau khi biết quy tắc nào áp dụng cho một phần tử, trình duyệt có thể bắt đầu tính toán hình học của trang, chẳng hạn như không gian mà các phần tử chiếm và vị trí xuất hiện trên màn hình. Mô hình bố cục của web có nghĩa là
một phần tử có thể ảnh hưởng đến các phần tử khác. Ví dụ: chiều rộng của phần tử
<body>thường ảnh hưởng đến kích thước của các phần tử con trong toàn bộ cây, vì vậy, trình duyệt có thể phải thực hiện khá nhiều thao tác. - Vẽ: Vẽ là quá trình lấp đầy các pixel. Quá trình này bao gồm việc vẽ văn bản, màu sắc, hình ảnh, đường viền, bóng và về cơ bản là mọi khía cạnh hình ảnh của các phần tử sau khi bố cục của chúng trên trang đã được tính toán. Bản vẽ thường được thực hiện trên nhiều bề mặt, thường được gọi là lớp.
- Kết hợp: Vì các phần của trang có thể được vẽ trên nhiều lớp, nên chúng cần được áp dụng cho màn hình theo đúng thứ tự để trang hiển thị như mong đợi. Điều này đặc biệt quan trọng đối với các phần tử chồng chéo lên nhau, vì lỗi có thể khiến một phần tử xuất hiện không chính xác trên phần tử khác.
Mỗi phần trong quy trình kết xuất điểm ảnh này đều có thể gây ra hiện tượng giật hình trong ảnh động hoặc làm chậm quá trình vẽ khung hình, ngay cả khi có những thay đổi riêng biệt về hình ảnh đối với giao diện người dùng. Do đó, bạn cần phải hiểu chính xác phần nào trong quy trình mà mã của bạn kích hoạt, đồng thời tìm hiểu xem bạn có thể giới hạn các thay đổi chỉ đối với những phần của quy trình kết xuất điểm ảnh cần thiết để kết xuất chúng hay không.
Bạn có thể đã nghe thấy thuật ngữ "rasterize" (mành hoá) được dùng cùng với "paint" (vẽ). Điều này là do việc vẽ thực ra bao gồm hai nhiệm vụ:
- Tạo danh sách các hàm gọi vẽ.
- Đang điền điểm ảnh.
Quá trình sau được gọi là "quá trình tạo điểm ảnh", vì vậy, bất cứ khi nào bạn thấy bản ghi vẽ trong Công cụ cho nhà phát triển, bạn nên coi quá trình này bao gồm cả quá trình tạo điểm ảnh. Trong một số cấu trúc, việc tạo danh sách các hàm gọi vẽ và tạo điểm ảnh được thực hiện trên các luồng khác nhau, nhưng điều đó không nằm trong tầm kiểm soát của bạn với tư cách là nhà phát triển.
Không phải lúc nào bạn cũng cần phải xử lý mọi phần của quy trình trên mọi khung hình. Trên thực tế, có 3 cách để quy trình thường diễn ra cho một khung hình nhất định khi bạn thực hiện thay đổi về hình ảnh, bằng JavaScript, CSS hoặc API Ảnh động web.
1. JS/CSS > Kiểu > Bố cục > Vẽ > Kết hợp
Nếu bạn thay đổi một thuộc tính "bố cục", chẳng hạn như thuộc tính thay đổi hình dạng của một phần tử như chiều rộng, chiều cao hoặc vị trí của phần tử đó (chẳng hạn như thuộc tính CSS left hoặc top), thì trình duyệt cần kiểm tra tất cả các phần tử khác và "chỉnh lại" trang. Mọi khu vực bị ảnh hưởng đều cần được sơn lại và các thành phần được sơn cuối cùng sẽ cần được kết hợp lại với nhau.
2. JS/CSS > Kiểu > Vẽ > Kết hợp
Nếu bạn thay đổi một thuộc tính "chỉ vẽ" cho một phần tử trong CSS (ví dụ: các thuộc tính như background-image, color hoặc box-shadow), thì bước bố cục không cần thiết để cam kết cập nhật hình ảnh cho trang. Bằng cách bỏ qua bước bố cục (nếu có thể), bạn sẽ tránh được công việc bố cục có thể tốn kém, nếu không thì có thể góp phần gây ra độ trễ đáng kể trong việc tạo khung hình tiếp theo.
3. JS/CSS > Kiểu > Thành phần
Nếu bạn thay đổi một thuộc tính không yêu cầu bố cục hoặc vẽ, thì trình duyệt có thể chuyển thẳng đến bước kết hợp. Đây là đường dẫn rẻ nhất và đáng mong đợi nhất thông qua quy trình pixel cho các điểm áp suất cao trong vòng đời của trang, chẳng hạn như ảnh động hoặc thao tác cuộn. Thông tin thú vị: Chromium tối ưu hoá thao tác cuộn trang để thao tác này chỉ diễn ra trên luồng trình kết hợp khi có thể, nghĩa là ngay cả khi trang không phản hồi, bạn vẫn có thể cuộn trang và xem các phần của trang đã được vẽ trước đó trên màn hình.
Hiệu suất web là nghệ thuật tránh công việc, đồng thời tăng hiệu quả của mọi công việc cần thiết nhiều nhất có thể. Trong nhiều trường hợp, bạn nên làm việc với trình duyệt, chứ không phải chống lại trình duyệt. Cần lưu ý rằng công việc được hiển thị trước đó trong quy trình khác nhau về chi phí tính toán; một số tác vụ vốn dĩ tốn kém hơn những tác vụ khác!
Hãy cùng tìm hiểu các phần khác nhau của quy trình. Chúng ta sẽ xem xét các vấn đề thường gặp, cũng như cách chẩn đoán và khắc phục các vấn đề đó.
Tối ưu hoá hoạt động kết xuất của trình duyệt
Hiệu suất là yếu tố quan trọng đối với người dùng. Để xây dựng trải nghiệm tốt cho người dùng, nhà phát triển web cần xây dựng những trang web phản hồi nhanh với các hoạt động tương tác của người dùng và hiển thị mượt mà. Chuyên gia về hiệu suất Paul Lewis sẽ giúp bạn loại bỏ hiện tượng giật và tạo các ứng dụng web duy trì hiệu suất 60 khung hình/giây. Sau khi hoàn thành khoá học này, bạn sẽ có các công cụ cần thiết để phân tích ứng dụng và xác định nguyên nhân khiến hiệu suất kết xuất chưa tối ưu. Bạn cũng sẽ khám phá quy trình kết xuất của trình duyệt và tìm hiểu các mẫu giúp bạn dễ dàng xây dựng các trang web nhanh mà người dùng sẽ thấy thích thú khi sử dụng.
Đây là một khoá học miễn phí được cung cấp thông qua Udacity và bạn có thể tham gia bất cứ lúc nào.