Hướng dẫn which css property will trigger layout recalculation - thuộc tính css nào sẽ kích hoạt tính toán lại bố cục
Những gì lực lượng bố trí/reflow. Danh sách toàn diện. Show
Tất cả các thuộc tính hoặc phương thức dưới đây, khi được yêu cầu/gọi trong JavaScript, sẽ kích hoạt trình duyệt để tính toán đồng bộ kiểu và bố cục*. Điều này cũng được gọi là phản xạ hoặc bố cục đập, và là nút cổ chai hiệu suất phổ biến. Nói chung, tất cả các API cung cấp đồng bộ các số liệu bố trí sẽ kích hoạt phản xạ / bố cục bắt buộc. Đọc về các trường hợp và chi tiết bổ sung. API phần tửNhận số liệu hộp
Cuộn công cụ
Đặt trọng tâm
Cũng thế…
Nhận kích thước cửa sổ
tài liệu
Biểu mẫu: Cài đặt lựa chọn + tiêu điểm
Sự kiện chuột: Đọc dữ liệu bù
Gọi getComputedStyle ()
Nhận kích thước elem.clientHeight7
SVGKhá nhiều thuộc tính/phương thức lực lượng, nhưng tôi đã không lập một danh sách đầy đủ. Danh sách này không đầy đủ:
Sử dụng "liên kết cây nguồn crom" bên dưới để tự mình khám phá! hài lòng
* Ruột thừa
Cross-browser
Thêm về bố cục bắt buộc
Cập nhật một chút vào tháng 4 năm 2020. Liên kết CodeSearch và một vài thay đổi đối với các thuộc tính phần tử có liên quan. Điều gì gây ra sự tính toán lại phong cách?Thay đổi DOM, thông qua việc thêm và loại bỏ các phần tử, thay đổi thuộc tính, lớp hoặc thông qua hoạt hình, đều sẽ khiến trình duyệt tính toán lại các kiểu phần tử và, trong nhiều trường hợp, bố cục (hoặc refl) trang hoặc các phần của nó. Quá trình này được gọi là tính toán phong cách tính toán., will all cause the browser to recalculate element styles and, in many cases, layout (or reflow) the page, or parts of it. This process is called computed style calculation.
Điều gì kích hoạt một phản xạ?Thay đổi kích thước cửa sổ trình duyệt, sử dụng các phương thức JavaScript liên quan đến các kiểu được tính toán, thêm hoặc loại bỏ các phần tử khỏi DOM và thay đổi các lớp của một phần tử là một vài trong số những thứ có thể kích hoạt Refle. are a few of the things that can trigger reflow.
Điều gì kích hoạt một bản sơn lại?Một bản sơn lại xảy ra khi các thay đổi được thực hiện đối với một yếu tố da thay đổi rõ ràng, nhưng không ảnh hưởng đến bố cục của nó.Ví dụ về điều này bao gồm phác thảo, khả năng hiển thị, nền hoặc màu sắc.changes are made to an elements skin that changes visibly, but do not affect its layout. Examples of this include outline , visibility , background , or color .
Điều gì gây ra sự kết hợp bố trí?Bố cục đập vỡ xảy ra khi chúng tôi thực hiện một loạt các lần đọc và ghi liên tiếp vào DOM, trong quá trình không cho phép trình duyệt thực hiện tối ưu hóa bố cục.Thay đổi các thuộc tính của một phần tử hoặc sửa đổi nội dung của nó không chỉ ảnh hưởng đến yếu tố đó;Thay vào đó, nó có thể gây ra một loạt các thay đổi.when we perform a series of consecutive reads and writes to DOM, in the process not allowing the browser to perform layout optimizations. Changing attributes of one element or modifying its content doesn't affect only that element; instead, it can cause a cascade of changes. |