z-index, ảnh hưởng đến hiệu suất như thế nào?

Question

Giá trị z-index css ảnh hưởng như thế nào đến hiệu suất?

Nếu tôi có nhiều hình ảnh trên một trang thì có quan trọng không nếu tôi sử dụng giá trị chỉ mục z cao, chẳng hạn như 10.000? Ví dụ: một trang chứa 15 hình ảnh có chỉ mục z từ 500 - 10.000 và nếu hình ảnh có thể di chuyển được (jQuery có thể kéo), nó có tác động đến hiệu suất hay không bằng cách sử dụng các giá trị cao nếu trang được vẽ lại thường xuyên như vậy?

Answer 1

Số lượng lớp quan trọng, nhưng giá trị thực tế của chỉ mục z thì không. Khi kết xuất trang, trình duyệt chỉ sắp xếp tất cả các phần tử được định vị hoàn toàn bằng chỉ mục z của chúng (tăng dần) và vẽ chúng theo thứ tự đó.

CHỈNH SỬA: Ngoài ra, hiệu suất từ ​​phân loại chỉ xảy ra khi bạn thay đổi chỉ mục z của các lớp. Nếu các chỉ mục z không thay đổi thường xuyên, hiệu suất đạt được có thể sẽ không đáng chú ý chút nào. Ngay cả khi bạn đang thay đổi nhiều chỉ mục z, việc sắp xếp danh sách 15 mục gần như tức thời.

Answer 2

Có. Đến mức độ nào là khó trả lời mà không nhìn thấy toàn bộ trang, tuy nhiên một số vấn đề hiệu suất đang được phát. Với thao tác chỉ mục Z và với jQuery và các thư viện khác để chọn và thao tác các DOM một cách tự động, bạn về cơ bản là tái cấu trúc bố trí các đoạn HTML. Quan trọng là một trình duyệt không biết MODAL có nghĩa là gì. Bất kỳ yêu cầu thay đổi bố cục nào về cơ bản đều yêu cầu trình duyệt tính toán lại DOM. Đó là hit hiệu suất của bạn.

Answer 3

Trong khi không phải là một câu trả lời trực tiếp cho câu hỏi về hiệu suất, một yếu tố bổ sung quan trọng khi nói về việc sử dụng rất cao số z-index:

2147483647 là z-index tối đa trong hầu hết các trình duyệt web vì nó giá trị số nguyên 32 bit lớn nhất có thể. Bất kỳ số cao hơn 2147483647 sẽ tự động quay trở lại 2147483647.

Từ https://wordpress.org/support/topic/css-reference-to-the-tinymce-absolute-position-handle