標籤：代碼執行 去除 檔案 圖片壓縮 magic arw 好處 改善 inner
一、什麼是前端
效能最佳化 從使用者訪問資源到資源完整的展現在使用者面前的過程中，通過技術手段和最佳化策略，縮短每個步驟的處理時間從而提升整個資源的訪問和呈現速度。 二、為什麼要做前端效能優 提升網站效能，提升使用者體驗 三、前端效能最佳化的原則 1、因地制宜 2、不出bug 四、從瀏覽器發起請求到頁面能正常瀏覽都有哪些階段 預先處理——>DNS解析——>建立串連——>發起請求——>等待響應——>接受資料——>處理元素——>布局渲染 五、效能最佳化的具體方法一）內容層面
1、DNS解析最佳化（DNS緩衝、減少DNS尋找、keep-alive、適當的主機網域名稱）
2、避免重新導向
3、切分到多個網域名稱
4、杜絕404 二）網路傳輸階段
1、減少傳輸過程中實體的大小 請減少HTTP請求基本原理：當我們請求的網頁檔案中有很多圖片、CSS、JS甚至音樂等資訊時，將會頻繁的與伺服器建立串連，與釋放串連，這必定會造成資源的浪費，且每個HTTP請求都會對伺服器和瀏覽器產生效能負擔。解決方案：請看第二點。
1）緩衝 2）cookie最佳化 因為Cookie是本地的磁碟檔案，每次瀏覽器都會去讀取相應的Cookie，所以建議去除不必要的Coockie，使Coockie體積盡量小以減少對使用者響應的影響；
使用Cookie跨網域作業時注意在適應層級的網域名稱上設定coockie以便使子網域名稱不受其影響；
Cookie是有生命週期的，所以請注意設定合理的到期時間，合理地Expire時間和不要過早去清除coockie，都會改善使用者的回應時間。 3）檔案壓縮（Accept-Encoding：g-zip） 圖片資料最大關鍵是壓縮圖片 1）圖片的格式 2）使用base64（轉換為二進位編碼）嵌入 原理：引入圖片路徑，通過base64轉換為二進位，（定義一個函數），在其中通過轉換的編碼canvas繪製出一個新的圖片 3）壓縮圖片和使用圖片Sprite技術 基本原理:
註：其實壓縮圖片和圖片精靈是兩個方面的技術，可是既然都是關於圖片的最佳化還是放到一塊吧。
現在由於工作的細分，專業的前端工程師已經少有機會去切圖了，可是關於圖片壓縮還是得略微瞭解，一般圖片壓縮的方式有：
1.縮小圖片解析度；
2.改變圖片格式；
3.降低圖片儲存品質
2、減少請求的次數 1）檔案適當的合并 2）雪碧圖
3、非同步載入（並發,requirejs）
4、預先載入、延後載入、按需載入
5、請正確理解 Repaint 和 Reflow
註：Repaint 和 Reflow 也就是重繪和重排
基本原理：
Repaint(重繪)就是在一個元素的外觀被改變，但沒有改變布局(寬高)的情況下發生，如改變visibility、outline、背景色等等。
Reflow(重排)就是DOM的變化影響到了元素的幾何屬性（寬和高），瀏覽器會重新計算元素的幾何屬性，會使渲染樹中受到影響的部分失效， 瀏覽器會驗證DOM樹上的所有其它結點的visibility屬性，這也是Reflow低效的原因。如：改變窗囗大小、改變文字大小、內容的改變、瀏覽器視窗變化，style屬性 如果Reflow的過於頻繁，CPU使用率就會噌噌的往上漲，所以前端也就有必要知道 Repaint 和 Reflow的知識。 三）渲染階段
1、js放底部，css放頂部
基本原理：
註：這個是很基礎且必須遵循的知識點，可是為了文章的完整性勉為其難加進來吧，嘿嘿。
引入外部檔案好處是顯而易見的，而且是項目稍稍複雜一點的時候就有必要了這樣做了。
易維護、易擴充，方便管理和重複利用。
正確的方式：
JavaScript是瀏覽器中的霸主，為什麼這麼說，因為在瀏覽器在執行JavaScript代碼時，不能同時做其它事情， 即每次出現都會讓頁面等待指令碼的解析和執行（不論JavaScript是內嵌的還是外鏈的），JavaScript代碼執行完成後， 才繼續渲染頁面。這個也就是JavaScript的阻塞特性。
因為這個阻塞的特點，建議把JavaScript代碼放到標籤以前，這樣既能有效防止JavaScript的阻塞，又能使得頁面的HTML結構能更快的釋放。
2、減少重繪和迴流
3、合理使用Viewport 等meta頭部
4、減少對DOM的操作 原理：對DOM操作的代價是高昂的，這在網頁應用中的通常是一個效能瓶頸 在《高效能JavaScript》中這麼比喻：“把DOM看成一個島嶼，把JavaScript(ECMAScript)看成另一個島嶼，兩者之間以一座收費橋串連”。 所以每次訪問DOM都會教一個過橋費，而訪問的次數越多，交的費用也就越多。所以一般建議盡量減少過橋次數。 減少對DOM元素的查詢和修改，查詢時可將其賦值給局部變數。
註：在IE中:hover會降低響應速度 四）資料轉送類型
使用JSON格式來進行資料交換
基本原理：
JSON是一種輕量級的資料交換格式，採用完全獨立於語言的文字格式設定，是理想的資料交換格式。同時，JSON是 JavaScript原生格式， 這意味著在 JavaScript 中處理 JSON資料不需要任何特殊的 API 或工具包。
與XML序列化相比，JSON序列化後產生的資料一般要比XML序列化後資料體積小，所以在Facebook等知名網站中都採用了JSON作為資料交換方式。 JS操作JSON：
在JSON中，有兩種結構： 對象和數組。
一個對象以 “ { ” 開始，“ } ” 結束。每個“名稱”後跟一個 “ : ” ；“名稱/值 對”之間使用 “ , ”（逗號）分隔。 名稱用引號括起來；值如果是字串則必須用引號括起來， 數值型則不需要。如：
var obj={"name":"darren","age":24,"location":"beijing"}
數組是值（value）的有序集合。一個數組以 “ [ ” 開始， “ ] ” 結束。值之間使用 “ , ” （逗號）分隔。如：
var jsonlist=[{"name":"darren","age":24,"location":"beijing"},{"name":"weidong.nie","age":24,"location":"hunan"}];
對這種數組和對象字面量的操作是非常方便且高效的。如果預Crowdsourced Security Testing道JSON結構的情況下，使用JSON進行資料傳遞簡直是太美妙了， 可以寫出很實用美觀可讀性強的代碼。如果你是純粹的前台開發人員，一定會非常喜歡JSON。 五）指令碼執行階段
1、緩衝節點，盡量減少節點的尋找
2、減少節點的操作（innerHTML）
3、避免無謂的迴圈，break、continue、return的適當使用
4、事件委託（請看 三） 下面的 4）
原理：事件委託就是利用事件冒泡，只指定一個事件處理常式，就可以管理某一類型的所有事件。（簡單來說就是委託給父元素來做）
web前端效能最佳化
