在瀏覽器位址列輸入乙個url後，瀏覽器會向伺服器傳送請求，伺服器正確返回資料後，資料以頁面的形式被渲染至瀏覽器上，這是乙個非常常見的場景，如果等待時間較長，使用者體驗會非常不好，所以這個時候就需要做效能優化。
效能優化的目的就是盡量縮小從請求到成功渲染的時間，從請求到成功渲染會經歷dns解析、建立tcp連線、傳送http請求並得到響應、頁面渲染，所以可以從以下幾個角度出發，去實現前端效能優化。
http請求
合理使用瀏覽器快取，對於重複內容，強制瀏覽器在本地快取這些檔案，（瀏覽器快取
）使用壓縮元件（webpack、gulp）
避免重定向
cdn託管
cdn的全稱是content delivery network，即內容分發網路。其目的是通過在現有的internet中增加一層新的網路架構，將**的內容發布到最接近使用者的網路「邊緣」，使使用者可以就近取得所需的內容，提高使用者訪問**的響應速度。
使用者在自己的瀏覽器中輸入要訪問的**的網域名稱，瀏覽器向本地dns請求對該網域名稱的解析，本地dns將請求發到**的主dns，主dns根據一系列的策略確定當時最適當的cdn節點，並將解析的結果（ip位址）發給使用者，使用者向給定的cdn節點請求相應**的內容。
新增expire/cache-control頭
一般應用中，我們對靜態內容新增expires，對動態內容設定cache-control。假設兩者均設定為時間常數的話，前者會被後者覆蓋掉
瀏覽器響應速度
瀏覽器渲染機制
基本概念：
詳細流程：
當瀏覽器獲得html檔案後，會自上而下的載入，並在載入過程中進行解析和渲染，在獲取資源檔案的過程中，如果遇到了外部css檔案和，瀏覽器會另外傳送乙個請求，來獲取css檔案和相應的，這個請求時非同步的，並不會影響html檔案；如果遇到了js檔案，html檔案會掛起渲染的過程，等待js載入完畢後，html檔案會再繼續渲染（js可能會影響dom結構，可能會導致html資源白白載入，所以html要等待js檔案，為了網頁載入的快一點，一般吧js檔案寫在底部body標籤內）。
tips：回流和重繪分別就是觸發了layout和painting環節
回流：引起dom樹重新計算的行為，以下操作會引起回流
重繪：乙個元素的外觀變化引起的瀏覽器行為，例如改變visibility、outline、背景色等屬性。瀏覽器會根據元素的新屬性重新繪製，使元素呈現新的外觀。重繪不會帶來重新布局，並不一定伴隨回流。
回流是非常容易影響效能的因素，所以合併多次改變樣式的操作，使用類名操作，讓需要多次改變的元素脫離文件流，需要獲得哪些可能會引起瀏覽器回流的屬性值時，快取變數都可以優化效能。
前端效能優化
1.減少http請求次數 css sprites 在國內很多人叫css精靈，是一種網頁應用處理方式。它允許你將乙個頁面涉及到的所有零星都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言，不高於200kb的單張的所需載入時間基本是...
前端效能優化
在開發好頁面後，如何讓頁面更好更快的執行 從前端的角度來看，效能可以分為兩個方向 從使用者角度來看，乙個是頁面載入的很快，另乙個是頁面使用起來非常流暢 輸入了url 瀏覽器開始解析 查詢本地快取 dns解析 建立連線 伺服器處理 伺服器響應 客戶端收到響應 解析html 然後開始渲染頁面 使用者可以...
前端效能優化
隨著現在 越來越酷炫，各種，資源庫，動畫等等用的越來越多，在使用者視覺和功能的提公升的同時，效能也成為乙個必須考慮的點。有人說 乙個 開啟時間超過8s，網民就會流失70 以上。這種說法我覺得不是很正確的，除非是非常重要 必須要使用的 否則超過5s我基本直接關了，體驗太差。所以，使用者 忍讓 是有極限...