總結下前端優化

前端優化分爲性能優化 和 代碼優化

首先說下性能優化：

1. 減小HTTP請求，這個你們應該都知道吧，具體經過什麼樣的途徑來減小請求呢

•  CSS Sprites,最經常使用的方式。一個網頁中有N個icon 時，單獨請求就會有N多個HTTP請求，這極大的影響了頁面的加載時間，若是咱們合併成一個圖片，就會好太好了。
• 圖片地圖： map標籤訂義一個客戶端圖像映射，圖像映射（image-map）指帶有可點擊區域的一幅圖像。這是在全部主流瀏覽器中均可以兼容的一個標籤屬性。

  <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
  
         <map name="planetmap" id="planetmap">
                  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
                  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
                  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
         </map>
  

  實現圖像映射的關鍵屬性是area ，area元素永遠嵌套在 map 元素內部，可定義圖像映射中的區域。 <img>中的 usemap 屬性可引用 <map> 中的 id 或 name 屬性（取決於瀏覽器），因此咱們應同時向 <map> 添加 id 和 name 屬性。

　　<area> 標籤的 coords 屬性定義了客戶端圖像映射中對鼠標敏感的區域的座標。座標的數字及其含義取決於 shape 屬性中決定的區域形狀。能夠將客戶端圖像映射中的超連接區域定義爲矩形、圓形或多邊形等

•  （不建議此種）內聯圖片和腳本使用data:URL（Base64編碼）模式直接將圖片包含在Web頁面中而無需進行HTTP請求。可是此種方法存在明顯缺陷：- 不受IE的歡迎；- 圖片太大不宜採用這種方式，由於Base64編碼以後會增長圖片大小，這樣頁面總體的下載量會變大；- 內聯圖片在頁面跳轉的時候不會被緩存。（大圖片可使用瀏覽器的本地緩存，在首次訪問的時候保存到瀏覽器緩存中，典型的是HTML5的manifest緩存機制以及LocalStorage等）。
• 合併css,能合併的儘可能合併，grunt,gulp等好多方式能夠處理

    2.使用內容發佈網絡（CDN）

     什麼是CDN，是分佈在不一樣位置的服務器，主要存放靜態資源（圖片,css, js等），以便用戶更加快速的訪問內容。

    3.添加本地緩存

     加入本地緩存，在第一次訪問時，把靜態資源緩存到瀏覽器，第二次訪問不會再次發送請求。瀏覽自己的緩存機制並非十分靠譜，我的推薦用html5的manifest,只須要一個配置文件就ok。還有一種存放到localStorage的（我的沒有嘗試過）。

    4.壓縮資源文件

     壓縮文件大小，能夠提升加載速度

    5.將CSS樣式表放在頂部，把javascript放在底部

      把css文件放在中部或者底部，會形成網頁會出現短暫閃爍或者空白，這是由瀏覽器的運行機制決定的。把js放在也是爲了不出現此種問題，由於js會阻塞文件加載。

   6.避免使用CSS表達式

     css表達式是動態的css的一種很強大的方式，可是同時會帶來性能問題（慎用）。

  7.配置ETag

　　Etag在請求資源是會對比服務器上次返回的etag是否一致，若是一致，則請求爲304（協商緩存）。仍是推薦manifest的方式緩存。

  8.減小DNS查詢

   DNS查詢有時間開銷，一般一個瀏覽器查找一個給定主機名的IP地址須要20-120ms。緩存DNS：緩存DNS查詢能夠很好地提升網頁性能，一旦緩存了DNS查詢，以後對於相同主機名的請求就無需進行再次的DNS查找，至少短期內不須要。因此在使用頁面中URL、圖片、js文件、css文件等時，不要使用過多不一樣的主機名。

  9.使用外部javascript和CSS

  css 和 javascript 寫在html 中，首先不規範，致使複用率減低，第二，使用外部的js和css可讓瀏覽器緩存他們。

 10.精簡javascript

  最初始的精簡方式：就是移除沒必要要的字符減少js文件大小，改善加載時間。包括全部的註釋、沒必要要的空白字符。

  高級一點的精簡方式就是：混淆。
  它不但會移除沒必要要的字符，還會改寫代碼，好比函數和變量的名字會被改爲很短的字符串，這樣使js代碼更簡練更難閱讀。

 11.避免重定向

  重定向的英文是Redirect，用於將用戶從一個URL從新跳轉到另外一個URL。
  最多見的Redirect就是301和302兩種。

  在咱們實際開發中避免重定向最簡單也最容易被忽視的一個問題就是，設置URL的時候，最後的「/」，有些人有時候會忽略，其實你少了「/」，這時候的URL就被重定     向了，因此在給頁面連接加URL的時候切記最後的「/」不可丟。

12.刪除重複腳本

重複的js代碼除了有沒必要要的HTTP請求以外，還會浪費執行js的時間。
將你使用的js代碼模塊化，能夠很好地避免這個問題，至於js模塊化如何實現，如今有不少可使用的開源框架，我用的比較多的是咱們公司玉伯的Sea.js。

13.使Ajax可緩存

針對頁面中主動的Ajax請求返回的數據要緩存到本地，固然這個是針對短時間內不會變化的數據。若是不肯定數據變化週期的話，能夠增長一個修改標識的判斷，我正常處理過程當中會給一些Ajax請求返回的數據增長一個MD5值的判斷，每次請求會判斷當前MD5是否變化，若是變化了取最新的數據，若是不變化，則不變.

 

14，圖片lazyLoad

當遇到圖片略多的網頁時，若是在PC端還算勉強能夠，可是當移到移動端時，加載速度可想而知，還浪費了流量。比較好的辦法就是用戶瀏覽到可視區域才加載圖片。

 

代碼優化：

1.正確理解 Repaint 和 Reflow

Repaint：重繪，只是改變外觀，並不改變佈局結構。如： 背景色，outline等

Reflow：重排，DOM的變化影響到了元素的幾何屬性（寬和高），瀏覽器從新計算元素的寬高，會是渲染受到影響的部分失效。瀏覽器也會從新去驗證dom中其餘元素的visibility屬性。這也是reflow影響性能的緣由。例如：改變瀏覽器窗口大小，文字大小變化，結構調整，style屬性的改變等等。若是Reflow的過於頻繁，CPU使用率就會噌噌的往上漲，因此前端也就有必要知道 Repaint 和 Reflow的知識。

上面提到的重排，經過style屬性設置，每設置一次，就會reflow一次。最好經過class設置。當頁面須要有動畫效果是，儘可能使用fixed 或者absolute.不影響其餘元素。有時候需求不容許這樣，咱們只能儘量的縮小影響範圍。

2.減小DOM操做

在《高性能的javascript》的一書中，曾經這樣描述「把DOM當作一個島嶼，把JavaScript(ECMAScript)當作另外一個島嶼，二者之間以一座收費橋鏈接」，每過一次橋，就要交一次費。因此建議減小過橋次數。

DOM操做會使頁面repaint 和 Reflow，合理利用存儲變量。考慮大量dom循環的性能開銷，在循環結束時一次性插入。

減小查詢和操做dom元素，查詢時將值賦給全局變量。

3.使用JSON格式進行數據交換

json 是一種輕量級的數據交互格式，採用徹底獨立語言的文本格式。相對XML，體積小，簡單易懂

4.給圖片加上寬高

網頁中若是不給圖片加上寬高，會致使圖片原來位置會被其餘元素佔據，知道瀏覽器下載完圖片才顯示出來，頁面又會reflow，加上寬高，能夠減小頁面重繪，防止圖片縮放

5.少用全局變量

變量都層層查找的，最後纔會到window層。

6.減小對象查找，如a.b.c.d這種查找方式很是耗性能，儘量把它定義在變量裏；

7.對字符串進行循環操做，譬如替換、查找，應使用正則表達式；

8.類型轉換：把數字轉換成字符串使用」」 + 1，浮點數轉換成整型使用Math.floor()或者Math.round()； 

9.不使用EVAL；

10.避免404錯誤：特別要避免給404指定一個停擺頁面，不然全部404錯誤都將會加載一次頁面；

 

好了，知道的都總結了，歡迎你們指正