前端性能優化四：

原創

2020-06-20 11:41

我對網站優化總結了幾點：網站結構優化，前端代碼優化，網頁設計優化，鏈接優化等四個方面。每個優化細節，都產生着交叉式的影響，而且對網站產生着不同的作用。然而前端代碼是網站的基礎語言，也是搜索引擎認知的語言，所以每個網站都要重視前端代碼，今天分享一下，我是如何進行優化前端代碼的。

前端代碼主要包括CSS語言和HTML語言。這裏主要說一下CSS代碼優化。

Css代碼優化對網站的好處是：

（1）加快用戶打開網站的速度，一般情況一下，用戶打開網站超過8秒，用戶就排除了這個網站。所以在優化代碼的時候，代碼簡單是重要的一個方面。簡單代碼是網頁的字節數減少了，減少了瀏覽器下載代碼的時間。

（2）網站改版css便於修改，標準的css讓代碼整齊，簡單，不管是網站的改版，還是網站修改內容，都便於維護，省去大量的時間。

代碼優化細則：

（1）CSS代碼簡寫。這裏說的簡寫主要解決的問題是，網站代碼冗餘，去除不必要的空格等等。如果可以用一句表達的語言，就不要多出幾行代碼，符合W3C標準。

代碼冗餘

例如：最長用的margin，屬於多個屬性簡化爲一條綜合屬性

未優化前

margin-left：2px;

margin-right：4px;

margin-top：8px;

margin-bottom：6px;

可以簡寫爲

margin:8px 4px 6px 2px;

去除代碼空格

去除多餘的空格鍵，可以有效減少網頁的字節數

例如：

.a{

Font-size:14px;

Border:2px solid red;

Padding:1px 2px;}

可以簡寫爲：

.a{ Font-size:14px; Border:2px solid red; Padding:1px 2px;}

（2）同屬性提出

如果2個樣式帶有同樣的屬性，可以把同屬性單獨提出處理。例如A樣式和B樣式的字體顏色、大小、邊框都一樣，那麼就可以考慮提出。

例如：

.gongyong{font-size:12px;border:1px solid red}

.yangshi{ width:10px;}

.yangshi2{width:20px;}

（3）結構清晰優化

網站代碼清晰是指，把代碼分區處理：網站頭部、網站身體，網站底部，3個區域進行不同的佈局。不同區間的代碼要區別總的選擇器，選擇不同顏色加以區分隔開處理。

總結：網站的前端代碼，搜索引擎重視評估程度爲20%。代碼簡化，爬行的目錄層次淺，這樣加強了搜索引擎對代碼的友好程度，進而提高網站的權重，關鍵詞纔會有良好的排名。如果代碼冗餘，煩瑣，搜索引擎也就關注的少了。

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.