---
# System prepended metadata

title: Wireless Health
tags: [Zyxel]

---

---
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 的效能評分。

> "狀態" 是指頁面是否可以成功出現並且後續順暢使用

> <span style="color: red;">**資料量使用 AP: 213,334 + Client: 616,150 = 總數 829,484**</span>

#### 硬體差異初步結論

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`
  
> <span style="color: red;">花費時間一樣很漂亮, 所以純 canvas 效能是夠用的</span>

#### 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`
  
> 檔案大小會受到瀏覽器當下的大小影響
  
> <span style="color: red;">即使透過 Echart 還是可以很流暢的畫出</span>

### 將壓測部署在 Nebula GUI/Step(2)

#### Echarts 壓測結論

| 名稱    | CPU 型號             | CPU 頻率 | 記憶體大小 | 作業系統   | Benchmarks | 核心 / 線程 |
| ------- | -------------------- | -------- | ---------- | ---------- | ---------- | ----------- |
| Shawn 1 | Intel Core i5-4200U  | 1.6 GHz  | 12 GB      | Windows 10 | 2182       | 2 / 4  

> <span style="color: red;">100萬，順暢畫出</span>

#### NUI 結論

| 名稱    | CPU 型號             | CPU 頻率 | 記憶體大小 | 作業系統   | Benchmarks | 核心 / 線程 |
| ------- | -------------------- | -------- | ---------- | ---------- | ---------- | ----------- |
| Shawn 1 | Intel Core i5-4200U  | 1.6 GHz  | 12 GB      | Windows 10 | 2182       | 2 / 4  

> <span style="color: red;">10萬點就當機 or 快兩分鐘才畫出</span>

> <span style="color: red;">⭐️找到關鍵點了，原因在 NUI⭐️</span>



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

- 前端性能優化
    - <span style="color: red;">**Web Worker**：</span>
    當需要對大量數據進行處理時，可以將計算密集型的部分放在 Web Worker 中處理，從而減少主線程的負擔，提高性能。
        > TBD

    例如，在 Scatter 圖中需要對大量數據進行計算，可以將計算部分放在 Web Worker 中進行，從而減少主線程的負擔，提高渲染性能。

    - <span style="color: red;">**虛擬列表：**</span>
    當需要顯示大量元素時，使用虛擬列表可以減少 DOM 元素的數量，從而提高性能。
        > Filter

    - <span style="color: red;">**分頁技術：**</span>
    當需要顯示大量數據時，使用分頁技術可以將數據分成多頁，只顯示當前頁面的數據，從而減少渲染的負擔，提高性能。
        > Filter

- 瀏覽器渲染優化
    - <span style="color: red;">**使用 GPU 加速：**</span>
    現代瀏覽器支持硬體加速，使用 GPU 可以提高渲染性能。如果可以使用 WebGL 繪製元素，可以大大提高渲染速度。。
        > 無法要求使用者

    - <span style="color: red;">**使用 requestAnimationFrame：**</span>
    requestAnimationFrame 可以幫助優化動畫效果，讓瀏覽器根據畫面刷新率進行渲染，從而提高性能。在繪製大量元素時，可以使用 requestAnimationFrame 來進行分段渲染，從而提高渲染性能。。
        > ECharts 已經是了

    - <span style="color: red;">**使用 Canvas 的 drawImage 方法：**</span>
    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