performance - 为内联图像添加宽度和高度是否会提高页面加载性能？

Question

为内联图像添加宽度和高度是否会提高页面加载性能？

<img id="moon" height="200" width="450" 
      src="http://www.domain.com/moon.png" alt="moon image" />

与此相比

<img id="moon" src="http://www.domain.com/moon.png" alt="moon image" />

Answer 1

我认为它不会使页面加载更快，但它有助于立即正确呈现页面，因为浏览器在必须获取图像之前知道图像的尺寸以正确布局页面

Answer 2

是的。许多浏览器将在下载内容时开始渲染。如果他们没有尺寸或尺寸错误，他们会使用占位符。一旦知道大小，渲染就会从头开始。

如果您指定了正确的尺寸，很多时候您可能不必重新重新开始渲染。这节省了客户端的 CPU 并允许初始渲染持续。这改善了客户端的渲染时间。