如何在網(wǎng)站優(yōu)化中優(yōu)化瀏覽器渲染，多年seo云優(yōu)化經(jīng)驗(yàn)的優(yōu)幫云今天向大家講解了關(guān)于網(wǎng)站優(yōu)化，如何從代碼上渲染瀏覽器，從而加快網(wǎng)站的速度和網(wǎng)站優(yōu)化。

1： HTML和CSS中的圖像大小規(guī)范

圖像大小公式：所有圖像的寬度和高度都是在網(wǎng)頁設(shè)計中指定的，這樣通過消除不必要的回流和重畫可以更快地呈現(xiàn)網(wǎng)頁。

當(dāng)瀏覽器執(zhí)行頁面布局時，它需要可替換的元素，例如圖像。在瀏覽器開始呈現(xiàn)呈現(xiàn)的頁面之前，它會下載圖像。如果包含的文檔中沒有指定大小，或者指定的圖像與這些實(shí)際圖像不匹配，瀏覽器將要求對下載的圖像進(jìn)行一次回流和重畫。

為了防止回流，可以使用HTML中的所有圖像img標(biāo)記，也可以使用CSS中指定的寬度和高度。

2： 指定字符集

瀏覽器使用的字符編碼？信息。屏幕上顯示的字符被轉(zhuǎn)換成字節(jié)流。由于瀏覽器無法正確呈現(xiàn)頁面，也不知道如何構(gòu)建頁面的字符，因此大多數(shù)瀏覽器都會緩沖一定數(shù)量的字節(jié)，然后執(zhí)行任何Java或呈現(xiàn)頁面，Internet Explorer版本6、7、8是一個例外。

但是，一旦緩沖所需的字節(jié)數(shù)可用并呈現(xiàn)頁面，如果遇到不符合默認(rèn)字符集規(guī)范的輸入和重畫頁面，則需要重新解析它們。有時可能有一個請求資源。如果存在不匹配，則外部資源的URL將受到影響。

3： 文檔標(biāo)題中的CSS

嵌入的樣式和文檔體鏈接元素被放置在頭部，從而提高了渲染性能。

當(dāng)在HTML正文中指定外部樣式表和內(nèi)聯(lián)樣式時，瀏覽器的呈現(xiàn)性能將受到負(fù)面影響。因此，外部樣式表和內(nèi)聯(lián)樣式都放在頁面的頂部。通過確保首先下載并分析樣式表，您可以讓瀏覽器逐步呈現(xiàn)頁面。

4： 避免使用CSS表達(dá)式

CSS表達(dá)式通過用其他替代品替換ie用戶的瀏覽器來降低渲染性能。CSS表達(dá)式僅適用于Internet Explorer 5到7，并且支持CSS表達(dá)式。Internet Explorer 8中的CSS表達(dá)式已棄用，不支持其他瀏覽器。

從IE5開始，CSS表達(dá)式成為在響應(yīng)事件中更改文檔屬性的一種方法。他們經(jīng)常被用來提供一個動態(tài)的風(fēng)格和更耀眼的效果。此外，它還可以使CSS更加緊湊和方便，實(shí)現(xiàn)功能和效果。

我們使用CSS表達(dá)式，比如每小時切換一個背景。

背景顏色：表達(dá)式（（newDate（））.getHours（）%2？“B8D4FF”：“F08A00”）；

表達(dá)式中使用Java表達(dá)式。CSS屬性是根據(jù)Java表達(dá)式的求值設(shè)置的。expression方法在其他瀏覽器中不起作用，因此在跨瀏覽器設(shè)計中單獨(dú)設(shè)置Internet Explorer時非常有用。不僅當(dāng)頁面顯示和縮放時，而且當(dāng)頁面滾動甚至移動鼠標(biāo)時，都將重新計算。向CSS表達(dá)式添加計數(shù)器可以跟蹤它的計算頻率。

一種減少CSS表達(dá)式次數(shù)的方法是使用一次性表達(dá)式，該表達(dá)式在初次運(yùn)行時將結(jié)果分配給指定的樣式屬性，并用此屬性替換CSS表達(dá)式。如果必須使用CSS表達(dá)式，請記住它們會被計算數(shù)千次，并且會對頁面的性能產(chǎn)生影響。

5： 使用有效的CSS選擇器

首先：刪除未使用的CSS是提高渲染性能的***個重要步驟。頁面呈現(xiàn)從右到左、從右邊的選擇器（稱為“鍵”）計算每個CSS規(guī)則，并通過每個選擇，直到找到匹配項(xiàng)或放棄CSS規(guī)則。