Chế độ tô 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 bạn xác định vấn đề về thời gian vẽ trang và cách bạn có thể sử dụng công cụ mới này để phát hiện điểm tắc nghẽn trong hiệu suất vẽ.
Kiểm tra thời gian tô màu trên trang của bạn
Bạn nhận thấy rằng trang của mình cuộn không 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ẽ lấy trang minh hoạ Những điều chúng ta đã bỏ lại trên mặt trăng của Dan Cederholm làm ví dụ.
Bạn mở Trình kiểm tra web, bắt đầu ghi Dòng thời gian và cuộn trang của bạn lên và xuống. Sau đó, bạn xem các dòng thời gian dọc để biết điều gì đã xảy ra trong từng khung hình.
Nếu thấy phần lớn thời gian được dành để vẽ (các thanh màu xanh lục lớn trên 60 khung hình/giây), thì bạn cần xem xét kỹ hơn nguyên nhân gây ra vấn đề này. Để điều tra nội dung vẽ của bạn, hãy sử dụng chế độ cài đặt Hiển thị hình chữ nhật vẽ 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). Thao tác này sẽ cho bạn biết các khu vực mà Chrome hiển thị.
Có nhiều lý do khác nhau để Chrome vẽ lại các vùng của trang:
- Các nút DOM bị thay đổi trong JavaScript, điều này khiến Chrome tính toán lại bố cục của trang.
- Ảnh động đang phát được cập nhật theo chu kỳ dựa trên khung.
- Sự tương tác của người dùng, chẳng hạn như di chuột, gây ra thay đổi về kiểu trên một số thành phần 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 ý về các hoạt động vẽ lại đang diễn ra trên trang của mình.
Xem các hình chữ nhật sơn là một cách hay để làm việc đó. Trong ảnh chụp màn hình của ví dụ ở trên, bạn có thể thấy toàn bộ màn hình được bao phủ trong một hình chữ nhật sơn lớn. Điều này có nghĩa là toàn bộ màn hình sẽ được tô lại khi bạn cuộn – điều này không tốt. Trong trường hợp cụ thể này, nguyên nhân là do kiểu CSS background-attachment:fixed khiến hình nền của trang ở cùng một vị trí trong khi nội dung của trang di chuyển trên đầu trang khi bạn cuộn.
Nếu nhận thấy lớp vẽ lại bao phủ một khu vực lớn và/hoặc mất nhiều thời gian, bạn có 2 lựa chọn:
- Bạn có thể thử thay đổi bố cục trang để giảm số lượng hình vẽ. Nếu có thể, Chrome chỉ hiển thị trang hiển thị một lần và thêm các phần không hiển thị khi bạn cuộn xuống. Tuy nhiên, có những trường hợp Chrome cần vẽ lại một số khu vực. Ví dụ như quy tắc CSS
position:fixed, thường được sử dụng cho các phần tử điều hướng vẫn ở nguyên vị trí, có thể gây ra những lần vẽ lại này. - Nếu muốn giữ nguyên bố cục trang, bạn có thể tìm cách giảm chi phí sơn ở những khu vực được sơn lại. Không phải mọi kiểu CSS đều có chi phí sơn như nhau, một số thì có ảnh hưởng ít, còn những kiểu khác thì rất nhiều. Việc tính toán chi phí sơn theo một số kiểu nhất định có thể tốn rấ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 xét điểm khác biệt trong bản ghi Dòng thời gian, tức là bạn có thể chuyển đổi giữa các bảng điều khiển và tạo 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 thành phần gây tốn kém trên trang. Công cụ này chuyển trang sang trạng thái luôn tô màu lại, cho thấy bộ đếm số lượng công việc tô màu đang diễn ra. Sau đó, bạn có thể ẩn các phần tử và kiểu thay đổi bằng cách xem bộ đếm để xác định tốc độ chậm.
Thiết lập
Để sử dụng chế độ tô màu liên tục, bạn cần sử dụng Chrome Canary.
Trên 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 vĩnh viễn tính năng này bằng cách sử dụng chế độ cài đặt kết hợp GPU 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 trang liên tục trong phần cài đặt của Công cụ kiểm tra web (biểu tượng bánh răng ở góc dưới cùng bên phải của Công cụ 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ẽ đo được tính bằng mili giây. Cụ thể hơn, công cụ này cho biết:
- Thời gian vẽ gần đây nhất được đo ở bên trái.
- Giá trị nhỏ nhất và tối đa của biểu đồ hiện tại ở bên phải.
- Một biểu đồ thanh cho thấy nhật ký của 80 khung hình gần nhất ở dưới cùng (dòng trong biểu đồ cho biết 16 mili giây là một điểm tham chiếu).
Số đ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. Hãy lưu ý rằng những điều này có thể khác nhau đối với người dùng.
Quy trình làm việc
Sau đây là cách bạn có thể sử dụng chế độ vẽ liên tục để theo dõi các yếu tố và kiểu làm tăng đáng kể chi phí sơn:
- Mở cài đặt của Trình kiểm tra web và chọn Bật tính năng vẽ lại trang liên tục.
- 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.
- Dùng phím tắt H (một trình trợ giúp mới ra mắt) để bật/tắt chế độ hiển thị trên một phần tử.
- Xem biểu đồ thời gian sơn và cố gắng phát hiện yếu tố làm tăng thêm nhiều thời gian tô màu.
- Xem qua các kiểu CSS của phần tử đó, bật và tắt chúng trong khi xem biểu đồ để tìm kiểu làm chậm tốc độ.
- Hãy thay đổi kiểu này và ghi lại Dòng thời gian khác để kiểm tra xem liệu điều này có giúp trang của bạn hoạt động hiệu quả hơn hay không.
Ảnh động dưới đây cho thấy các kiểu bật/tắt và ảnh hưởng của nó đến thời gian hiển thị:
Ví dụ này minh hoạ việc tắt một trong các kiểu CSS box-shadow hoặc border-radius làm 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 tô màu 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 một phần tử của bạn đượ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ị. Trường hợp này thường không xảy ra khi duyệt một trang web. Thao tác cuộn thường chỉ vẽ các phần chưa từng nhìn thấy trước đây. Đối với các thay đổi khác trên trang, chỉ có khu vực 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 những điểm cải tiến về kiểu của bạn thực sự có tác động đến thời gian hiển thị của trang hay không.
Khi sử dụng continuous painting mode, bạn có thể nhận thấy điều đó, chẳng hạn như kiểu CSS border-radius và box-shadow sẽ tốn nhiều thời gian tô màu. Nhìn chung, bạn không nên sử dụng các tính năng đó, chúng thật tuyệt vời và chúng tôi rất vui vì cuối cùng chúng cũng đã có mặt. Nhưng điều quan trọng là phải biết sử dụng chúng khi nào và ở đâu.
Tránh sử dụng các biểu tượng này ở những khu vực có nhiều màu vẽ lại và tránh sử dụng sai cách nói chung.
Bản minh hoạ trực tiếp
Hãy nhấp vào phần bên dưới để xem bản minh hoạ, trong đó Paul Ireland sử dụng thao tác vẽ liên tục nhằm xác định một công đoạn sơn độc đáo và đắt tiền.