浏览器图片渲染优化教程

编程语言 12/12 阅读 438 views次 人气 0
摘要:

为什么要使用 height 和 width 属性指定图片尺寸

您是否见过当文档加载时其内容会显示不规律的移动。之所以会这样,是因为浏览器为了能够显示每一个加载的图像,而不断地重新调整页面的布局。浏览器通过下载并解析出图像的宽度和高度来决定图像的大小,然后就会在显示窗口中留出一个相应的矩形空间。然后浏览器就会调整页面的显示布局,以便把图像插入到显示当中。这同时也告诉我们,图像是独立的文件,它与源文件都分别是独立加载的。

但是这不是一种最有效的显示文档的方法,因为浏览器在显示相邻的以及后面的文档内容之前,必须要检查每一个图像文件,并计算它们的屏幕空间。这可能会给文档的显示带来非常大的延迟,从而打断用户的阅读。

对于开发者来说,一种更为有效的方法是通过 标签的 height 和 width 属性来指定图像的尺寸。这样的话,浏览器在下载图像之前就为其预留出了位置,从而可以加速文档的显示,还可以避免文档内容的移动。这两个属性都要求是整数值,并以像素为单位来表示图像尺寸。这两个属性在 标签中出现的次序并不重要。

简单的说,为页面中所有图片指定宽度和高度可以消除不必要的reflows和重新绘制页面【repaints】,使页面渲染速度更快。

当浏览器勾画页面时,它需要能够流动的,如图片这样的可替换的元素。提供了图片尺寸,浏览器知道去环绕附近的不可替换元素,甚至可以在图片下载之前开始渲染页面。如果没有指定的图片尺寸,或者如果指定的尺寸不符合图片的实际尺寸,一旦图片下载,浏览器将需要reflows和重新绘制页面。为了防止reflows,在HTML的标签中或在CSS中为所有图片指定宽度和高度。

height 和 width 属性的问题

虽然 标签的 height 和 width 属性能够改善性能并让你实现一些小技巧,但在使用它们时还是有一些棘手的负面效果。即使用户已经关掉了自动下载图像的功能,浏览器还是要把为图像预留的空间以指定的尺寸显示出来。而这样留给读者的通常是一个空的框架,里面有一个毫无意义的图标,表示这是放置图像的位置。这时页面将看上去非常糟糕,就像根本没有完成一样,并且大部分内容都毫无用处。如果不用这些指定的尺寸,则浏览器将只是在文本中放置一个图像图标,这样显示中至少还有一些文字可以阅读。
对于这个问题我们还没有解决方案,只能强调一点,就是去使用 alt 属性和一些描述性文字,这样读者至少知道这里缺少的是什么东西。我们还是建议您使用这些尺寸属性,因为我们鼓励一切能够改善网络性能的行为。

建议指定与图片本身相一致的尺寸

不要使用非图片原始尺寸来缩放图片。如果一个图片文件实际上的大小是60×60像素,不要在HTML或CSS里设置尺寸为30×30像素。如果图片需要较小的尺寸,在图像编辑软件中,设置成相一致的尺寸(详见优化图像。)

关于这一点,几张图片或者缩放比例不大影响不大,如果是前些年流行的瀑布流排版,而且图片缩放比例比较大的话,chrome也是扛不住的。

建议一定要指定图片或它的块级父元素的尺寸

一定要设置元素本身,或它的块级父元素的尺寸。如果父元素不是块级元素,尺寸将被忽略。不要在一个非最近父元素的祖先元素上设置尺寸。

评论

该文章不支持评论!

分享到: