Wen前端性能優化

Web前端性能優化

　　　　通常說來Web前端指網站業務邏輯以前的部分，包括瀏覽器加載、網站視圖模型、圖片服務、CDN服務等。主要優化手段有優化瀏覽器訪問、使用反向代理、CDN等。

　　　　1、瀏覽器訪問優化

　　　　減小http請求：

　　　　　　HTTP協議是無狀態的協議，意味着每次HTTP請求都須要創建通訊鏈路、進行數據傳輸，而在服務器端，每一個HTTP都須要啓動獨立的線程去處理。

　　　　　　減小HTTP的主要手段是：

　　　　　　a)      合併CSS

　　　　　　b)      合併JavaScript

　　　　　　c)      合併圖片

　　　　一、  使用瀏覽器緩存

　　　　對於一個網站來講，CSS、JavaScript、Logo、圖標這些靜態資源文件更新的頻率都比較低，而這些文件又幾乎是每次HTTP請求都須要的，若是將這些文件緩存在瀏覽器中，能夠極好地改善性能。經過header函數設置HTTP頭中Cache-Control和Expires的屬性，可設定瀏覽器緩存，緩存時間能夠是數天、甚至是幾個月。

              例子：header('Cache-Control: max-age=3600*24')；//緩存1天，表示最大生存期是1天，超過1天瀏覽器必須去服務器從新讀取，這個時間是從用戶第一次讀取頁面時開始計時的

    　　　　在某些時候，靜態資源文件變化須要及時應用到客戶端瀏覽器，這種狀況，可經過改變文件名或者給文件名加上版本實現。

       　　　<link href=」/c/style.css?version=2」 />

 　　　　二、CSS放在頁面最上面，JavaScript放在頁面最下面

　　　　瀏覽器會在下載完 所有CSS以後纔會對整個頁面進行渲染，所以最好的作法是將CSS放在頁面最上面，讓瀏覽器儘快下載CSS。JavaScript則相反，瀏覽器在加載JavaScript後當即執行，有可能會阻塞整個頁面，形成頁面顯示緩慢，所以JavaScript最好放在頁面最下面。

 　　　   三、減小COOKIE傳輸

　　　　COOKIE包含在每次請求和響應中，太大的Cookie會嚴重影響數據傳輸，所以要儘可能減小Cookie中傳輸的數據量。

 

　　　　2、CDN加速

　　　　CDN(Content Distribute Netword,內容分發網絡)的本質依然是一個緩存，並且將數據緩存在離用戶最近的地方，使用戶以最快速度獲取數據。

     　　  CDN可以緩存的通常是靜態資源，如圖片、文件、CSS、JavaScript腳本、靜態網頁等。因爲這些文件訪問頻率很高，將其緩存在CDN可極大改善網頁的打開速度。

 

　　　　3、反向代理

　　　　反向代理的做用：一、保護網站服務器安全  二、加速Web請求響應速度

       　　傳統代理服務器位於瀏覽器一側，代理瀏覽器將HTTP請求發送到互聯網上，而反向代理服務器位於網站機房一側，代理網站Web服務器接受HTTP請求。

　　　　

　　　　和傳統代理服務器能夠保護瀏覽器安全同樣，反向代理服務也具備保護網站安全的做用，來自互聯網的訪問請求必須通過反向代理服務器，至關於在Web服務器和可能的網絡攻擊之間創建了一個屏障。

      　　 除了安全功能，反向服務器也能夠經過配置緩存功能加速Web請求。當用戶第一次訪問靜態內容的時候，靜態內容就被緩存在反向代理服務器上，這樣當其餘用戶訪問該靜態內容的時候，就能夠直接從反向代理服務器返回，加速Web請求響應速度，減輕Web服務器負載壓力。