您知道吗? 如果您没有预先设定网站里所有图像的宽度与高度的话，那么浏览器就必须花上更多的时间来重绘(Repaint)和Reflow您的网页，而间接性的增加网页的渲染时间。那么，什么是重绘(Repaint)和Reflow呢？
重绘(Repaint)和Reflow就是浏览器重新绘制与计算网页布局的过程。当浏览器下载了HTML, JavaScript, CSS和图像之后，会依据原先设定好的属性参数来绘制网页以便网页的图像，颜色，设计，等等能够显示在用户的屏幕上 。要是如果您没有预先设定网站里所有图像的宽度与高度的话，那么浏览器就必须重新再绘制与计算网页的布局，这将明显的非常耗时，尤其是在移动手机处理能力较弱的设备上更加显著。最常见的例子不外乎是下载了非常大张的图片，然后再指示浏览器把该图片给缩小，这不单是浪费了渲染流程的时间，也浪费了用户的数据！
身为专业的网站设计与开发人员，我们的工作就是尽量的减少网页下载和渲染的时间。好，接下来我们就来看看如何提高网页(Rendering Time)渲染流程！
预先设定图像的尺寸
要是您最终要呈现在用户屏幕的图像尺寸是880×560的话，那么您要做的第一件事就是先准备实际尺寸的图像，然后再在HTML或CSS里告诉浏览器您图像尺寸。代码如下：
[html]
<img src="images/photo.jpg" width="880" height="560" />
[/html]
[css]
img {
height: 560px;
width: 880px;
}
[/css]
来个小实验
好，我们已经完成了优化的部分，那就来看看预先设定图像的尺寸有多大的帮助！下图，A（左侧）是之前没有设定任何的图像尺寸，而B部分（右侧）则是已经设定了图像尺寸的页面所需要的渲染时间。然而结果是在设定了图像尺寸后，我们成功将渲染(-0.369ms)与绘制(-1.626ms)的时间给减少了。
结束语
其实有时候只要我们一个小小的努力那就是预先设定图像的尺寸， 那么一个小动作就能够个减少网页(Rendering Time)渲染流程所需的时间，为用户们提供一个更快更好的体验！ 共勉之。