Css性能！更多重複或獨特

哪個更快更優化？

哪個更適合瀏覽器和流量？

未來的任何變化。

* 1。

.class1,.class2{ 
line-height:40px; 
text-align:left; 
margin-left:4%; 
width:34%; 
float:right 
} 
.class2{ 
width:44%; 
float:left 
}

.class1{ 
line-height:40px; 
text-align:left; 
margin-left:4%; 
width:34%; 
float:right 
} 
.class2{ 
line-height:40px; 
text-align:left; 
margin-left:4%; 
width:44%; 
float:left 
}

* 3。

.class1,.class2{ 
line-height:40px; 
text-align:left; 
margin-left:4%; 
} 
.class1{ 
width:34%; 
float:right; 
} 
.class2{ 
width:44%; 
float:left; 
}

* @connexo建議的新更新。

Sepas爲您的時間！

來源

2017-03-04 Amin Maleki

在你的第一個規則塊中，你有兩個'width'聲明。 – connexo

這是我該怎麼做。將所有屬性都分成一個塊，然後定義偏差屬性。

.class1, 
.class2 { 
    line-height: 40px; 
    margin-left: 4%; 
    text-align: left; 
} 
.class1 { 
    float: right; 
    width: 34%; 
} 
.class2 { 
    float: left; 
    width: 44%; 
}

除了我建議的聲明書按字母順序排序，並在一個塊中的最後聲明之後不要省略分號，結構性的東西。

來源

2017-03-04 20:55:16 connexo

你說的對分號。我從來沒有想過你的模型，因爲我認爲這不是迷你！但我選擇，如果執行瀏覽器。 –

針對別人不要貶低，但我們有Gzip！所以最佳答案是3. –

我不確定問題是否正確。在CSS的情況下，我會問維護它有多容易。當您在較大的網站上工作時，更新1個樣式聲明比更新10個聲明更好。如果你確定class1和class2的行爲總是相同的話，我會用第一個例子。查找究竟需要更新的內容會更容易。

這兩個例子都不會對性能產生任何顯着影響，而且它們與SEO（據我所知）無關。

我希望這回答這個問題...

來源

2017-03-04 20:32:59 Kate

然後我會和第一個例子一起去。這真的很容易。在處理網站上每個容器的大量樣式時，要找到需要更新的正確部分是非常困難的。像這樣分組肯定有幫助。 – Kate

如果開發人員很重要，那麼現在流量和瀏覽器都很重要。 –

有幾件事情你應該注意：

1.使用速記
這將減少不必要的使用空間。 - >優化交通

2.縮減大小代碼
同爲1

3.分割你的CSS - 代碼（臨界首屏CSS）
這是一個非常有效的方式來優化您的頁面速度。您可以將代碼放在用戶可以在頁面頂部看到的第一個視圖中，其餘的在底部。然後瀏覽器可以呈現頁面，而不需要完全下載頁面。

4.使用內聯CSS
這不是beautifulest解決方案，但它會影響性能。但是不要將所有的CSS內聯編寫，只有一些小部分。

來源

2017-03-04 21:13:42

我與前3個選項一起工作。他們是關於流量，但瀏覽器？你知道4是懷舊。 –

3加速您的頁面（爲了您的JavaScript不會阻止進程）。對於用戶來說，網頁的響應速度更快。而且4也可以提供幫助。它可以減少你的CSS，因爲你直接將它應用到元素。但你是對的，效果不是極端的。 –

Css性能！更多重複或獨特

回答

相關問題