Người dùng sẽ nhận thấy nếu các trang web và ứng dụng hoạt động không 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 kỳ vọng rằng các trang họ truy cập sẽ tương tác và trơn tru, và đó là nơi bạn cần ngày càng tập trung thời gian và công sức. Trang không chỉ tải nhanh mà còn 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 của chúng. 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à chỉ số Lượt tương tác với nội dung hiển thị tiếp theo (INP) đo lường. Tốt INP có nghĩa là một trang đáp ứng một cách nhất quán và tin cậy đối với của bạn.
Mặc dù thành phần chính khiến một trang ngắn gọn bao gồm số 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 dự đoán là những thay đổi về hình ảnh đối với giao diện người dùng. Thay đổi về hình ảnh đối với 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 phải diễn ra càng nhanh càng tốt để trải nghiệm người dùng nhanh chóng và đáng tin cậy.
Để viết các trang phản hồi nhanh chóng với 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ư bất kỳ mã bên thứ ba nào khác mà bạn đưa vào) sẽ chạy như hiệu quả nhất có thể.
Lưu ý về tốc độ làm mới thiết bị
Ngày nay, hầu hết các thiết bị đều làm mới màn hình 60 lần/giây. Mỗi lần làm mới tạo ra đầu ra hình ảnh mà bạn nhìn thấy và thường được gọi là khung. Trong video sau đây, khái niệm khung được minh hoạ:
Mặc dù màn hình của thiết bị luôn làm mới theo tốc độ nhất quán, nhưng các ứng dụng khi chạy trên thiết bị không phải lúc nào cũng có thể tạo đủ số 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 phù hợp với tốc độ làm mới của thiết bị để tạo một cho mỗi lần màn hình làm mới.
Với một màn hình thông thường làm mới 60 lần mỗi giây, một số phép toán nhanh thì 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 đối với mỗi khung hình, do đó tất cả công việc của bạn cần được hoàn tất trong vòng 10 mili giây. Khi bạn không thể đáp ứng ngân sách này, tốc độ khung hình giảm và nội dung trang sẽ di chuyển trên màn hình. Chiến dịch này 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 thay đổi dựa trên loại công việc bạn đang cố gắng làm. Việc đáp ứng ngưỡng 10 mili giây là rất quan trọng đối với ảnh động, trong đó của đối tượng trên màn hình được nội suy qua một chuỗi các khung giữa . 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—đó là nên thực hiện các thay đổi đó trong khung thời gian cảm thấy tức thì người dùng. Trong những trường hợp như vậy, 100 mili giây là con số được trích dẫn nhưng mức "tốt" của chỉ số INP tối đa là 200 mili giây để phù hợp với nhiều loại thiết bị hơn với nhiều khả năng.
Cho dù mục tiêu của bạn là gì, mục tiêu của bạn có tạo ra nhiều khung hình đòi hỏi để tránh hiện tượng giật hoặc chỉ đơn thuần tạo ra sự thay đổi riêng biệt về hình ảnh giao diện người dùng nhanh nhất có thể—hiểu cách pixel của trình duyệt hoạt động của đường ống là rất quan trọng đố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 tâm trong làm việc trong vai trò nhà phát triển web. Năm lĩnh vực này là những khía cạnh mà bạn nắm được nhiều nhất và mỗi nhãn đạ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 kết quả
trong các thay đổi trực quan đối với giao diện người dùng. Ví dụ: đây có thể là
animate, sắp xếp một tập dữ liệu hoặc thêm các phần tử DOM vào trang. Tuy nhiên, JavaScript không cần thiết để kích hoạt các thay đổi về hình ảnh: CSS ảnh động, chuyển đổi CSS và API Ảnh động trên web đều có thể ảnh động nội dung trang. - Tính toán kiểu: Đây là quá trình xác định xem quy tắc CSS nào
áp dụng cho các 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 quy tắc được biết, chúng sẽ được áp dụng và kiểu cuối cùng cho mỗi mới được tính. - Bố cục: Khi đã biết được quy tắc nào áp dụng cho 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ư bao nhiêu phần tử không gian
chiếm dụng và vị trí chúng xuất hiện trên màn hình. Mô hình bố cục của web có nghĩa là
rằng 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
<body>phần tử thường ảnh hưởng đến kích thước của các phần tử con và theo dõi cây, vì vậy quá trình này có thể liên quan khá nhiều đến trình duyệt. - Sơn: Tạo điểm ảnh là quá trình tô màu nền bằng pixel. Công cụ này bao gồm thao tá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 hình ảnh khía cạ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. 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ẽ lên nhiều lớp, các lớp này 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 lên một phần tử khác vì lỗi có thể khiến một phần tử xuất hiện sai cách.
Mỗi phần này của quy trình pixel đại diện cho một cơ hội để giới thiệu hiện tượng giật trong hoạt ảnh hoặc trì hoãn việc vẽ khung hình ngay cả đối với hình ảnh rời rạc các thay đổi về 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 phần nào trong quy trình và điều tra xem bạn có thể giới hạn thay đổi của bạn chỉ ở các phần trong quy trình pixel cần thiết để hiển thị chúng.
Bạn có thể đã nghe thấy thuật ngữ "tạo đường quét" được sử dụng cùng với "sơn". Chiến dịch này là vì bức tranh thực ra là hai nhiệm vụ:
- Tạo danh sách hàm gọi vẽ.
- Điền vào pixel.
Phần 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 Công cụ cho nhà phát triển, bạn nên xem đây là cả quá trình tạo điểm ảnh. Trong một số việc tạo danh sách hàm gọi vẽ và tạo điểm ảnh được thực hiện trên luồng khác nhau, nhưng bạn không thể kiểm soát việc đó trong vai trò nhà phát triển.
Không phải lúc nào bạn cũng phải chạm vào từng 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 bình thường diễn ra cho một tình huống khi bạn thực hiện thay đổi về hình ảnh, bằng JavaScript, CSS hoặc trang Web API Ảnh động.
1. JS / CSS > Kiểu > Bố cục > Tạo điểm ảnh > Hỗn hợp
Nếu bạn thay đổi "bố cục" thuộc tính, chẳng hạn như thuộc tính thay đổi giá trị
hình học như chiều rộng, chiều cao hoặc vị trí của nó (chẳng hạn như CSS left hoặc top
thuộc tính), 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" thời gian
. Cần phải sơn lại mọi khu vực bị ảnh hưởng và sơn lần cuối
các phần tử cần được kết hợp lại với nhau.
2. JS / CSS > Kiểu > Tạo điểm ảnh > Tổng hợp
Nếu bạn đã thay đổi chế độ cài đặt "chỉ vẽ" thuộc tính của một phần tử trong CSS – ví dụ:
các thuộc tính như background-image, color hoặc box-shadow – bước bố cục
bạn không cần cam kết cập nhật trực quan trang. Bằng cách bỏ qua bố cục
bước (nếu có thể) – bạn tránh được công việc bố cục tốn kém có thể có
nếu không đã góp phần gây ra độ trễ đáng kể trong việc tạo ra khung hình tiếp theo.
3. JS / CSS > Kiểu > Tổng hợp
Nếu bạn thay đổi một thuộc tính mà không yêu cầu bố cục hoặc tô màu, thì trình duyệt có thể chuyển thẳng đến bước tổng hợp. Đây là chuyến bay rẻ nhất và phổ biến nhất đường dẫn phù hợp qua đường ống pixel đến các điểm áp suất cao trong vòng đời của trang, chẳng hạn như hoạt ảnh hoặc cuộn. Thông tin thú vị: Chromium tối ưu hoá cuộn trang để trang chỉ diễn ra trên chuỗi trình tổng hợp nơi có thể xảy ra, nghĩa 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 vẽ lên màn hình trước đó.
Hiệu suất web là nghệ thuật tránh công việc, đồng thời tăng hiệu quả mọi công việc cần thiết nhiều nhất có thể. Trong nhiều trường hợp, đó là vấn đề về hợp tác với trình duyệt chứ không phải chống lại nó. 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ố nhiệm vụ vốn tốn kém hơn những nhiệm vụ 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 chúng.
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 và để tạo 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 tương tác của người dùng và hiển thị suôn sẻ. 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 tạo ra các ứng dụng web duy trì hiệu suất 60 khung hình/giây. Bạn sẽ rời đi hãy tham gia khoá học này để biết các công cụ cần thiết để phân tích tài nguyên cho ứng dụng và xác định nguyên nhân dẫn đến lỗi hiệu suất kết xuất ở dưới mức tối ưu. Bạn cũng sẽ khám phá khả năng kết xuất của trình duyệt và phát hiện ra các mẫu hình giúp dễ dàng xây dựng các trang web nhanh 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. Bạn có thể tham gia bất cứ lúc nào.