Chế độ vẽ liên tục để lập hồ sơ vẽ hiện đã có trong Chrome Canary. Bài viết này giải thích cách xác định vấn đề về thời gian vẽ trang và cách sử dụng công cụ mới này để phát hiện nút thắt cổ chai trong hiệu suất vẽ.
Điều tra thời gian vẽ trên trang
Vì vậy, bạn nhận thấy rằng trang của mình không cuộn mượt mà. Đây là cách bạn sẽ bắt đầu giải quyết vấn đề. Trong ví dụ này, chúng ta sẽ sử dụng trang minh hoạ Things We Left On The Moon (Những thứ chúng ta để lại trên mặt trăng) của Dan Cederholm.
Bạn mở Web Inspector, bắt đầu ghi Dòng thời gian và cuộn trang lên xuống. Sau đó, bạn sẽ xem các dòng thời gian dọc cho biết những gì đã xảy ra trong từng khung hình.
Nếu thấy hầu hết thời gian đều dành cho việc vẽ (các thanh màu xanh lục lớn trên 60 khung hình/giây), bạn cần xem xét kỹ hơn lý do xảy ra điều này. Để kiểm tra các lớp phủ, hãy sử dụng chế độ cài đặt Show paint rectangles (Hiện hình chữ nhật sơn) của Trình kiểm tra web (biểu tượng bánh răng ở góc dưới bên phải của Trình kiểm tra web). Thao tác này sẽ cho bạn thấy các khu vực mà Chrome vẽ.
Có nhiều lý do khiến Chrome vẽ lại các khu vực trên trang:
- Các nút DOM được thay đổi trong JavaScript, khiến Chrome phải tính toán lại bố cục của trang.
- Ảnh động đang phát và được cập nhật theo chu kỳ dựa trên khung hình.
- Hoạt động tương tác của người dùng, chẳng hạn như di chuột, sẽ khiến kiểu thay đổi trên một số phần tử nhất định.
- Mọi thao tác khác khiến bố cục trang thay đổi.
Là nhà phát triển, bạn cần lưu ý đến các lần vẽ lại xảy ra trên trang.
Một cách hay để làm việc đó là xem các hình chữ nhật vẽ. Trong ảnh chụp màn hình ví dụ ở trên, bạn có thể thấy toàn bộ màn hình được phủ một hình chữ nhật lớn được vẽ bằng màu. Điều này có nghĩa là toàn bộ màn hình sẽ được vẽ lại khi bạn cuộn, điều này là không tốt. Trong trường hợp cụ thể này, lỗi này là do kiểu CSS background-attachment:fixed gây ra, khiến hình nền của trang giữ nguyên vị trí trong khi nội dung của trang di chuyển lên trên khi bạn cuộn.
Nếu xác định rằng việc sơn lại sẽ diễn ra trên một khu vực rộng lớn và/hoặc mất nhiều thời gian, bạn có hai lựa chọn:
- Bạn có thể thử thay đổi bố cục trang để giảm lượng vẽ. Nếu có thể, Chrome chỉ vẽ trang hiển thị một lần và thêm các phần chưa hiển thị khi bạn cuộn xuống. Tuy nhiên, có một số trường hợp Chrome cần vẽ lại một số khu vực nhất định. Ví dụ: quy tắc CSS
position:fixedthường được dùng cho các thành phần điều hướng ở cùng một vị trí có thể gây ra các lần vẽ lại này. - Nếu muốn giữ nguyên bố cục trang, bạn có thể thử giảm chi phí vẽ lại của các khu vực được vẽ lại. Không phải kiểu CSS nào cũng có cùng chi phí vẽ, một số kiểu có tác động ít, một số kiểu có tác động nhiều. Việc tính toán chi phí sơn của một số kiểu nhất định có thể mất nhiều công sức. Bạn có thể làm việc này bằng cách bật/tắt các kiểu trong bảng điều khiển Phần tử và xem sự khác biệt trong bản ghi Dòng thời gian, tức là chuyển đổi giữa các bảng điều khiển và thực hiện nhiều bản ghi. Đây là lúc chế độ vẽ liên tục phát huy tác dụng.
Chế độ vẽ liên tục
Chế độ vẽ liên tục là một công cụ giúp bạn xác định những phần tử tốn kém trên trang. Phương thức này đặt trang vào trạng thái luôn vẽ lại, cho thấy bộ đếm số lượng công việc vẽ đang diễn ra. Sau đó, bạn có thể ẩn các phần tử và thay đổi kiểu, theo dõi bộ đếm để tìm hiểu xem phần tử nào đang bị chậm.
Thiết lập
Để sử dụng chế độ vẽ liên tục, bạn cần sử dụng Chrome Canary.
Trên các hệ thống Linux (và một số máy Mac), bạn cần đảm bảo rằng Chrome chạy ở chế độ kết hợp. Bạn có thể bật tính năng này vĩnh viễn bằng cách sử dụng chế độ cài đặt GPU tổng hợp trên tất cả các trang trong about:flags.
Cách bắt đầu
Bạn có thể bật Chế độ vẽ liên tục thông qua hộp đánh dấu Bật tính năng vẽ lại liên tục trang trong phần cài đặt của Trình kiểm tra web (biểu tượng bánh răng ở góc dưới cùng bên phải của Trình kiểm tra web).
Màn hình nhỏ ở góc trên cùng bên phải cho bạn biết thời gian vẽ được đo bằng mili giây. Cụ thể, thẻ này cho biết:
- Thời gian vẽ được đo lường gần đây nhất ở bên trái.
- Giá trị tối thiểu và tối đa của biểu đồ hiện tại ở bên phải.
- Biểu đồ thanh hiển thị nhật ký của 80 khung hình gần đây nhất ở dưới cùng (đường trong biểu đồ cho biết 16 mili giây là điểm tham chiếu).
Các phép đo thời gian vẽ phụ thuộc vào độ phân giải màn hình, kích thước cửa sổ và phần cứng mà Chrome đang chạy. Xin lưu ý rằng những điều này có thể khác với người dùng của bạn.
Luồng công việc
Dưới đây là cách bạn có thể sử dụng chế độ vẽ liên tục để theo dõi các thành phần và kiểu làm tăng nhiều chi phí vẽ:
- Mở phần cài đặt của Web Inspector rồi đánh dấu vào Bật tính năng vẽ lại liên tục trang.
- Chuyển đến bảng điều khiển Phần tử và di chuyển qua cây DOM bằng các phím mũi tên hoặc bằng cách chọn các phần tử trên trang.
- Sử dụng phím tắt H, một trình trợ giúp mới được giới thiệu, để bật/tắt chế độ hiển thị trên một phần tử.
- Hãy xem biểu đồ thời gian vẽ và cố gắng phát hiện một phần tử làm tăng nhiều thời gian vẽ.
- Xem qua các kiểu CSS của phần tử đó, bật và tắt các kiểu đó trong khi xem biểu đồ để tìm kiểu gây ra tình trạng chậm.
- Thay đổi kiểu này và ghi lại Dòng thời gian khác để kiểm tra xem việc này có giúp trang của bạn hoạt động hiệu quả hơn hay không.
Ảnh động bên dưới cho thấy cách bật/tắt các kiểu và ảnh hưởng của việc này đến thời gian vẽ:
Ví dụ này minh hoạ cách tắt một trong các kiểu CSS box-shadow hoặc border-radius, giúp giảm đáng kể thời gian vẽ. Việc sử dụng cả box-shadow và border-radius trên một phần tử sẽ dẫn đến các thao tác vẽ rất tốn kém, vì Chrome không thể tối ưu hoá cho việc này. Vì vậy, nếu có một phần tử được vẽ lại nhiều lần, như trong ví dụ, bạn nên tránh kết hợp này.
Ghi chú
Chế độ vẽ liên tục vẽ lại toàn bộ trang hiển thị. Điều này thường không xảy ra khi duyệt xem một trang web. Thao tác cuộn thường chỉ vẽ những phần chưa hiển thị trước đó. Còn đối với các thay đổi khác trên trang, chỉ vùng nhỏ nhất có thể được vẽ lại. Vì vậy, hãy kiểm tra bằng một bản ghi Dòng thời gian khác để xem liệu các điểm cải tiến về kiểu của bạn có thực sự tác động đến thời gian vẽ của trang hay không.
Khi sử dụng continuous painting mode, bạn có thể phát hiện ra rằng chẳng hạn như các kiểu CSS border-radius và box-shadow làm tăng thêm nhiều thời gian vẽ. Nhìn chung, bạn không nên ngừng sử dụng các tính năng đó. Chúng rất tuyệt vời và chúng tôi rất vui khi cuối cùng chúng đã có mặt. Tuy nhiên, điều quan trọng là bạn phải biết thời điểm và địa điểm sử dụng các tính năng này.
Tránh sử dụng các lớp phủ này ở những khu vực có nhiều lần sơn lại và nói chung, tránh sử dụng quá nhiều các lớp phủ này.
Bản minh hoạ trực tiếp
Nhấp vào bên dưới để xem bản minh hoạ trong đó Paul Irish sử dụng tính năng vẽ liên tục để xác định một thao tác vẽ tốn kém.