web前端優化

Web前端頁面性能優化以及SEO優化

前端優化的目的是什麼?

1，從用戶角度而言，優化可以讓頁面加載得更快、對用戶的操做響應得更及時，可以給用戶提供更爲友好的體驗。
2，從服務商角度而言，優化可以減小頁面請求數、或者減少請求所佔帶寬，可以節省可觀的源。

前端的頁面主要包括xhtml，css，js。其中xhtml就是現實中所談到的內容，頁面的內容：文字，圖片，flash，視頻等。

tips：
XHTML與HTML之間的差別：html是一種基本的web網頁設計語言，xhtml是一個基於XML的置標語言。
最主要的不一樣：XHTML元素必須正確的被嵌套，元素必須關閉，標籤必須小寫，必須有根元素。

xhtml的優化

結構語義化

結構包括head和body兩個部分，結構語義化主要是body中的標籤。
head中其實包括了一些對於咱們seo頗有用的一些東西，好比title,Description,Keywords，設置緩存等一些其餘的信息。
結構中儘可能不要出現style和onclick這樣的內聯的樣式和事件，注意結構與表現、行爲的分離。

好處

1. 有利於SEO，易於被搜索引擎抓取，有利於推廣；
2. 便於團隊開發和維護；
3. 方便盲人閱讀器、屏幕閱讀器等等設備來解析；
4. 在頁面沒有css或者css還未加載出來的時候，頁面也能呈現出很好的結構，如圖片的alt屬性；
5. 遵循分離結構和表現原則；

css和js 優化

• 使用外部 JavaScript 和 CSS；
• 削減 JavaScript 和 CSS；
• css文件放置在head，js放置在文檔尾部；
• 圖片文件優化：

1. css sprite：若是網頁中使用了大量背景圖片，那麼這些圖片每一張都會發送一個http請求，能夠使用css sprite來合併網頁中的須要頻繁加載的多個圖片。對於合併以後的圖片，咱們須要注意對它圖片質量和大小的優化，圖片越小加載速度越快。（建議使用PNG8格式的圖片結合css sprite，一樣的圖片，PNG8格式會相對來比GIF小）； 2. 不要在HTML中縮放圖像（要不是圖片太大誰會縮放啊）； 3. favicon.ico （瀏覽器的收藏夾中除顯示相應的標題外，還以圖標的方式區別不一樣的網站。）要小並且可緩存； 4. 懶加載 1. css sprite：若是網頁中使用了大量背景圖片，那麼這些圖片每一張都會發送一個http請求，能夠使用css sprite來合併網頁中的須要頻繁加載的多個圖片。對於合併以後的圖片，咱們須要注意對它圖片質量和大小的優化，圖片越小加載速度越快。（建議使用PNG8格式的圖片結合css sprite，一樣的圖片，PNG8格式會相對來比GIF小）； 2. 不要在HTML中縮放圖像（要不是圖片太大誰會縮放啊）； 3. favicon.ico （瀏覽器的收藏夾中除顯示相應的標題外，還以圖標的方式區別不一樣的網站。）要小並且可緩存； 4. 懶加載

• 多個合併爲一個：能夠用一個大的css文件來合併多個小的css文件，瀏覽器在請求每個css文件時都會發送一個http請求。
• sass；
• 減小DOM訪問；
• 用 link代替 @import；
• 減少Cookie體積，對於頁面內容使用無coockie域名；
• 利用多個域名來存儲網站資源：能夠節約cookie帶寬。節約主域名的鏈接數，優化頁面響應速度；
• 利用緩存：Ajax調用都採用緩存調用方式，通常採用附加特徵參數方式實現，注意其中的<script src=」xxx.js?{VERHASH}」，{VERHASH}就是特徵參數，這個參數不變化就使用緩存文件，若是發生變化則從新下載新文件或更新信息。
• css選擇器優化：瀏覽器以從右到左的方式進行匹配；

#box a{color:#f00}; //瀏覽器先遍歷頁面中全部的 a 元素，而後再找id爲box的父元素。 #box a{color:#f00}; //瀏覽器先遍歷頁面中全部的 a 元素，而後再找id爲box的父元素。

Google 資深web開發工程師 Steve Souders 對 CSS 選擇器的執行效率從高到低作了一個排序：

1.id選擇器（#myid）
2.類選擇器（.myclassname）
3.標籤選擇器（div,h1,p）
4.相鄰選擇器（h1+p）
5.子選擇器（ul < li）
6.後代選擇器（li a）
7.通配符選擇器（*）
8.屬性選擇器（a[rel="external"]）
9.僞類選擇器（a:hover, li:nth-child）

根據以上「選擇器匹配」與「選擇器執行效率」原則，咱們能夠經過避免不恰當的使用，提高 CSS 選擇器性能。

1. 避免使用通用選擇器；
   .box *{color:#f00;}
   瀏覽器匹配文檔中全部的元素後分別向上逐級匹配class爲box的元素，直到文檔的根節點。所以其匹配開銷是很是大的，因此應避免使用關鍵選擇器是通配選擇器的狀況。
2. 避免使用標籤或 class 選擇器限制 id 選擇器；
3. 避免使用標籤限制 class 選擇器；
4. 避免使用多層標籤選擇器。使用 class 選擇器替換，減小css查找；
5. 避免使用子選擇器；
6. 使用繼承；

SEO優化

1. 內部優化
   　　（1）META標籤優化：例如：TITLE，KEYWORDS，DESCRIPTION等的優化；
   　　（2）內部連接的優化，包括相關性連接（Tag標籤），錨文本連接，各導航連接，及圖片連接；
   　　（3）網站內容更新：天天保持站內的更新(主要是文章的更新等)。
2. 外部優化　　（1）外部連接類別：友情連接、博客、論壇、B2B、新聞、分類信息、貼吧、知道、百科、站羣、相關信息網等儘可能保持連接的多樣性；　　（2）外鏈運營：天天添加必定數量的外部連接，使關鍵詞排名穩定提高；　　（3）外鏈選擇：與一些和你網站相關性比較高,總體質量比較好的網站交換友情連接,鞏固穩定關鍵詞排名。