web前端性能優化總結

根據web訪問流程的各個階段進行總結：

1. 瀏覽器緩存  2.查詢DNS  3.創建鏈接   4.發送請求   5.等待響應   6.接收數據   7.處理元素   8.渲染元素  

 

          

1. 瀏覽器緩存

查詢cache: 讀取cache或發送304請求。

優化規則-- 添加Expire或Cache-Control

應用於不常常變化的組件，包括腳本、樣式表、Flash組件、圖片
Expires和Cache-Control

 

2. 查詢DNS

   1. DNS緩存     瀏覽器DNS緩存 計算機DNS緩存 服務器DNS緩存（TTL）

                         當緩存時間長時：減小DNS的重複查找，節省時間

                         當緩存時間短時：及時檢測網站服務器的變化，保證正確性

   2. 減小DNS查找   

       當客戶端的DNS緩存爲空時，DNS查找的數量與Web頁面中惟一主機名的數量相等。減小惟一主機名的數量就能夠減小DNS查找的數量。較少的域名來減小DNS查找（2-4個主機）

 

3.創建鏈接

  3.1 使用內容分發網絡CDN

   在離用戶最近的地方放置一臺性能好連接順暢的副本服務器，讓用戶可以以最近的距離，最快的速度獲取內容。

3.2 用域名劃分頁面內容

按頁面內容劃分域名，在合適的資源服務器上存放文件

 

 

4.發送請求

4.1 減小HTTP請求

      合併文件：圖片（CSS Spirite），css文件合併，js文件合併

4.2 避免404錯誤

4.3 不要使用frameset,少使用過iframe

搜索引擎不友好、即時內容爲空，加載也須要時間、會阻止頁面加載

禁止使用iframe引入外部資源，不包括allyes廣告，不包括about:blank的空頁面。

 

5.等待響應

5.1 避免重定向(多一次請求就多費時間）

     重定向：原始請求被從新轉向到了其它請求

 

 

6.接收數據（針對上線版本）

6.1 壓縮組件

    HTML文檔，腳本和樣式表，XML和JSON的文本響應，壓縮

6.2 最小化css和js文件

     去除沒必要要的空白符，格式符，註釋符

     簡寫方法名，參數名，壓縮js腳本

 

 

6.3 儘可能 使用外部的Js和Css文件

儘量使用外部Js和Css，由於咱們目前大部分Js和Css都作了Gzip和緩存技術，能夠充分利用。

使用外部文件優勢： 提升複用性和可維護性，減少頁面體積，

寫在頁面內有點：較少頁面請求，提高頁面渲染速度。

寫在頁面內狀況：只應用於一個頁面，頁面不常常被訪問到，腳本和樣式不多。

 

6.4 儘可能縮減頁面大小

      頁面必須小於150k(不含圖片）

      靜態文件是否gzip,圖片是否壓縮優化過。

 

7. 處理元素

不要對image和pdf等二進制文件進行gzip壓縮

 

  8.渲染元素       

8.1  CSS樣式表文件放在頁面頂部 

8.2  js腳本文件放在頁面底部

8.3 優化圖片

儘可能使用png/gif格式的圖片，png的圖片優先，可是必須注意如要兼容IE6，則png使用必定要注意透明問題。

圖片在上次前必定要先用工具壓縮優化（png、jpg）

8.4 移出重複腳本

8.5 避免迴流：

 

1.複雜的表現變化，如動畫，讓它脫離文檔流，用絕對定位或 fixed 定位來完成。脫離文檔流後不會形成任何迴流。

2.避免沒必要要的複雜的 CSS 選擇器，尤爲是後代選擇器（descendant selectors），由於爲了匹配選擇器將耗費更多的 CPU。

2. 如下這些屬性，只要是改動了他們的值，就會形成迴流，建議將他們合併到一塊兒操做，能夠減小回流的次數。這些屬性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight；scrollTop、scrollLeft、scrollWidth、scrollHeight；clientTop、clientLeft、clientWidth、clientHeight；getComputedStyle() 、currentStyle（）。

3. Javascript控制樣式的最優解，不要直接修改具體CSS樣式，經過編碼class來改變樣式，

8.4 避免CSS Expressions(表達式）  影響瀏覽器渲染時間

 

 

 

 

其它注意:

       動態加載和渲染非關鍵區域

在頁面中某些區域並非用戶重點關注的區域，例如頁面的廣告，一些統計信息等，此類內容能夠等待頁面關鍵區域加載後經過javascript代碼動態加載和顯示。

       謹慎使用iframe

iframe有兩個缺點：1，iframe會阻塞主頁面的Onload事件；2，iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript動態給iframe添加src屬性值，這樣能夠能夠繞開以上兩個問題。