概述
為頁(yè)面中所有圖片指定寬度和高度可以消除不必要的reflows和重新繪制頁(yè)面【repaints】，使頁(yè)面渲染速度更快。
詳細(xì)信息
當(dāng)瀏覽器勾畫(huà)頁(yè)面時(shí)，它需要能夠流動(dòng)的，如圖片這樣的可替換的元素。提供了圖片尺寸，瀏覽器知道去環(huán)繞附近的不可替換元素，甚至可以在圖片下載之前開(kāi)始渲染頁(yè)面。如果沒(méi)有指定的圖片尺寸，或者如果指定的尺寸不符合圖片的實(shí)際尺寸，一旦圖片下載，瀏覽器將需要reflows和重新繪制頁(yè)面。為了防止reflows，在HTML的< img >標(biāo)簽中或在CSS中為所有圖片指定寬度和高度。
建議
指定與圖片本身相一致的尺寸
不要使用非圖片原始尺寸來(lái)縮放圖片。如果一個(gè)圖片文件實(shí)際上的大小是60×60像素，不要在HTML或CSS里設(shè)置尺寸為30×30像素。如果圖片需要較小的尺寸，在圖像編輯軟件中，設(shè)置成相一致的尺寸。
一定要指定圖片或它的塊級(jí)父元素的尺寸
一定要設(shè)置< img >元素本身，或它的塊級(jí)父元素的尺寸。如果父元素不是塊級(jí)元素，尺寸將被忽略。不要在一個(gè)非最近父元素的祖先元素上設(shè)置尺寸。 |
