Saber 酱的抱枕

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

直接引用过来一段话：

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

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

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