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