Hiệu suất hiển thị

Người dùng sẽ biết nếu các 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à vô cùng quan trọng!

Người dùng web ngày nay kỳ vọng rằng các trang họ truy cập sẽ tương tác và mượt mà. Đó là nơi bạn cần tăng cường tập trung thời gian và công sức của mình. Các trang không nên chỉ tải nhanh mà còn phản hồi nhanh chóng với hoạt động đầu vào của người dùng trong toàn bộ 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 xác là những gì mà chỉ số Lượt tương tác với Nội dung hiển thị tiếp theo (INP) đo lường. INP tốt có nghĩa là một trang đáp ứng nhất quán và đáng tin cậy theo nhu cầu của người dùng.

Mặc dù một thành phần chính để tạo nên một trang chạy mượt mà liên quan đến lượng JavaScript mà bạn thực thi để phản hồi tương tác của người dùng, nhưng 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à kết xuất, và công việc này cần diễn ra nhanh nhất có thể để người dùng cảm thấy trải nghiệm nhanh và đáng tin cậy.

Để viết các trang phản hồi nhanh các 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 và đảm bảo rằng mã bạn viết cũng như mọi mã 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ị

Một người dùng tương tác với một trang web trên điện thoại di động.
Tốc độ làm mới của màn hình là một yếu tố quan trọng cần cân nhắc khi xây dựng các trang web có khả năng thích ứng với hoạt động đầu vào của người dùng.

Hầu hết thiết bị hiện nay đều làm mới màn hình 60 lần một giây. Mỗi lần làm mới sẽ tạo ra đầu ra hình ảnh mà bạn thấy và thường được gọi là khung. Trong video sau đây, khái niệm khung hình được minh hoạ:

Các khung như hiển thị trong bảng điều khiển hiệu suất của Công cụ của Chrome cho nhà phát triển. Khi con trỏ tua qua cuộn phim gần đầu, phần minh hoạ phóng to của từng khung sẽ xuất hiện trong phần chú thích dưới dạng trình đơn điều hướng trên thiết bị di động chuyển sang trạng thái "mở".

Mặc dù màn hình của thiết bị luôn làm mới vớ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 tạo được đủ 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 phải 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.

Vì một màn hình thông thường làm mới 60 lần mỗi giây, nên một số phép toán nhanh sẽ cho thấy trình duyệt có 16,66 mili giây để tạo 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 từng khung hình, vì vậy, bạn cần hoàn thành 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ẽ thay đổi trên màn hình. Hiện tượng này thường được gọi là hiện tượng giật.

Tuy nhiên, mục tiêu của bạn thay đổi tuỳ theo 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 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 khung thời gian mà người dùng cảm thấy ngay lập tức. Trong những trường hợp như vậy, 100 mili giây là con số đượ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 các khả năng khác nhau.

Bất kể mục tiêu của bạn là gì, dù mục tiêu của bạn là tạo ra nhiều khung hình mà ảnh động yêu cầu để tránh hiện tượng giật hay chỉ đơn giản là tạo ra một thay đổi riêng biệt về hình ảnh trong giao diện người dùng nhanh nhất có thể, thì việc hiểu rõ cách hoạt động của quy trình pixel của trình duyệt là cần thiết đối với công việc của bạn.

Quy trình pixel

Có 5 lĩnh vực chính mà bạn cần biết và lưu ý khi làm nhà phát triển web. Năm khu vực này là những khu vực 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:

Quy trình pixel đầy đủ bao gồm năm bước: JavaScript, Kiểu, Bố cục, Sơn và Tổng hợp.
Hình minh hoạ quy trình đầy đủ của pixel.
  • JavaScript: JavaScript thường được dùng để xử lý công việc sẽ dẫn đến thay đổi về hình ảnh đối với giao diện người dùng. Ví dụ: hàm này có thể là hàm animate của jQuery, sắp xếp một tập dữ liệu hoặc thêm các phần tử DOM vào trang. Bạn không nhất thiết phải sử dụng JavaScript để kích hoạt thay đổi về hình ảnh: Ảnh động CSS, hiệu ứng chuyển đổi CSSAPI Ả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 các quy tắc CSS sẽ áp dụng cho phần tử HTML nào dựa trên bộ chọn trùng khớp. Ví dụ: .headline là 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ính class chứa một lớp headline. Từ đó, khi đã biết các quy tắc, các quy tắc đó sẽ được áp dụng 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 dạng của trang, chẳng hạn như mức độ chiếm dụng của các phần tử không gian và vị trí mà các phần tử đó 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 theo chiều lên và xuống trên cây, vì vậy, trình duyệt có thể ảnh hưởng rất nhiều đến quá trình này.
  • Paint: Vẽ tranh là quá trình điền bằng pixel. Công cụ này bao gồm 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 hình ảnh trực quan của các phần tử sau khi tính toán bố cục của các phần tử đó trên trang. Việc vẽ thường được thực hiện trên nhiều bề mặt, thường được gọi là lớp.
  • Tổng hợp: Vì các phần của trang có thể đã được vẽ vào nhiều lớp, nên các phần đó cần được áp dụng trên 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 lên nhau, vì sai sót có thể khiến một phần tử xuất hiện chồng lên một phần tử khác một cách không chính xác.

Mỗi phần trong quy trình pixel này đại diện cho một cơ hội để ảnh động bị giật hoặc trì hoãn việc vẽ khung 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 đó, điều quan trọng là bạn phải hiểu chính xác những phần nào trong quy trình mà mã của bạn kích hoạt và điều tra xem bạn có thể giới hạn các thay đổi chỉ ở những phần trong quy trình pixel cần thiết để hiển thị chúng hay không.

Bạn có thể đã nghe thấy thuật ngữ "rasterize" được sử dụng kết hợp với "sơn". Lý do là vì thao tác vẽ thực ra là 2 nhiệm vụ:

  1. Tạo danh sách hàm gọi vẽ.
  2. Điền dữ liệu pixel.

Tính năng tạo điểm ảnh sau được gọi là "tạo điểm ảnh", vì vậy, bất cứ khi nào bạn thấy các bản ghi vẽ trong DevTools, bạn nên coi việc này là bao gồm việc 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 nhiều luồng, nhưng nhà phát triển không thuộc quyền kiểm soát của bạn.

Không phải lúc nào bạn cũng 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ó 3 cách quy trình diễn ra bình thường cho một khung hình nhất định khi bạn thay đổi hình ảnh, đó là với JavaScript, CSS hoặc API Ảnh động web.

1. JS / CSS > Kiểu > Bố cục > Sơn > Tổng hợp

Quy trình đầy đủ pixel, không bỏ qua bước nào.

Nếu bạn thay đổi thuộc tính "bố cục", chẳng hạn như thuộc tính làm 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), trình duyệt cần kiểm tra tất cả các phần tử khác và "chỉnh lại luồng" trên trang. Mọi khu vực bị ảnh hưởng cần được sơn lại và các thành phần được sơn lại sau cùng sẽ cần được kết hợp lại với nhau.

2. JS / CSS > Kiểu > Sơn > Hỗn hợp

Quy trình pixel có bước bố cục bị bỏ qua.

Nếu đã 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 tốn kém vì có thể đã góp phần gây ra độ trễ đáng kể trong việc tạo khung tiếp theo.

3. JS / CSS > Kiểu > Tổng hợp

Quy trình pixel được bỏ qua các bước bố cục và tô màu.

Nếu bạn thay đổi một thuộc tính yêu cầu không phải bố cục hoặc tô màu, 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à 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 một trang, chẳng hạn như ảnh động hoặc cuộn. Sự thật thú vị: Chromium tối ưu hoá hoạt động cuộn trang để hoạt động này chỉ diễn ra trên luồng của trình tổng hợp nếu 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 vẽ trước đó trên màn hình.

Hiệu suất web là nghệ thuật tránh công việc, trong khi tăng hiệu suất 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, vấn đề nằm ở việc làm việc với trình duyệt chứ không phải dựa trên trình duyệt. Bạn cần lưu ý rằng chi phí tính toán cho những công việc hiển thị trước đây trong quy trình sẽ khác; một số tác vụ vốn đã tốn kém hơn những công việc khác!

Hãy cùng tìm hiểu sâu hơn về các phần khác nhau của quy trình này. 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 hiển thị trình duyệt

Ảnh chụp màn hình khoá học trên Udacity

Hiệu suất rất quan trọng đối với người dùng và để 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 các trang web phản ứng nhanh với các tương tác của người dùng và hiển thị mượt mà. Chuyên gia hiệu suất Paul Lewis luôn sẵn sàng 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. Bạn sẽ kết thúc khoá học này cùng với các công cụ cần thiết để lập hồ sơ cho ứng dụng và xác định nguyên nhân khiến hiệu suất kết xuất dưới mức 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 dễ dàng xây dựng các trang web nhanh mà người dùng sẽ cảm 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 bất cứ lúc nào.