因此即使浏览器只有HTML,它仍然能够分配适当的空间。所以我们可以修改成以下内容:
最近我们发现谷歌浏览器对图片设置有一定的修改,它主要在图像上进行设置width和设置height属性,以防止布局发生变化并改善网站访问者的体验。
Web性能倡导者经常建议开发者为图像添加尺寸,以实现最佳性能,以便在下载图像本身之前,以适当的图像空间布置页面,这样可以避免下载图像时发生版式移位。
为什么说给图片设置宽度和高度是一个很好的建议呢?
一下图是简单例子:
h1>Your titleh1>
Introductory paragraph.p>
Lorem ipsum dolor sit amet, consectetur…p>
以上例子分两个阶段进行渲染,首先是在下载HTML,然后再下载图像。使用上面的代码,这将导致主要内容在下载图像后发生加载版式移位。
图片未加载不留位置
布局的变化对用户造成很大的干扰,尤其是如果你已经开始阅读文章,突然被一连串的动荡甩开了,然后你必须再次找到自己的位置。当每个图像都通过Internet到达时,这还会在浏览器上进行额外的工作以重新计算页面布局。在包含大量图像的复杂页面上,这可能会在设备上要处理很多更好的事情时给设备带来可观的负担!
避免这种情况的传统方法是在标记中提供width和height属性,
Your titleh1>
Introductory paragraph.p>
Lorem ipsum dolor sit amet, consectetur…p>
然后进行渲染,如下所示,在到达图像时为图像留出适当的空间,并且下载图像时文本不会发生剧烈的偏移:
预留空间给图像
页面内容不断跳动对用户造成烦人的影响,更是对服务器的CPU影响相当大,所以在页面需要加载图片时,可以考虑添加高宽度。