saber酱的抱枕

Fly me to the moon

10/4
08:47
学习

给图片预设宽高避免图片载入时重新渲染页面

在68设计网看到的一篇文章《再谈Yahoo关于性能优化的N条军规》,说到了要给所有图片设置宽高。以前我没这么做,因为一般情况下浏览器会自动按原大显示图片,除非是我要强行拉伸或者缩小图片才指定宽高。现在去百度的网站看了看,不管是首页的logo,还是百度音乐的图片,或者是百度贴吧帖子列表里展示的缩略图,全都设置了宽高。继续百度,原来这样做可以避免对页面的重新渲染,可以优化页面的载入。以后也这样做好了

直接引用过来一段话:

如果不设置图片大小,页面需要重新渲染,那么为什么会这样呢?做过浏览器开发的朋友一定清楚HTML页面渲染的大致流程,浏览器分析接收到的HTML代码,生成DOM树,然后布局管理器对DOM树的可视元素进行排版,分配其位置、宽度以及高度。知道位置、大小之后就可以对DOM中的可视化元素进行视觉表达,即渲染(Render)。如果一个图片没有设置大小,那么在生成DOM树的时候就无法确定其大小,也无法预留其显示空间。当浏览器根据URL找到这个图片之后,对图片进行分析,才知道它的大小,本例中,是672 X 74,但此时DOM树已经生成,要给这个图片分配显示空间,就要重新渲染页面。如果我们实现设置好了图片大小,那么在生成DOM树的时候,我们就知道这个图片要显示成多大,分配什么什么样的显示空间,尽管图片还没有载入,我们只需要预留其位置即可。当浏览器载入图片的时候,按照预设的长度和宽度分配显示空间,将图片渲染至预留位置,而网页本身无须重新渲染,这样就节约了时间

参考:《给图片预先设置宽高的好处》

给图片预设宽高避免图片载入时重新渲染页面