乙個專案只有乙個css，乙個js，使得不同網頁不必每次請求重複的css或者js內容。
並且使用打包工具可以壓縮資源檔案的大小，例如webpack、gulp、grunt等。
使用字型圖表或者svg圖替代傳統的png。
向量資源大小更小，渲染速度快，不存在放大後模糊的問題。
css的效能優於js；原生js的效能優於第三方外掛程式。
避免引入龐大的第三方庫後，只使用部分微小的功能。
巢狀的iframe頁面效能消耗更大，載入資源更多步驟在頁面中對應的位置放上佔位圖，開始載入時不使用http請求。
當頁面載入完畢後，檢查是否在可視區域，再載入資訊。
因為客戶端和服務端之間總是在傳遞cookie，所以需要減少本地cookie儲存內容的大小，並且避免每次傳送http請求都攜帶cookie。
json格式
多項資料使用json傳遞資料，比xml格式資料處理更方便，資源更小。
keep-alive
keep-alive是vue提供的乙個抽象元件，可以快取導航欄下的頁面元件，從而優化效能。
抽象元件在渲染完畢後不會被渲染成dom元素。
>
>
loading
>
keep-alive
>
被包裹在keep-alive中的元件的狀態將會被保留，即從其他分欄返回後，頁面位於跳轉前的位置。即快取並非處於活動狀態的例項，再次呼叫這些例項的，對應的快取將被復用。
但是快取會導致元件的陳舊化，即頁面不會被重新渲染，只保持第一次請求得到資料後的渲染結果。
強制重新整理元件的方法
include exclude 屬性
include
="booklists"
>
>
router-view
>
keep-alive
>
exclude
="indexlists"
>
>
router-view
>
keep-alive
>
表示只有name屬性為booklists的元件會被快取，其他元件不會被快取。
屬性exclude
表示只有name屬性為indexlists的元件不會被快取，其他元件都會被快取。
meta屬性
export
default[,
]
>
v-if
="this.$route.meta.keepalive"
>
router-view
>
keep-alive
>
v-if
="!this.$router.meta.keepalive"
>
keep-alive
>
const user =
}}
const user =
}
第三方外掛程式
前進重新整理，後退快取
減少閉包使用
閉包被使用後，其所在上下文的資源不會被釋放。
避免巢狀迴圈和死迴圈
避免遞迴、死遞迴
替換為尾遞迴
低耦合高內聚
requestanimationframes
替代傳統的定時器動畫
requestanimationframes原理
css放置於body上面，js放置於body下面
優先載入css
改變盒子層級
css設定定位後，使用z-index改變盒子的層級
link替代@import
@import是同步操作，link是非同步操作非同步載入提高總體載入並行度。
減少dom操作
減少dom的重繪和回流。
合併樣式的設定操作。
盡量將乙個動畫元素單獨設定為乙個圖層
（立flag寫文章)
h5新特性，儲存簡單資料。
（立flag寫文章)
前端效能優化
1.減少http請求次數 css sprites 在國內很多人叫css精靈，是一種網頁應用處理方式。它允許你將乙個頁面涉及到的所有零星都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言，不高於200kb的單張的所需載入時間基本是...
前端效能優化
在開發好頁面後，如何讓頁面更好更快的執行 從前端的角度來看，效能可以分為兩個方向 從使用者角度來看，乙個是頁面載入的很快，另乙個是頁面使用起來非常流暢 輸入了url 瀏覽器開始解析 查詢本地快取 dns解析 建立連線 伺服器處理 伺服器響應 客戶端收到響應 解析html 然後開始渲染頁面 使用者可以...
前端效能優化
隨著現在 越來越酷炫，各種，資源庫，動畫等等用的越來越多，在使用者視覺和功能的提公升的同時，效能也成為乙個必須考慮的點。有人說 乙個 開啟時間超過8s，網民就會流失70 以上。這種說法我覺得不是很正確的，除非是非常重要 必須要使用的 否則超過5s我基本直接關了，體驗太差。所以，使用者 忍讓 是有極限...