優化前端性能的總結

前端是龐雜的，包括 HTML、 CSS、 Javascript、Image 、Video等等各類各樣的資源。前端優化是複雜的，針對方方面面的資源都有不一樣的方式。那麼，前端優化的目的是什麼 ?

    從用戶角度而言，優化可以讓頁面加載得更快、對用戶的操做響應得更及時，可以給用戶提供更爲友好的體驗。  

    從服務商角度而言，優化可以減小頁面請求數、或者減少請求所佔帶寬，可以節省可觀的資源。  

    總之，說白了，恰當的優化不只可以改善站點的用戶體驗而且可以節省至關的資源利用，就是又讓用戶用的爽，又省了錢。

 

    1.使用cdn加速，網站上靜態資源即css、js全都使用cdn分發，圖片亦然。具體來講，CDN就是採用更多的緩存服務器（CDN邊緣節點），布放在用戶訪問相對集中的地區或網絡中。當用戶訪問網站時，利用全局負載技術，將用戶的訪問指向距離最近的緩存服務器上，由緩存服務器響應用戶請求

目前國內比較靠譜的cdn服務商我的推薦七牛雲 qiniu.com,他們家的cdn服務每月有10g是免費的，配置也很簡單，直接申請便可

 

    2.使用Gzip壓縮網頁

    Gzip壓縮可讓你的頁面體積變小，加快訪問速度，使用nginx服務器能夠簡單的開啓gzip壓縮

    修改nginx配置文件 vim /etc/nginx/nginx.conf

user  root;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    gzip  on;   #開啓gzip
    gzip_min_length 1k; #低於1kb的資源不壓縮
    gzip_comp_level 3; #壓縮級別【1-9】，越大壓縮率越高，同時消耗cpu資源也越多，建議設置在4左右。
    gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;  #須要壓縮哪些響應類型的資源，>多個空格隔開。不建議壓縮圖片，下面會講爲何。
    gzip_disable "MSIE [1-6]\.";  #配置禁用gzip條件，支持正則。此處表示ie6及如下不啓用gzip（由於ie低版本不支持）
    gzip_vary on;  #是否添加「Vary: Accept-Encoding」響應頭

    include /etc/nginx/conf.d/*.conf;
    #upstream mytest {
    #server 39.106.172.65:8000 weight=3;  #負載均衡服務器羣
    #server 39.97.117.229:8001 weight=7;
        #}
}

 

重啓nginx 

systemctl restart nginx.service

 

    如何判斷是否開啓成功呢？可使用站長工具進行檢測 http://tool.chinaz.com/Gzips

3 減小 HTTP請求數，若是能夠的話，儘量的將外部的腳本、樣式進行合併，多個合爲一個。另外， CSS、 Javascript、Image 均可以用相應的工具進行壓縮，壓縮後每每能省下很多空間，如何壓縮以及合併外部腳本和樣式請參照這篇文章 利用grunt插件來壓縮js和css文件用來減小http請求，提升頁面效率

 

    4 避免空的src和href
        當link標籤的href屬性爲空、script標籤的src屬性爲空的時候，瀏覽器渲染的時候會把當前頁面的URL做爲它們的屬性值，從而把頁面的內容加載進來做爲它們的值。因此要避免犯這樣的疏忽。

 

    5 把CSS放到頂部
    網頁上的資源加載時從上網下順序加載的，因此css放在頁面的頂部可以優先渲染頁面，讓用戶感受頁面加載很快。

    6 把JS放到底部
    加載js時會對後續的資源形成阻塞，必須得等js加載完纔去加載後續的文件 ，因此就把js放在頁面底部最後加載。

    

    7 可緩存的AJAX

    異步請求一樣的形成用戶等待，因此使用ajax請求時，要主動告訴瀏覽器若是該請求有緩存就去請求緩存內容。以下代碼片斷, cache:true就是顯式的要求若是當前請求有緩存的話，直接使用緩存

 

$.ajax(
{
url : 'url',
      dataType : "json",
      cache: true,
      success : function(son, status){
}

8 減小做用域鏈查找，這一點在循環中是尤爲須要注意的問題。若是在循環中須要訪問非本做用域下的變量時請在遍歷以前用局部變量緩存該變量，並在遍歷結束後再重寫那個變量，這一點對全局變量尤爲重要，由於全局變量處於做用域鏈的最頂端，訪問時的查找次數是最多的

低效率的寫法：

// 全局變量 
var globalVar = 1; 
function myCallback(info){    
for( var i = 100000; i--;){       
//每次訪問 globalVar 都須要查找到做用域鏈最頂端，本例中須要訪問 100000 次       
globalVar += i;    
}
}   

更高效的寫法：

// 全局變量 
var globalVar = 1; 
function myCallback(info){    
//局部變量緩存全局變量     
var localVar = globalVar;    
for( var i = 100000; i--;){       
//訪問局部變量是最快的        
localVar += i;    }
}

9 生成純靜態頁，也就是把動態內容事先生成好，這樣在前端就避免請求後端數據，加快了頁面訪問速度

 

    通過上面的幾點優化以後，咱們可使用google的頁面性能打分工具PageSpeedInsights對網站進行評測   https://developers.google.com/speed/pagespeed/insights/

能夠看到，通過一番頁面性能優化，訪問速度獲得了提高，帶寬節約了很多，前端優化任重而道遠