Wireless Health

--- tags: Zyxel --- {%hackmd theme-dark %} # Wireless Health ## 2023-05 效能分析 ### 電腦硬體配備比較/Step(0) | 狀態 | 名稱 | CPU 型號 | CPU 頻率 | 記憶體大小 | 作業系統 | Benchmarks | 核心 / 線程 | | ---- | ------- | -------------------- | -------- | ---------- | ---------- | ---------- | ----------- | | 成功 | Adam | AMD Ryzen 5 4650U | 2.1 GHz | 16 GB | Windows 10 | 12796 | 6 / 12 | | 成功 | Ian | AMD Ryzen 5 4650U | 2.1 GHz | 16 GB | Windows 10 | 12796 | 6 / 12 | | 成功 | Toby | Intel Core i5-1135G7 | 2.4 GHz | 32 GB | Windows 10 | 9959 | 4 / 8 | | 失敗 | Shawn 2 | Intel Core i5-1135G7 | 2.4 GHz | 8 GB | Windows 10 | 9959 | 4 / 8 | | 成功 | Skye | Intel Core i5-4590 | 3.3 GHz | 28 GB | Windows 10 | 5355 | 4 / 4 | | 成功 | Jessie | Intel Core i5-8250U | 1.6 GHz | 8 GB | Windows 10 | 5892 | 4 / 8 | | 失敗 | CSO | Intel Core i7-8550U | 1.8 GHz | 8 GB | Windows 10 | 5939 | 4 / 8 | | 成功 | Skye 2 | Intel Core i5-7200U | 2.5 GHz | 12 GB | Windows 10 | 3395 | 2 / 4 | | 失敗 | Shawn 1 | Intel Core i5-4200U | 1.6 GHz | 12 GB | Windows 10 | 2182 | 2 / 4 | > "Benchmarks" 是指對於該 CPU 進行的效能測試所得到的評分。這個評分可以用來比較不同 CPU 的效能，數字越大代表效能越強。在這個表格中，Benchmarks 欄位顯示了該電腦所搭載的 CPU 的效能評分。 > "狀態" 是指頁面是否可以成功出現並且後續順暢使用 > **資料量使用 AP: 213,334 + Client: 616,150 = 總數 829,484** #### 硬體差異初步結論 CPU 或者記憶體有一種偏小都容易撞到"失敗", 屬於硬體環節無法對改善有實質的效益。 > GPT: 關閉其他應用程式節省記憶體, 或是擴大硬體配備 ### 乾淨的環境(clean environment)/Step(1) #### 純 Canvas 壓測 https://codepen.io/flymaple/full/zYJjgxK > GPT 負責大部分的程式撰寫, 因為這個壓測程式比較簡單 #### 結論 | 名稱 | CPU 型號 | CPU 頻率 | 記憶體大小 | 作業系統 | Benchmarks | 核心 / 線程 | | ------- | -------------------- | -------- | ---------- | ---------- | ---------- | ----------- | | Skye | Intel Core i5-4590 | 3.3 GHz | 28 GB | Windows 10 | 5355 | 4 / 4 | | 點數 | 記憶體 | 檔案大小 | 花費時間 | | --------- | -------- | -------- | -------- | | 1,000,000 | 25.73 MB | 312KB | 2s | | 1,000,000 | 31.10 MB | 312KB | 2s | | 1,000,000 | 26.70 MB | 312KB | 2s | | 1,000,000 | 28.29 MB | 314KB | 2s | | 1,000,000 | 26.65 MB | 312KB | 2s | | 名稱 | CPU 型號 | CPU 頻率 | 記憶體大小 | 作業系統 | Benchmarks | 核心 / 線程 | | ------- | -------------------- | -------- | ---------- | ---------- | ---------- | ----------- | | Shawn 1 | Intel Core i5-4200U | 1.6 GHz | 12 GB | Windows 10 | 2182 | 2 / 4 | | 點數 | 記憶體 | 檔案大小 | 花費時間 | | --------- | -------- | -------- | -------- | | 1,000,000 | 6.01 MB | 312KB | 4s > 記憶體計算方式可能不太準確, 暫不當參考依據 `window.performance.memory.usedJSHeapSize` > 花費時間一樣很漂亮, 所以純 canvas 效能是夠用的 #### Echarts 壓測 https://codepen.io/flymaple/full/vYVRGej > GPT 負責一些 function 的調整 #### 結論 | 名稱 | CPU 型號 | CPU 頻率 | 記憶體大小 | 作業系統 | Benchmarks | 核心 / 線程 | | ------- | -------------------- | -------- | ---------- | ---------- | ---------- | ----------- | | Skye | Intel Core i5-4590 | 3.3 GHz | 28 GB | Windows 10 | 5355 | 4 / 4 | | 點數 | 記憶體 | 檔案大小 | 花費時間 | | --------- | -------- | -------- | -------- | | 1,000,000 | 66.02 MB | 135KB | 1s | | 1,000,000 | 61.77 MB | 135KB | 1s | | 1,000,000 | 106.85 MB | 135KB | 1s | | 1,000,000 | 82.75 MB | 135KB | 1s | | 1,000,000 | 107.70 MB | 135KB | 1s | | 名稱 | CPU 型號 | CPU 頻率 | 記憶體大小 | 作業系統 | Benchmarks | 核心 / 線程 | | ------- | -------------------- | -------- | ---------- | ---------- | ---------- | ----------- | | Shawn 1 | Intel Core i5-4200U | 1.6 GHz | 12 GB | Windows 10 | 2182 | 2 / 4 | | 點數 | 記憶體 | 檔案大小 | 花費時間 | | --------- | -------- | -------- | -------- | | 1,000,000 | 57.17 MB | 703KB | 2s > 記憶體計算方式可能不太準確, 暫不當參考依據 `window.performance.memory.usedJSHeapSize` > 檔案大小會受到瀏覽器當下的大小影響 > 即使透過 Echart 還是可以很流暢的畫出 ### 將壓測部署在 Nebula GUI/Step(2) #### Echarts 壓測結論 | 名稱 | CPU 型號 | CPU 頻率 | 記憶體大小 | 作業系統 | Benchmarks | 核心 / 線程 | | ------- | -------------------- | -------- | ---------- | ---------- | ---------- | ----------- | | Shawn 1 | Intel Core i5-4200U | 1.6 GHz | 12 GB | Windows 10 | 2182 | 2 / 4 > 100萬，順暢畫出 #### NUI 結論 | 名稱 | CPU 型號 | CPU 頻率 | 記憶體大小 | 作業系統 | Benchmarks | 核心 / 線程 | | ------- | -------------------- | -------- | ---------- | ---------- | ---------- | ----------- | | Shawn 1 | Intel Core i5-4200U | 1.6 GHz | 12 GB | Windows 10 | 2182 | 2 / 4 > 10萬點就當機 or 快兩分鐘才畫出 > ⭐️找到關鍵點了，原因在 NUI⭐️ ngx-echarts 壓測尚未 ### 進一步研究 NUI/Step(3) ⭐⭐將所有功能所有參數都註解並逐一還原發現 symbolSize: 3, 超過這個數值並遇到某個量會重現卡頓的問題. ⭐⭐目前是將原先的 4 調整成 3, 後續若有需要可以依據某個 magic number 去動態設定這個值 ### 重現 symbolSize 問題/Step(4) ⭐⭐修改 Echarts 壓測程式將 symbolSize 改為 4, 重現 10萬卡頓問題 ## 補充 ### Echart 是用 Canvas 不是 SVG ### Cluster - 透過不同的 series 將 cluster 過的資料個別呈現, 可做到顯示出不同樣式(radius)的點 - 希望 B/E 可以將從 points 裡面做 cluster 處理 ``` 【origin response】 points: [ [epoch1, retry_rate, info], [epoch2, retry_rate, info], [epoch3, retry_rate, info], [epoch4, retry_rate, info], [epoch5, retry_rate, info], ] ``` ``` 【become new response】 cluster: [ [epoch100, retry_rate, info, cluster_level(radius1)], [epoch200, retry_rate, info, cluster_level(radius2)], ], points: [ [epoch1, retry_rate, info], ] ``` #### 如何找出 radius 最大值? (TBD) ### 數據資料 | Date | Org | Site | AP | Client | Total | | ---------- | ---- | ---- | ------- | ------- | ------- | | 2023-05-10 | 煙 | 低 | 219,758 | 180,820 | 400,578 | | | Fire | Su | 213,334 | 616,150 | 829,484 | ## UX 備案(TBD) ![GUI](https://hackmd.io/_uploads/SkNNsCYEn.png) 【A】 - 只顯示 setting - AP block 和 Client block 第一時間隱藏(展開時 call api) - AP / Client view 一次顯示一種(Tab) 【B】 - 只顯示 setting - AP block 和 Client block 第一時間隱藏(展開時 call api) - AP / Client view 同時展開 -- 【C】 - 只顯示 setting - AP block 和 Client block 第一時間隱藏(但是會用 lazy load 預先 call api, 不影響 settings) - AP / Client view 一次顯示一種(Tab) 【D】 - 只顯示 setting - AP block 和 Client block 第一時間隱藏(但是會用 lazy load 預先 call api, 不影響 settings) - AP / Client view 同時展開 -- E、F AP view 不會採用 lazy load 的方式, 因為順的情況用不到, 卡的情況, lazy load 回來還是卡【E】 - 顯示 setting + AP - Clinet 點選後展開(展開時 call api) 【F】 - 顯示 setting + AP - Clinet 點選後展開(但是會用 lazy load 預先 call api) -- G、H Client view 不會採用 lazy load 的方式, 因為順的情況用不到, 卡的情況, lazy load 回來還是卡【G】 - 顯示 setting + Client - AP 點選後展開(展開時 call api) 【H】 - 顯示 setting + Client - AP 點選後展開(但是會用 lazy load 預先 call api) ## ChatGPT - 前端性能優化 - **Web Worker**： 當需要對大量數據進行處理時，可以將計算密集型的部分放在 Web Worker 中處理，從而減少主線程的負擔，提高性能。 > TBD 例如，在 Scatter 圖中需要對大量數據進行計算，可以將計算部分放在 Web Worker 中進行，從而減少主線程的負擔，提高渲染性能。 - **虛擬列表：** 當需要顯示大量元素時，使用虛擬列表可以減少 DOM 元素的數量，從而提高性能。 > Filter - **分頁技術：** 當需要顯示大量數據時，使用分頁技術可以將數據分成多頁，只顯示當前頁面的數據，從而減少渲染的負擔，提高性能。 > Filter - 瀏覽器渲染優化 - **使用 GPU 加速：** 現代瀏覽器支持硬體加速，使用 GPU 可以提高渲染性能。如果可以使用 WebGL 繪製元素，可以大大提高渲染速度。。 > 無法要求使用者 - **使用 requestAnimationFrame：** requestAnimationFrame 可以幫助優化動畫效果，讓瀏覽器根據畫面刷新率進行渲染，從而提高性能。在繪製大量元素時，可以使用 requestAnimationFrame 來進行分段渲染，從而提高渲染性能。。 > ECharts 已經是了 - **使用 Canvas 的 drawImage 方法：** Canvas 的 drawImage 方法可以將一個 Canvas 元素或一個圖像作為紋理繪製到 Canvas 上，這樣可以減少重繪和回流的次數，從而提高渲染性能。。 > Maybe 可以在其他地方繪製完以後用圖片的方式呈現, 但是就不能互動了 - 服務端優化 - 壓縮、緩存、資料庫 << 我覺得在 canvas 這個問題上沒辦法這樣做 - Echarts 提供哪些優化方式 - Canvas / WebGL - Lazyload - DataZoom - Web Worker - 選擇不同的圖表呈現 ## 參考資料 ### Echarts 壓測模型 Sctter-nebula: https://echarts.apache.org/examples/en/editor.html?c=scatter-nebula ### Cluster Sctter-effect: https://echarts.apache.org/examples/zh/editor.html?c=scatter-effect

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.