最佳化瀏覽器渲染:指定圖片尺寸

來源:互聯網
上載者:User

概述

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

詳細資料

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

建議

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

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

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

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



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。