display:none 和 hidden 的区别

原文

Setting display:none to images or to image containers does not prevent the browsers from requesting the image.

把 image 设置为 display: none，浏览器依然会请求这张图片，因为设置了 display: none 后，这个元素依然会出现在 DOM 中。在组件或标签中增加 hidden 属性则不会请求图片，但如果这个组件或标签使用了 display css 属性，无论是 display: none 还是 display: flex 等等，都会导致 hidden 无效。