Html 为什么具有指定高度和宽度的图像渲染速度比不具有指定高度和宽度的图像快?

Html 为什么具有指定高度和宽度的图像渲染速度比不具有指定高度和宽度的图像快?,html,image,Html,Image,通常的最佳做法是为标记设置高度和宽度值,以便更快地渲染,但为什么会这样呢?因为如果指定宽度和高度,浏览器可以在下载图像之前保留该空间,并继续解析下面的html。然后,当图像被下载时,它将填充该空间 若不这样做,浏览器就不知道应该事先保留多少空间。然后,下载图像时需要移动图像下方的html元素 通过为所有图像指定宽度和高度,可以消除不必要的回流和重绘,从而加快渲染速度 当浏览器布局页面时,它需要能够围绕可替换元素(如图像)流动。它甚至可以在下载图像之前开始呈现页面,前提是它知道包装不可替换元素的尺

通常的最佳做法是为
标记设置高度和宽度值,以便更快地渲染,但为什么会这样呢?

因为如果指定宽度和高度,浏览器可以在下载图像之前保留该空间,并继续解析下面的html。然后,当图像被下载时,它将填充该空间

若不这样做,浏览器就不知道应该事先保留多少空间。然后,下载图像时需要移动图像下方的html元素

通过为所有图像指定宽度和高度,可以消除不必要的回流和重绘,从而加快渲染速度

当浏览器布局页面时,它需要能够围绕可替换元素(如图像)流动。它甚至可以在下载图像之前开始呈现页面,前提是它知道包装不可替换元素的尺寸。如果包含文档中未指定尺寸,或者指定的尺寸与实际图像的尺寸不匹配,则下载图像后,浏览器将需要回流并重新绘制。要防止回流,请在HTML标记或CSS中指定所有图像的宽度和高度


因为如果宽度和高度与图像不同,它必须调整图像大小,这需要处理能力。答案很简单:)