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 mà họ truy cập sẽ có tính tương tác và mượt mà. Đó là nơi bạn cần tập trung nhiều thời gian và công sức hơn. Trang không chỉ phải 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 suốt vòng đời. Trên thực tế, khía cạnh này của trải nghiệm người dùng chính là nội dung mà chỉ số Lượt tương tác đến nội dung hiển thị tiếp theo (INP) đo lường. INP tốt có nghĩa là trang phản hồi nhất quán và đáng tin cậy đối với nhu cầu của người dùng.
Mặc dù một thành phần chính giúp trang có cảm giác nhanh chóng là lượng JavaScript bạn thực thi để phản hồi các lượt tương tác của người dùng, nhưng những gì 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. Các 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à hiển thị và công việc này cần diễn ra nhanh nhất có thể để người dùng có trải nghiệm nhanh chóng và đáng tin cậy.
Để viết các trang phản hồi nhanh chóng các lượt 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 thiết bị
Hầu hết các thiết bị hiện nay làm mới màn hình 60 lần/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. 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 phải lúc nào cũng có thể tạo đủ khung hình để khớ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 khớp với tốc độ làm mới của thiết bị để tạo một khung hình cho mỗi lần màn hình làm mới.
Do một màn hình thông thường làm mới 60 lần/giây, nên một số phép tính nhanh sẽ cho thấy rằng trình duyệt có 16,66 mili giây để tạo mỗi khung hình. Tuy nhiên, trong thực tế, trình duyệt có mức hao tổn riêng cho mỗi khung, vì vậy, bạn cần hoàn tất mọi công việc trong 10 mili giây. Khi bạn không đáp ứng được mứ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, các 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 các 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 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 thiết bị hơn với nhiều 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 cần để tránh hiện tượng giật, hay chỉ đơn thuần là tạo ra một thay đổi hình ảnh 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 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 xử lý pixel
Có 5 lĩnh vực chính mà bạn cần biết và lưu ý trong công việc của mình với tư cách là nhà phát triển web. 5 khu vực này là những khu vực mà bạn có nhiều quyền kiểm soát nhất và mỗi khu vực đạ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 sẽ dẫn đến các thay đổi về hình ảnh trên 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 thực sự 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 trên web có thể tạo ảnh động cho nội dung trang. - Tính toán kiểu: Đây là quá trình xác định quy tắc CSS nào áp dụng cho phần tử HTML nào dựa trên bộ chọn trùng khớp. Ví dụ:
.headlinelà 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 một lớpheadline. Từ đó, sau khi biết các quy tắc, các quy tắc đó sẽ được áp dụng và các kiểu cuối cùng cho từng phần tử sẽ được tính toán. - 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 từ trên xuống dưới trong cây, vì vậy, trình duyệt có thể phải xử lý khá nhiều trong quá trình này. - Vẽ: Vẽ là quá trình tô màu 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 nền tảng, thường được gọi là lớp.
- Hợp chất: Vì các phần của trang có thể được vẽ lên nhiều lớp, nên các phần đó 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ì một lỗi có thể khiến một phần tử xuất hiện không chính xác ở phía trên phần tử khác.
Mỗi phần trong quy trình pixel này đều có thể gây ra hiện tượng giật trong ảnh động hoặc trì hoãn việc vẽ khung hình ngay cả khi có thay đổi về hình ảnh riêng biệt đối với giao diện người dùng. Do đó, điều quan trọng là phải hiểu chính xác mã của bạn kích hoạt những phần nào của quy trình và điều tra xem bạn có thể chỉ giới hạn các thay đổi ở những phần của quy trình pixel cần thiết để hiển thị các pixel đó hay không.
Bạn có thể đã nghe thấy thuật ngữ "dùng điểm ảnh" được dùng cùng với "vẽ". Điều này là do việc vẽ thực sự là hai tác vụ:
- Tạo danh sách lệnh gọi vẽ.
- Điền vào các pixel.
Quá trình sau được gọi là "tạo điểm ảnh", vì vậy, bất cứ khi nào bạn thấy bản ghi vẽ trong DevTools, bạn nên coi đó là 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 lệnh 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 bạn không kiểm soát được việc đó 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 chạm vào mọi phần của quy trình trên mọi khung hình. Trên thực tế, có ba cách mà 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 trên web.
1. JS / CSS > Kiểu > Bố cục > Vẽ > Kết hợp
Nếu bạn thay đổi 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à "lưu lại luồng" trang. Mọi khu vực bị ảnh hưởng sẽ 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ẽ > Hợp nhất
Nếu bạn đã thay đổi 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ạn không cần thực hiện bước bố cục để 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ây ra độ trễ đáng kể trong quá trình tạo khung hình tiếp theo.
3. JS / CSS > Kiểu > Hợp chất
Nếu bạn thay đổi một thuộc tính không yêu cầu bố cục hoặc vẽ, trình duyệt có thể chuyển thẳng đến bước kết hợp. Đây là lộ trình rẻ nhất và đáng mong muốn nhất thông qua quy trình pixel cho các điểm áp lực cao trong vòng đời của trang, chẳng hạn như ảnh động hoặc cuộn. Thông tin thú vị: Chromium tối ưu hoá việc cuộn trang để chỉ xảy ra trên luồng trình kết hợp khi có thể. Tức là ngay cả khi một 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 cần làm việc với trình duyệt chứ không phải chống lại trình duyệt. Xin lưu ý rằng công việ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 đã tốn kém hơn các 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 trên trình duyệt
Hiệu suất rất quan trọng đối với người dùng. Để tạo ra trải nghiệm người dùng tốt, nhà phát triển web cần xây dựng các trang web phản ứng 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 tài nguyên ứng dụng và xác định nguyên nhân gây ra hiệu suất kết xuất không 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à khám phá các mẫu giúp bạn dễ dàng xây dựng các trang web nhanh chóng mà người dùng sẽ thấy thú vị khi sử dụng.
Đây là một khoá học miễn phí do Udacity cung cấp và bạn có thể tham gia khoá học này bất cứ lúc nào.