z-index，它如何影响性能？
css z-index 值如何影响性能？
如果我在一个页面上有多个图像，那么使用高 z-index 值（例如 10,000）是否有影响？
例如，一个页面包含 15 个 z 索引范围为 500 - 10,000 的图像，如果图像是可移动的（jQuery 可拖动），那么如果页面重绘如此频繁，使用高值是否会影响性能？
How does the css z-index value affect performance?
If I have multiple images on a page does it matter if I use high z-index values, like 10,000?
For example, a page contains 15 images with z-indexes ranging from 500 - 10,000, and if the images are moveable (jQuery draggable), does it impact upon performance by using high values if the page is redrawn so frequently?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
层数很重要，但 z 索引的实际值并不重要。渲染页面时，浏览器仅按 z 索引（升序）对所有绝对定位元素进行排序，并按该顺序绘制它们。
编辑：
此外，仅当您更改图层的 z 索引时，排序才会对性能造成影响。如果 z 索引不经常更改，则性能影响可能根本不会明显。即使您经常更改 z 索引，对包含 15 个项目的列表进行排序也几乎是瞬时的。
The number of layers matters, but the actual value of the z-index does not. When rendering the page, the browser just sorts all of the absolutely-positioned elements by their z-index (ascending) and draws them in that order.
EDIT:
Also, the performance hit from sorting only occurs when you change the z-index of the layers. If the z-indices aren't changing often, the performance hit probably won't be noticeable at all. Even if you are changing the z-indices a lot, sorting a list of 15 items is almost instantaneous.
虽然不是性能问题的直接答案，但在谈论使用非常高的 z-index 数字时，还有一个重要的额外考虑因素：
来自 https: //wordpress.org/support/topic/css-reference-to-the-tinymce-absolute-position-handle
While not a direct answer to the question of performance, an important additional consideration when talking about using very high z-index numbers:
From https://wordpress.org/support/topic/css-reference-to-the-tinymce-absolute-position-handle
是的。在没有看到整个页面的情况下很难回答到什么程度，但是一些性能问题正在发挥作用。通过 Z 索引操作以及 jQuery 和其他动态选择和操作 DOM 的库，您基本上可以重构 HTML 块的布局。重要的是浏览器不知道 MODAL 的含义。任何更改布局的请求本质上都会要求浏览器重新计算 DOM。这就是你的表现。
Yes. To what degree is difficult to answer without seeing the entire page, however some performance issues are at play. With Z index manipulation and with jQuery and other libraries that select and manipulate DOMs dynamically you are basically restructuring the layout of HTML chunks. Importantly a browser has no idea what MODAL means. Any request to change layout essentially asks the browser to recalculate the DOM. That is your performance hit.