Trang này được dịch bởi Cloud Translation API.

Gỡ lỗi thay đổi bố cục

Tìm hiểu cách xác định và khắc phục việc thay đổi bố cục.

Katie Hempenius

Phần đầu tiên của bài viết này thảo luận về công cụ gỡ lỗi thay đổi bố cục, còn phần thứ hai thảo luận về quy trình tư duy cần sử dụng khi xác định nguyên nhân gây ra thay đổi bố cục.

Công cụ

API về sự không ổn định của bố cục

Layout Instability API là cơ chế trình duyệt để đo lường và báo cáo sự thay đổi bố cục. Tất cả các công cụ để gỡ lỗi thay đổi bố cục, bao gồm cả DevTools, đều được xây dựng dựa trên API Không ổn định của bố cục. Tuy nhiên, việc sử dụng trực tiếp API Không ổn định của bố cục là một công cụ gỡ lỗi mạnh mẽ nhờ tính linh hoạt.

Cách sử dụng

Cùng một đoạn mã đo lường Điểm số tổng hợp về mức thay đổi bố cục (CLS) cũng có thể dùng để gỡ lỗi các thay đổi bố cục. Đoạn mã dưới đây ghi lại thông tin về các thay đổi bố cục vào bảng điều khiển. Việc kiểm tra nhật ký này sẽ cung cấp cho bạn thông tin về thời điểm, vị trí và cách thức xảy ra sự thay đổi bố cục.

let cls = 0;
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

Khi chạy tập lệnh này, hãy lưu ý rằng:

Tuỳ chọn buffered: true cho biết rằng PerformanceObserver sẽ kiểm tra vùng đệm mục nhập hiệu suất của trình duyệt để tìm các mục nhập hiệu suất được tạo trước khi khởi chạy trình quan sát. Do đó, PerformanceObserver sẽ báo cáo các thay đổi về bố cục xảy ra cả trước và sau khi khởi chạy. Lưu trữ trong khi kiểm tra nhật ký bảng điều khiển. Sự cố chuyển đổi bố cục ban đầu có thể phản ánh một báo cáo tồn đọng, thay vì sự xuất hiện đột ngột của nhiều thay đổi bố cục.
Để tránh ảnh hưởng đến hiệu suất, PerformanceObserver sẽ đợi đến khi luồng không hoạt động để báo cáo về việc thay đổi bố cục. Do đó, tuỳ thuộc vào mức độ bận rộn của luồng chính, có thể có độ trễ nhỏ giữa thời điểm thay đổi bố cục và thời điểm ghi lại thay đổi đó trong bảng điều khiển.
Tập lệnh này bỏ qua các thay đổi về bố cục xảy ra trong vòng 500 mili giây từ hoạt động đầu vào của người dùng nên không được tính vào CLS.

Thông tin về việc thay đổi bố cục được báo cáo bằng cách sử dụng kết hợp 2 API: LayoutShift và LayoutShiftAttribution giao diện. Mỗi giao diện này được giải thích chi tiết hơn trong các phần sau.

LayoutShift

Mỗi lần thay đổi bố cục được báo cáo bằng giao diện LayoutShift. Nội dung của một mục nhập có dạng như sau:

duration: 0
entryType: "layout-shift"
hadRecentInput: false
lastInputTime: 0
name: ""
sources: (3) [LayoutShiftAttribution, LayoutShiftAttribution, LayoutShiftAttribution]
startTime: 11317.934999999125
value: 0.17508567530168798

Mục ở trên cho biết một sự thay đổi bố cục trong đó 3 phần tử DOM đã thay đổi vị trí. Điểm số về mức thay đổi bố cục của lần thay đổi bố cục cụ thể này là 0.175.

Đây là các thuộc tính của thực thể LayoutShift có liên quan nhất đến gỡ lỗi thay đổi bố cục:

Thuộc tính	Mô tả
`sources`	Thuộc tính `sources` liệt kê các phần tử DOM đã di chuyển trong quá trình thay đổi bố cục. Mảng này có thể chứa tối đa 5 nguồn. Trong trường hợp có nhiều hơn 5 phần tử chịu ảnh hưởng của việc thay đổi bố cục, thì 5 nguồn thay đổi bố cục lớn nhất (được đo lường theo mức tác động đến độ ổn định của bố cục) sẽ được báo cáo. Thông tin này được báo cáo bằng cách sử dụng giao diện LayoutShiftAttribution (được giải thích chi tiết hơn ở bên dưới).
`value`	Thuộc tính `value` báo cáo điểm thay đổi bố cục cho một lần thay đổi bố cục cụ thể.
`hadRecentInput`	Thuộc tính `hadRecentInput` cho biết liệu có sự thay đổi bố cục nào xảy ra trong vòng 500 mili giây kể từ khi người dùng nhập hay không.
`startTime`	Thuộc tính `startTime` cho biết thời điểm xảy ra sự thay đổi bố cục. `startTime` được biểu thị bằng mili giây và được đo lường tương ứng với thời điểm bắt đầu tải trang.
`duration`	Thuộc tính `duration` sẽ luôn được đặt thành `0`. Thuộc tính này được kế thừa từ giao diện `PerformanceEntry` (giao diện `LayoutShift` mở rộng giao diện `PerformanceEntry`). Tuy nhiên, khái niệm về thời lượng không áp dụng cho các sự kiện thay đổi bố cục, vì vậy, thời lượng được đặt thành `0`. Để biết thông tin về giao diện `PerformanceEntry`, hãy tham khảo quy cách.

LayoutShiftAttribution

Giao diện LayoutShiftAttribution mô tả một thao tác chuyển của một DOM . Nếu nhiều phần tử thay đổi trong một lần thay đổi bố cục, sources thuộc tính chứa nhiều mục nhập.

Ví dụ: JSON dưới đây tương ứng với sự thay đổi bố cục với một nguồn: dịch chuyển xuống của phần tử DOM <div id='banner'> từ y: 76 sang y:246.

// ...
  "sources": [
    {
      "node": "div#banner",
      "previousRect": {
        "x": 311,
        "y": 76,
        "width": 4,
        "height": 18,
        "top": 76,
        "right": 315,
        "bottom": 94,
        "left": 311
      },
      "currentRect": {
        "x": 311,
        "y": 246,
        "width": 4,
        "height": 18,
        "top": 246,
        "right": 315,
        "bottom": 264,
        "left": 311
      }
    }
  ]

Thuộc tính node xác định phần tử HTML đã thay đổi. Di chuột lên mục này trong Công cụ cho nhà phát triển sẽ làm nổi bật phần tử trang tương ứng.

Các thuộc tính previousRect và currentRect báo cáo kích thước và vị trí của nút.

Toạ độ x và y báo cáo toạ độ x và toạ độ y tương ứng với góc trên cùng bên trái của phần tử
Thuộc tính width và height báo cáo chiều rộng và chiều cao tương ứng của phần tử.
Các thuộc tính top, right, bottom và left báo cáo x hoặc y các giá trị toạ độ tương ứng với cạnh đã cho của phần tử. Nói cách khác, giá trị của top bằng y; giá trị của bottom bằng y+height.

Nếu tất cả các thuộc tính của previousRect đều được đặt thành 0, thì điều này có nghĩa là phần tử đó có chuyển vào khung hiển thị. Nếu tất cả các thuộc tính của currentRect đều được đặt thành 0, thì điều này có nghĩa là phần tử đã dịch chuyển ra khỏi khung hiển thị.

Thận trọng: API về sự không ổn định của bố cục hiện không bỏ qua các phần tử đã dịch chuyển nhưng không hiển thị do một phần tử khác được đặt ở phía trước các phần tử đó. Hãy sử dụng display: none, visibility: hidden hoặc opacity: 0 để tránh thay đổi bố cục trong trường hợp bạn cần chạy bố cục trên một số phần tử trước khi hiển thị các phần tử đó cho người dùng.

Một trong những điều quan trọng nhất cần hiểu khi diễn giải các kết quả này là các phần tử được liệt kê là nguồn là các phần tử đã thay đổi trong quá trình thay đổi bố cục. Tuy nhiên, có thể những thành phần này chỉ mang tính gián tiếp có liên quan đến "nguyên nhân gốc" về tính bất ổn định của bố cục. Sau đây là một vài ví dụ.

Ví dụ #1

Thay đổi bố cục này sẽ được báo cáo bằng một nguồn: phần tử B. Tuy nhiên, nguyên nhân gốc rễ của sự thay đổi bố cục này là do kích thước của phần tử A thay đổi.

Ví dụ cho thấy sự thay đổi bố cục do thay đổi về kích thước phần tử

Ví dụ 2

Thay đổi bố cục trong ví dụ này sẽ được báo cáo bằng 2 nguồn: phần tử A và phần tử B. Nguyên nhân gốc rễ của sự thay đổi bố cục này là do thay đổi vị trí của phần tử A.

Ví dụ minh hoạ sự thay đổi bố cục do thay đổi vị trí phần tử

Ví dụ #3

Thay đổi bố cục trong ví dụ này sẽ được báo cáo bằng một nguồn: phần tử B. Việc thay đổi vị trí của phần tử B đã dẫn đến sự thay đổi bố cục này.

Ví dụ minh hoạ sự thay đổi bố cục do thay đổi vị trí phần tử

Ví dụ #4

Mặc dù phần tử B thay đổi kích thước, nhưng không có sự thay đổi bố cục nào trong ví dụ này.

Ví dụ về một phần tử thay đổi kích thước nhưng không gây ra sự thay đổi bố cục

Kiểm tra bản minh hoạ cách các thay đổi của DOM được API Không ổn định bố cục báo cáo.

Công cụ cho nhà phát triển

Bảng điều khiển hiệu suất

Ngăn Experience (Trải nghiệm) của bảng điều khiển Performance (Hiệu suất) trong DevTools hiển thị tất cả các thay đổi bố cục xảy ra trong một dấu vết hiệu suất nhất định, ngay cả khi các thay đổi đó xảy ra trong vòng 500 mili giây sau một lượt tương tác của người dùng và do đó không được tính vào CLS. Khi bạn di chuột qua một thay đổi bố cục cụ thể trong bảng điều khiển Trải nghiệm, phần tử DOM chịu ảnh hưởng sẽ được làm nổi bật.

Ảnh chụp màn hình về sự thay đổi bố cục hiển thị trong bảng điều khiển Mạng của DevTools

Để xem thêm thông tin về sự thay đổi bố cục, hãy nhấp vào sự thay đổi bố cục đó, sau đó mở ngăn Summary (Tóm tắt). Liệt kê các thay đổi đối với phương diện của phần tử sử dụng định dạng [width, height]; thay đổi đối với vị trí của phần tử được liệt kê bằng cách sử dụng định dạng [x,y]. Thuộc tính Đã nhập gần đây cho biết liệu một Sự thay đổi bố cục xảy ra trong vòng 500 mili giây kể từ một lượt tương tác của người dùng.

Ảnh chụp màn hình "Tóm tắt" Công cụ cho nhà phát triển nhấn phím tab để thay đổi bố cục

Để biết thông tin về thời lượng của một lượt chuyển đổi bố cục, hãy mở thẻ Nhật ký sự kiện. Thời lượng thay đổi bố cục cũng có thể ước chừng bằng cách xem Ngăn Trải nghiệm cho độ dài của hình chữ nhật chuyển bố cục màu đỏ.

Ảnh chụp màn hình thẻ "Nhật ký sự kiện" của DevTools cho một sự thay đổi bố cục

Để biết thêm thông tin về cách sử dụng bảng điều khiển Hiệu suất, hãy tham khảo Tài liệu tham khảo về phân tích hiệu suất.

Làm nổi bật khu vực thay đổi bố cục

Việc làm nổi bật các khu vực có thay đổi về bố cục có thể là một kỹ thuật hữu ích để nhanh chóng nắm bắt vị trí và thời điểm xảy ra các thay đổi về bố cục trên một trang.

Để bật tính năng Khu vực chuyển bố cục trong Công cụ cho nhà phát triển, hãy chuyển đến phần Cài đặt > Công cụ khác > Kết xuất > Khu vực thay đổi bố cục sau đó làm mới trang mà bạn muốn gỡ lỗi. Các khu vực có thay đổi về bố cục sẽ được đánh dấu nhanh bằng màu tím.

Quá trình tư duy để xác định nguyên nhân dẫn đến sự thay đổi bố cục

Bạn có thể làm theo các bước dưới đây để xác định nguyên nhân gây ra sự thay đổi bố cục bất kể thời điểm hoặc cách thức thay đổi bố cục. Bạn có thể bổ sung các bước này bằng cách chạy Lighthouse. Tuy nhiên, hãy lưu ý rằng Lighthouse chỉ có thể xác định các thay đổi bố cục xảy ra trong lần tải trang đầu tiên. Ngang bằng Ngoài ra, Lighthouse cũng chỉ có thể đưa ra đề xuất cho một số nguyên nhân về bố cục chuyển đổi—ví dụ: các phần tử hình ảnh không có chiều rộng và chiều cao rõ ràng.

Xác định nguyên nhân gây ra sự thay đổi bố cục

Các sự kiện sau có thể gây ra sự thay đổi bố cục:

Thay đổi đối với vị trí của phần tử DOM
Thay đổi kích thước của một phần tử DOM
Chèn hoặc xoá phần tử DOM
Ảnh động kích hoạt bố cục

Cụ thể, phần tử DOM ngay trước phần tử được dịch chuyển là phần tử yếu tố có nhiều khả năng tham gia vào việc "gây ra" nhất thay đổi bố cục. Do đó, khi tìm hiểu lý do xảy ra sự thay đổi bố cục, hãy xem xét:

Vị trí hoặc kích thước của phần tử trước đó có thay đổi không?
Phần tử DOM có được chèn hoặc xoá trước phần tử bị dịch chuyển không?
Vị trí của phần tử đã di chuyển có thay đổi rõ ràng không?

Nếu phần tử trước đó không gây ra sự thay đổi bố cục, hãy tiếp tục tìm kiếm bằng cách cân nhắc các phần tử trước đó và các phần tử lân cận khác.

Ngoài ra, hướng và khoảng cách của việc thay đổi bố cục có thể đưa ra gợi ý về căn nguyên. Ví dụ: sự dịch chuyển đi xuống lớn thường biểu thị chèn phần tử DOM, trong khi sự thay đổi bố cục 1 px hoặc 2 px thường biểu thị việc áp dụng các kiểu CSS xung đột hoặc việc tải và áp dụng một phông chữ trên web.

Biểu đồ thể hiện sự thay đổi bố cục do hoán đổi phông chữ — Trong ví dụ này, việc hoán đổi phông chữ đã khiến các phần tử trên trang dịch chuyển lên trên 5 pixel.

Sau đây là một số hành vi cụ thể thường xuyên gây ra sự kiện thay đổi bố cục:

Thay đổi vị trí của một phần tử (không phải do chuyển động của một phần tử khác)

Loại thay đổi này thường là do:

Các trang kiểu được tải muộn hoặc ghi đè các kiểu đã khai báo trước đó.
Hiệu ứng ảnh động và hiệu ứng chuyển tiếp.

Thay đổi kích thước của một phần tử

Loại thay đổi này thường là do:

Biểu định kiểu được tải muộn hoặc ghi đè các kiểu đã khai báo trước đó.
Hình ảnh và iframe không có thuộc tính width và height sẽ tải sau khi "khe" của chúng được hiển thị.
Khối văn bản không có thuộc tính width hoặc height mà hoán đổi phông chữ sau đã được hiển thị văn bản.

Chèn hoặc xoá các phần tử DOM

Điều này thường là do:

Chèn quảng cáo và nội dung nhúng khác của bên thứ ba.
Chèn biểu ngữ, cảnh báo và phương thức.
Cuộn vô hạn và các mẫu trải nghiệm người dùng khác tải nội dung bổ sung lên trên nội dung hiện có.

Ảnh động kích hoạt bố cục

Một số hiệu ứng ảnh động có thể kích hoạt . Điểm chung ví dụ về điều này là khi các phần tử DOM có dạng "hình động" bằng cách tăng thuộc tính như top hoặc left thay vì sử dụng CSS transform thuộc tính này. Đọc Cách tạo ảnh động CSS hiệu suất cao để biết thêm thông tin.

Tái tạo các thay đổi về bố cục

Bạn không thể sửa những thay đổi về bố cục mà bạn không thể tái tạo. Một trong những cách đơn giản nhất những việc hiệu quả nhất bạn có thể làm để hiểu rõ hơn về bố cục trang web của mình độ ổn định là mất 5-10 phút để tương tác với trang web của bạn với mục tiêu kích hoạt thay đổi bố cục. Luôn mở bảng điều khiển trong khi thực hiện việc này và sử dụng API Bố cục không ổn định để báo cáo về việc thay đổi bố cục.

Đối với những thay đổi về bố cục khó xác định, hãy cân nhắc lặp lại bài tập này với thiết bị và tốc độ kết nối khác nhau. Cụ thể, việc sử dụng tốc độ kết nối chậm hơn có thể giúp bạn dễ dàng xác định các thay đổi về bố cục. Ngoài ra, bạn có thể dùng câu lệnh debugger để thao tác với bố cục dễ dàng hơn ca.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      debugger;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

Cuối cùng, đối với các vấn đề về bố cục không thể tái tạo trong quá trình phát triển, hãy cân nhắc dùng Layout Instability API cùng với công cụ ghi nhật ký giao diện người dùng của bạn lựa chọn để thu thập thêm thông tin về các vấn đề này. Hãy xem mã ví dụ về cách theo dõi phần tử bị dịch chuyển lớn nhất trên một trang.