整個前端性能提升大致分幾類


1、靜態資源的優化

主要是減少靜態資源的加載時間,主要包括html、js、css和圖片。

a、減少http請求數:合並js、css、制作雪碧圖以及使用http緩存;

b、減小資源的大小:壓縮文件、壓縮圖片,小圖使用base64編碼等;

c、異步組件和圖片懶加載;

d、CDN加速和緩存(bootCND):客戶端可通過最佳的網絡鏈路加載靜態資源,提高訪問的速度和成功率。

(CDN:通過在網絡各處放置節點服務器構成的一層智能虛擬網絡,可將用戶的請求重新導向離用戶最近的服務節點上)

 

2、接口訪問的優化

1、http持久鏈接(Conection:keep-alive)

2、后端優化合並請求(比如在進入一個商品詳情頁的時候后端會提供一個接口獲取商品的基本信息,然后當用戶點擊假如購物車時)

3、冷數據接口緩存到localstorage,減少請求

 

3、頁面渲染速度的優化

1、由於瀏覽器的js引擎線程和GUI渲染線程是互斥的,所以在執行js的時候會阻塞它的渲染,所以一般

會將css放在頂部,優先渲染,js放在底部;

2、減少dom的操作:

a、vue中使用了虛擬DOM渲染方案,做到最小化操作真實的dom;

b、事件代理:利用事件冒泡原理,把函數注冊到父級元素上。

3、減少頁面的重繪和回流。

 

vue里:

1、souceMap關閉,只打包壓縮后的文件;

2、compression-webpack-plugin,並設置productGzip:true,開啟壓縮;

3、路由懶加載(加快首屏加載速度,缺點:把多個js分開打包,導致http請求數增多)

4、v-if和v-show:

v-if是懶加載,只有為true時才加載,false時不會占據布局空間

v-show:不管是true還是false都會渲染,並會占據布局空間,優點:減少頁面的重繪和回流。

5、為item設置key值:在列表數據進行遍歷渲染的時候,方便vue將新值和舊值做對比,只渲染變化了的部分。

6、組件細分(比如輪播組件、列表組件、分頁組件等):當數據變更時,渲染會加快;其次易於組件復用和維護。

7、使用loading和骨架屏加載,防止白屏和閃屏的情況。

8、服務端渲染:vue的頁面渲染,通過模板編譯,渲染出頁面,而不是直出html,對於首屏有較大的損耗。

服務端渲染:現在服務端進行整個html的渲染,再將整個html輸出到瀏覽器端。

9、DNS緩存,減少dns查詢時間。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM