效能優化篇

2021-09-27 09:20:33 字數 1158 閱讀 1748

效能優化:

1.首先說出效能優化的點

2.在說到ssr的時候以及節流防抖的時候

ssr為什麼能減少白屏事件

目前前後端的分離的前端專案需要先載入靜態資源,再非同步獲取資料,最後渲染頁面,在這個過程中的前兩部頁面都是沒有資料的,影響了首屏的渲染速度,也就影響了使用者的體驗

nuxt.js的概念

節流防抖的區別以及手寫**

防抖是任務頻繁觸發的情況下,只有任務觸發的間隔超過指定間隔的時候,任務才會執行,一般用於輸入框實時搜尋;節流是規定函式在指定的時間間隔內只執行一次,一般用於scroll事件。

面試中經常會問這麼乙個問題:

從輸入url到頁面載入完成發生了什麼?

效能優化也就是上面的步驟加在一起時間盡可能的短。所以可以有兩大方向:

1.少載入檔案

2.少執行**

根據上圖來看效能優化需要:

1.減少重定向

3.dns prefetch預獲取(dns預解析,是提公升**的乙個辦法)

4.(tcp/ip和http的區別,tcp的三次握手)tcp是會保持資料的完整和有序,udp就是只發資料不管別的,所以tcp在資料報過大的時候會分片傳送,這個過程的優化就在於     

1.檔案的體積,各個檔案的壓縮 格式(svg,webp,png,jpg)

2.減少檔案的請求次數

檔案打包,http快取和資料快取(按照上面的圖這個不應該在dns前面嗎,dns前面指的是離線快取),懶載入(指的是?)

3.減小使用者和伺服器的距離

使用cdn

5.關於http快取

為檔案指定expires或者cache-control,使內容具有快取性,配置etag?session local之類的快取佔的是瀏覽器記憶體嗎

1.html用不快取

2.js長期快取,前端通過檔名來控制快取(加時間戳或者版本號或者檔案的雜湊值(webpack打包工具))

6.首屏ssr渲染(減少白屏事件)

7.少執行**(節流防抖的**實現)

防抖:比如使用者輸入校驗,停止輸入固定一段時間發一次請求(一般350毫秒)

懶載入?

虛擬列表virtual-dom和dom diff了解一下

效能優化篇

一 在使用gallery控制項時,如果載入的過多,過大,就很容易出現outofmemoryerror異常,就是記憶體溢位。這是因為android預設分配的記憶體只有幾m,而載入的如果是jpg之類的壓縮格式,在記憶體中展開時就會占用大量的空間,也就容易記憶體溢位。這時可以用下面的方法解決 view p...

iOS UI效能優化篇

列表元素高度動態計算會增加cpu消耗,可以進行快取,減少計算量 列表元素中的固定使用imagebyname獲取,系統會自動在記憶體中進行快取。減少列表元素的個數和層級,複雜ui可以考慮通過coregraphics繪製 減少透明view多層級使用,多個層級的透明view渲染會增加cpu消耗。離屏渲染需...

效能測試之效能優化篇

系統上線必會經歷測試階段,功能測試我們可以按照產品的設計原型去執行一條條測試用例來覆蓋產品功能點。但是在功能測試之外,如果乙個使用者介面層服務,我們還需要知道服務的效能指標以了解並評估這個服務在實際的生產環境中可以應對多大壓力,我們可以根據這個資料情況根據不用的場景時間去對應的增加機器節點或進行重構...