每个响应式网站开发教程都建议使用display:noneCSS属性来隐藏内容,以防止内容在移动浏览器中加载,从而使网站加载速度更快。是真的吗 难道display:none不加载图像或它仍然加载在手机浏览器的内容?有什么方法可以防止在移动浏览器上加载不必要的内容?
display:none
浏览器变得越来越聪明。今天,如果浏览器(取决于版本)可以确定图像没有用,则可能会跳过图像加载。
该图像具有display:none样式,但是脚本可以读取其大小。如果父级为隐藏状态,Chrome v68.0不会加载图像。
您也可以通过查看浏览器开发人员工具的“网络”标签来进行检查。
请注意,如果浏览器在小型CPU计算机上,则不必渲染图像(和布局页面)将使整个渲染操作更快,但是我怀疑这在今天是否确实有意义。
如果您想防止图像加载,可以简单地不将IMG元素添加到文档中(或将IMGsrc属性设置为"data:"或"about:blank")。
src
"data:"
"about:blank"