優化前端網頁性能

綜合來看，優化前端網頁性能有如下幾種方式：

網頁內容、服務器、圖片、cookie、css/js文件處理等方式。

一、網頁內容：

    經過減小http請求，減小DNS查詢，延時加載不急切須要的內容，提早加載將要須要的內容，不要404頁面，不用iframe等方式。

    減小http請求次數：將文件捆綁打包，將圖片合併。

    減小DNS 查詢：本地上能夠清除DNS記錄，可是這隻能讓本地瀏覽速度加快，服務器上怎麼設置呢？

     

二、服務器：

     經過設置服務器使得提升網頁性能的方式並非很熟練。主要有如下等方式：

 　 CDN、Expires/Cache-Control、Gzip、Etags、Get Ajax 、避免空src

　　cdn：分佈式存儲、負載均衡、網絡請求的重定向和內容管理（就是將網站的內容發佈到最接近用戶的網絡"邊緣""，使用戶能夠就近取得所需的內容，解決Internet網絡擁塞情況，提升用戶訪問網站的響應速度。）

     Expires/Cache-Control：靜態內容永不過時，動態內容動態加載。

     Gzip：是個效率提高的好東西，zip一般能夠減小70%網頁內容的大小，包括腳本、樣式表、圖片等文件。須要配置iis。

　　Etags：就是將網頁內容標記，而後讓服務器更好判斷這是神馬東東。

　　Get：get比post快。。。

　　固然要避免空的src了，空的還要發送一個請求，而後瀏覽器還要返回個空值，不浪費纔怪。。。

三、圖片：

    優化圖片（就是讓它小，更小，或者在移動設備上用媒體查詢的方式讓它小。。。）。

    css sprite ：一個神奇的拼圖片，而後再切圖片的想法。

                    如何切？ （人家是用position定位的，沒錯，就是這麼簡單粗暴。）

                    why用它？ 對於小的圖標仍是蠻合適的，可是公司好像並無常常用到它，然並卵。。。

    不要在html中縮放圖片，若是用小圖，就把圖弄小。。。 （這個美工負責麼？）

四、cookies

     因爲cookies是在http的報頭中，因此若是不用cookies就把它禁了吧，用到也儘可能減少它。

五、css/js

　　將css文件放在head中，由於這樣作可使瀏覽器逐步加載已將下載的網頁內容，而後就慢慢看到了它加載完成的東西啦，不用面對個白屏。

      儘可能不用css表達式（這個真不常常用，相似if else語句的東西(new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" ）醜醜的語句。

      js寫在body裏，這個咱們知道，由於它會阻塞加載。

      去除重複腳本，線上環境下，去除空格註釋也可。

 

好吧，這麼多條，終於總結完了，除了服務器上的設置，其餘的已經基本搞清楚怎麼回事了，之後多接觸，多學習，多搗鼓。