DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 優化浏覽器渲染:指定圖片尺寸
優化浏覽器渲染:指定圖片尺寸
編輯:CSS進階教程     

網頁制作poluoluo文章簡介:為頁面中所有圖片指定寬度和高度可以消除不必要的reflows和重新繪制頁面【repaints】,使頁面渲染速度更快。

概述

為頁面中所有圖片指定寬度和高度可以消除不必要的reflows和重新繪制頁面【repaints】,使頁面渲染速度更快。

詳細信息

當浏覽器勾畫頁面時,它需要能夠流動的,如圖片這樣的可替換的元素。提供了圖片尺寸,浏覽器知道去環繞附近的不可替換元素,甚至可以在圖片下載之前開始渲染頁面。如果沒有指定的圖片尺寸,或者如果指定的尺寸不符合圖片的實際尺寸,一旦圖片下載,浏覽器將需要reflows和重新繪制頁面。為了防止reflows,在HTML的<img>標簽中或在CSS中為所有圖片指定寬度和高度。

建議

指定與圖片本身相一致的尺寸

不要使用非圖片原始尺寸來縮放圖片。如果一個圖片文件實際上的大小是60×60像素,不要在HTML或CSS裡設置尺寸為30×30像素。如果圖片需要較小的尺寸,在圖像編輯軟件中,設置成相一致的尺寸。

一定要指定圖片或它的塊級父元素的尺寸

一定要設置<img>元素本身,或它的塊級父元素的尺寸。如果父元素不是塊級元素,尺寸將被忽略。不要在一個非最近父元素的祖先元素上設置尺寸。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved