前端性能優化

通常咱們用性能去形容什麼呢？好比：咱們會說這個手機性能不錯，這個電腦性能不錯哇~
那這裏的性能主要是指什麼呢？
咱們評價計算機性能又主要從哪些方面進行評價呢？
快多是咱們的第一訴求了。其後續看不見的字長，或者說明書上可見的內存儲器的容量，外存儲器的容量可能仍是一些次要東西。
同理可見的是，快也是咱們前端性能的訴求點。
咱們知道，網站訪問的過程從用戶輸入網站域名開始，經過DNS解析找到目標服務器，目標服務器收到請求後執行服務器及數據庫
等一系列操做，並將響應數據通過互聯網發送到用戶瀏覽器中，最終由瀏覽器處理響應數據並完成網頁的渲染呈現。
在網頁的資源請求與加載階段，咱們主要是要實現網站的快速響應，首先須要考慮的就是減小資源訪問及加載階段所消耗的時間。
在網頁的渲染階段，網頁的渲染速度就很重要了，主要是提升瀏覽器渲染的性能，最須要避免的就是從新佈局（重繪後的合併像【transform
等的合併通常發生在GPU硬件渲染中】）。
最後javascript腳本的執行速度也是優化過程當中須要注意的。
針對上述優化的方向，雅虎性能優化法則提出了一些優化的方法
（1）減小HTTP請求（經過nignx配置Combo合併HTTP請求）
（2）壓縮js,css代碼
（3）去除重複引用的腳本
（4）可緩存的Ajax
（5）延遲加載非必要的腳本
（6）預加載（指在瀏覽器空閒階段預加載未來用戶可能會訪問到的內容）
（7）減小DOM元素的數量
（8）減小DOM訪問次數（對須要常常訪問的DOM對象緩存）
（9）避免使用iframe（即便引入頁面內容爲空，也須要消耗時間下載，會阻止頁面加載，而且缺乏語義）
（10）優化圖像（壓縮圖片，將 GIF圖片格式轉換成png格式）
（11）優化css Sprites
（12）不要在html中縮放圖片(在HTML中設置的圖片長寬小於實際下載圖片長寬，很顯然實際加載的圖片比須要的圖片體積更大)
（13）減小cookie體積(cookie信息經過HTTP文件頭在服務器和瀏覽器之間傳遞，所以保持Cookie儘量的小，能夠減小用戶的數據傳輸時間)
提供好的用戶體驗一直是web開發者追求的目標，一個大量引用靜態資源的web頁面，能夠經過緩存將圖片腳本樣式文件保存在客戶端，使其
不用每次都向服務器請求，能夠節省大量時間。（1）客戶端緩存，在請求一個新的文件時，瀏覽器發送HTTP請求到服務端，接到服務端的響應後
瀏覽器會將請求的資源存儲在本地。(2)HTTP頭部有緩存的相關屬性。
咱們也能夠經過資源按需加載的方式來提高應用的性能。
（1）基於requireJS的按需加載
RequireJS是一種AMD的實現，採用異步加載模塊，模塊的加載不會影響後續代碼的運行。AMD經過require函數加載模塊，解決了模塊之間的依
賴關係提高應用的總體質量和性能。

（2）基於webpack按需加載
CommonJS規範自己採用同步加載模塊，但也提出了Module/Async/A規範，定義了一套require.ensure用於處理異加載。
webpack做爲一個模塊加載器同時也是一個打包工具，因此開發者不須要特地去定義模塊，webpack會使用Code Splitting技術實現分批打包和按需加載。

（3）圖片懶加載
原理：經過監聽頁面滾動事件，當圖片進入可視區，再進行圖片的加載
除了上述以外，咱們還能夠根據不一樣網絡類型進行優化，
（1）進行弱網圖片優化（圖片一般是一個頁面上最消耗網絡資源的內容，經過雪碧圖，圖片格
式，字體圖標等方面進行優化）。
（2）弱網緩存優化（在單頁應用中，可能會同時拉取多個接口的數據，在2G網絡中，頁面會長時間處於加載數據的
狀態，開發者能夠經過選擇在內存中緩存請求數據，解決這個問題）。
Web優化黃金法則中指出，對於訪問一張網頁只有10%-20%的時間花在下載服務器響應的HTML文件，80%-90%的時間用在前端資源的下
載和執行。以上是幾種優化的方法，但願可以應用於互聯網產品中，持續的保持站點的快速響應和流暢交互。

本文提取自（移動web前端高效開發實戰）
下圖是腦圖