因此即使瀏覽器只有HTML，它仍然能夠分配適當(dāng)?shù)目臻g。所以我們可以修改成以下內(nèi)容：

最近我們發(fā)現(xiàn)谷歌瀏覽器對圖片設(shè)置有一定的修改，它主要在圖像上進(jìn)行設(shè)置width和設(shè)置height屬性，以防止布局發(fā)生變化并改善網(wǎng)站訪問者的體驗(yàn)。

Web性能倡導(dǎo)者經(jīng)常建議開發(fā)者為圖像添加尺寸，以實(shí)現(xiàn)最佳性能，以便在下載圖像本身之前，以適當(dāng)?shù)膱D像空間布置頁面，這樣可以避免下載圖像時(shí)發(fā)生版式移位。

為什么說給圖片設(shè)置寬度和高度是一個(gè)很好的建議呢？

一下圖是簡單例子：

h1>Your titleh1>

Introductory paragraph.p>

Lorem ipsum dolor sit amet, consectetur…p>

以上例子分兩個(gè)階段進(jìn)行渲染，首先是在下載HTML，然后再下載圖像。使用上面的代碼，這將導(dǎo)致主要內(nèi)容在下載圖像后發(fā)生加載版式移位。

圖片未加載不留位置

布局的變化對用戶造成很大的干擾，尤其是如果你已經(jīng)開始閱讀文章，突然被一連串的動(dòng)蕩甩開了，然后你必須再次找到自己的位置。當(dāng)每個(gè)圖像都通過Internet到達(dá)時(shí)，這還會(huì)在瀏覽器上進(jìn)行額外的工作以重新計(jì)算頁面布局。在包含大量圖像的復(fù)雜頁面上，這可能會(huì)在設(shè)備上要處理很多更好的事情時(shí)給設(shè)備帶來可觀的負(fù)擔(dān)！

避免這種情況的傳統(tǒng)方法是在標(biāo)記中提供width和height屬性，

Your titleh1>

Introductory paragraph.p>

Lorem ipsum dolor sit amet, consectetur…p>

然后進(jìn)行渲染，如下所示，在到達(dá)圖像時(shí)為圖像留出適當(dāng)?shù)目臻g，并且下載圖像時(shí)文本不會(huì)發(fā)生劇烈的偏移：

預(yù)留空間給圖像

頁面內(nèi)容不斷跳動(dòng)對用戶造成煩人的影響，更是對服務(wù)器的CPU影響相當(dāng)大，所以在頁面需要加載圖片時(shí)，可以考慮添加高寬度。

總結(jié)

以上是生活随笔為你收集整理的html设置页面的高度和宽度,web显示页面有图像上设置高度和宽度很重要的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。