1.載入檔案時間少,少載入檔案
1. dns prefetch 頁面用到網域名稱可以dns預請求
2. preload 首屏需要的關鍵檔案css,js可以預先載入
3. prefetch 首屏用不到的檔案,頁面載入時用不到的檔案,後面頁面可能會用到,可以延遲載入
【可以配合webpack 元件懶載入,路由懶載入等】
4. iconfont 雪碧圖 小處理方式 減少請求, 懶載入 [的選擇 png, jpg, svg, iconfont, base64,webp等]
5. cache control, expires快取策略 強快取和協商快取, base64記憶體快取,離線快取
6. gzip壓縮 [webpack的js,css壓縮合併,壓縮等]
7. cdn
8. 本地儲存 [盡量不要用cookie]
10. 庫引入的懶載入,例如echarts這種重量級包,或者部分引入
11. 伺服器端渲染 [nuxt, next]
2.**執行優化
1. 節流和防抖
節流,一定時間內只執行一次
防抖,當持續觸發事件時,一定時間段內沒有再觸發事件,事件處理函式才會執行一次,如果設定時間到來之前,又觸發了事件,就重新開始延時
2. 回流和重繪
3. **層次的優化 purecommponent,shouldcomponentupdate,v-if/v-show,key的指定等
4. 虛擬列表 react-virtualized
前端效能優化
1.減少http請求次數 css sprites 在國內很多人叫css精靈,是一種網頁應用處理方式。它允許你將乙個頁面涉及到的所有零星都包含到一張大圖中去,這樣一來,當訪問該頁面時,載入的就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言,不高於200kb的單張的所需載入時間基本是...
前端效能優化
在開發好頁面後,如何讓頁面更好更快的執行 從前端的角度來看,效能可以分為兩個方向 從使用者角度來看,乙個是頁面載入的很快,另乙個是頁面使用起來非常流暢 輸入了url 瀏覽器開始解析 查詢本地快取 dns解析 建立連線 伺服器處理 伺服器響應 客戶端收到響應 解析html 然後開始渲染頁面 使用者可以...
前端效能優化
隨著現在 越來越酷炫,各種,資源庫,動畫等等用的越來越多,在使用者視覺和功能的提公升的同時,效能也成為乙個必須考慮的點。有人說 乙個 開啟時間超過8s,網民就會流失70 以上。這種說法我覺得不是很正確的,除非是非常重要 必須要使用的 否則超過5s我基本直接關了,體驗太差。所以,使用者 忍讓 是有極限...