網站優化技巧

##WEB前端開發常用的優化技巧彙總
@(201712)

###減少HTTP請求次數或者減少請求數據的大小
> 頁面中每發送一次HTTP請求，都需要完成請求+響應這個完整的HTTP事務，會消耗一些時間，也可能會導致HTTP鏈接通道的堵塞，爲了提高頁面加載速度和運行的性能，我們應該減少HTTP的請求次數和減少請求內容的大小（請求的內容越大，消耗的時間越長）

1、採用CSS雪碧圖（CSS Sprit / CSS 圖片精靈）技術，把一些小圖合併在一張大圖上，使用的時候通過背景圖片定位，定位到具體的某一張小圖上
```css
.pubBg{
   background:url('../img/sprit.png') no-repeat;
   background-size:x y; /*和原圖的大小保持一致*/
}
.box{
   background-position:x y; /*通過背景定位，定位到具體的位置，展示不同的圖片即可*/
}
...

<div class='pubBg box'></div>
```

2、真實項目中，我們最好把CSS或者JS文件進行合併壓縮；尤其是在移動端開發的時候，如果CSS或者JS內容不是很多，我們可以採取內嵌式，以此減少HTTP請求的次數，加快頁面加載速度；
> 1）CSS合併成一個，JS也最好合併成一個
> 2）首先同過一些工具（例如：webpack）把合併後的CSS或者JS壓縮成 xxx.min.js，減少文件大小
> 3）服務器端開啓資源文件的GZIP壓縮
> ...
> 通過一些自動化工具完成CSS以及JS的合併壓縮，或者再完成LESS轉CSS，ES6轉ES5等操作，我們把這種自動化構建模式，稱之爲前端“工程化”開發

3、採用圖片懶加載技術，在頁面開始加載的時候，不請求真實的圖片地址，而是用默認圖佔位，當頁面加載完成後，在根據相關的條件依次加載真實圖片（減少頁面首次加載HTTP請求的次數）
> 真實項目中，我們開始圖片都不加載，頁面首次加載完成，先把第一屏幕中可以看見的圖片進行加載，隨着頁面滾動，在把下面區域中能夠呈現出來的圖片進行加載
>  
> 根據圖片懶加載技術，我們還可以擴充出，`數據的懶加載`
> 1）開始加載頁面的時候，我們只把首屏或者前兩屏的數據從服務器端進行請求（有些網站首屏數據是後臺渲染好，整體返回給客戶端呈現的）
> 2）當頁面下拉，滾動到哪個區域，在把這個區域需要的數據進行請求（請求回來做數據綁定以及圖片延遲加載等）
> 3）分頁展示技術採用的也是數據的懶加載思想實現的：如果我們請求獲取的數據是很多的數據，我們最好分批請求，開始只請求第一頁的數據，當用戶點擊第二頁（微博是下拉到一定距離後，再請求第二頁數據...）的時候在請求第二頁數據...

4、對於不經常更新的數據，最好採用瀏覽器的304緩存做處理（主要由服務器端處理）
> 例如：
> 第一次請求CSS和JS下來，瀏覽器會把請求的內容緩存起來，如果做了304處理，用戶再次請求CSS和JS，直接從緩存中讀取，不需要再去服務器獲取了（減少了HTTP請求次數）
> 
> 當用戶強制刷新頁面（CTRL+F5）或者當前緩存的CSS或者JS發生了變動，都會從新從服務器端拉取
>  
> ...
> 
> 對於客戶端來講，我們還可以基於localStorage來做一些本地存儲，例如：第一次請求的數據或者不經常更新的CSS和JS，我們都可以把內容存儲在本地，下一次頁面加載，我們從本地中獲取即可，我們設定一定的期限或者一些標識，可以控制在某個階段重新從服務器獲取

5、使用字體圖標代替一些頁面中的位圖（圖片），這樣不僅做適配的時候方便，而且更加輕量級，而且減少了HTTP請求次數（類似於雪碧圖）

6、如果當前頁面中出現了AUDIO或者VIDEO標籤，我們最好設置它們的`preload=none：頁面加載的時候，音視頻資源不進行加載，播放的時候再開始加載`（減少頁面首次加載HTTP請求的次數）
> preload=auto：頁面首次加載的時候就把音視頻資源進行加載了
> preload=metadata：頁面首次加載的時候只把音視頻資源的頭部信息進行加載
> ...

7、在客戶端和服務器端進行數據通信的時候，我們儘量採用JSON格式進行數據傳輸
> [優勢]
> 1）JSON格式的數據，能夠清晰明瞭的展示出數據結構，而且也方便我們獲取和操作
> 2）相對於很早以前的XML格式傳輸，JSON格式的數據更加輕量級
> 3）客戶端和服務器端都支持JSON格式數據的處理，處理起來非常的方便
>  
> 真實項目中，並不是所有的數據都要基於JSON，我們儘可能這樣做，但是對於某些特殊需求（例如：文件流的傳輸或者文檔傳輸），使用JSON就不合適了

8、採用CDN加速
> CDN：分佈式（地域分佈式）

###關於編寫代碼時候的一些優化技巧
> 除了減少HTTP請求次數和大小可以優化性能，我們在編寫代碼的時候，也可以進行一些優化，讓頁面的性能有所提升（有些不好的代碼編寫習慣，會導致頁面性能消耗太大，例如：內存泄漏）

1、在編寫JS代碼的時候，儘量減少對DOM的操作（VUE和REACT框架在這方面處理的非常不錯）
> 在JS中操作DOM是一個非常消耗性能的事情，但是我們又不可避免的操作DOM，我們只能儘量減少對於它的操作
> 
> [操作DOM弊端]
> 1）DOM存在映射機制（JS中的DOM元素對象和頁面中的DOM結構是存在映射機制的，一改則都改），這種映射機制，是瀏覽器按照W3C標準完成對JS語言的構建和DOM的構建（其實就是構建了一個監聽機制），操作DOM是同時要修改兩個地方，相對於一些其它的JS編程來說是消耗性能的
> 2）頁面中的DOM結構改變或者樣式改變，會觸發瀏覽器的迴流（瀏覽器會把DOM結構重新進行計算，這個操作很耗性能）和重繪（把一個元素的樣式重新渲染）
> ...

2、編寫代碼的時候，更多的使用異步編程
> 同步編程會導致：上面東西完不成，下面任務也做不了，我們開發的時候，可以把某一個區域模塊都設置爲異步編程，這樣只要模塊之間沒有必然的先後順序，都可以獨立進行加載，不會受到上面模塊的堵塞影響（用的不多）
>  
> 尤其是AJAX數據請求，我們一般都要使用異步編程，最好是基於promise設計模式進行管理（項目中經常使用 fetch、vue axios 等插件來進行AJAX請求處理，因爲這些插件中就是基於promise設計模式對ajax進行的封裝處理）

3、在真實項目中，我們儘可能避免一次性循環過多數據（因爲循環操作是同步編程），尤其是要避免while導致的死循環操作

4、CSS選擇器優化
> 1）儘量減少標籤選擇器的使用
> 2）儘可能少使用ID選擇器，多使用樣式類選擇器（通用性強）
> 3）減少選擇器前面的前綴，例如：`.headerBox .nav .left a{ }` （選擇器是從右向左查找的）
> ...

5、避免使用CSS表達式
```css
/*CSS表達式*/
.box{
   background-color:expression((new Date()).getHours()%2?'red':'blue')
}
```

6、減少頁面中的冗餘代碼，儘可能提高方法的重複使用率：“低耦合高內聚”

7、最好CSS放在HEAD中，JS放在BODY尾部，讓頁面加載的時候，先加載CSS，在加載JS（先呈現頁面，在給用戶提供操作）

8、JS中避免使用eval
> 1）性能消耗大
> 2）代碼壓縮後，容易出現代碼執行錯亂問題

9、JS中儘量減少閉包的使用
> 1）閉包會形成一個不銷燬的棧內存，過多的棧內存累積會影響頁面的性能
> 2）還會容易導致內存的泄漏
>  
> 閉包也有自己的優勢：保存和保護，我們只能儘量減少，但是無可避免

10、在做DOM事件綁定的時候，儘量避免一個個的事件綁定，而是採用性能更高的事件委託來實現
> 事件委託（事件代理）
> 把事件綁定給外層容器，當裏面的後代元素相關行爲被觸發，外層容器綁定的方法也會被觸發執行（冒泡傳播機制導致），通過事件源是誰，我們做不同的操作即可

11、儘量使用CSS3動畫代替JS動畫，因爲CSS3的動畫或者變形都開啓了硬件加速，性能比JS動畫好

12、編寫JS代碼的時候儘可能使用設計模式來構建體系，方便後期的維護，也提高了擴充性等

13、CSS中減少對濾鏡的使用，頁面中也減少對於FLASH的使用

###關於頁面的SEO優化技巧
1、頁面中杜絕出現死鏈接（404頁面），而且對於用戶輸入一個錯誤頁面，我們要引導到404提示頁面中（服務器處理的）

2、避免瀏覽器中異常錯誤的拋出
> 儘可能避免代碼出錯
> 使用TRY CATCH做異常信息捕獲
> ...

3、增加頁面關鍵詞優化