---
tags: handsup, handsup-seller
---

# 賣家直播頁優化

## 問題分析

在開啟抽獎功能後，以下的 jobs 會讓瀏覽器的 cpu usage rate 飆高，導致 chrome 的 UI thread 被 block 住：

1. `src/views/Post/components/comments/index.vue` 中，`analysedComments` 使用過度，每次 pubnub 收到訊息就會觸發 re-render。computed 的 cache 完全沒有作用。
2. 基於 `analysedComments` 的實作，每次 pubnub 訊息進來會有 `O(n^3)` 的 operations。
3. 每次 component re-render 之前，`analysedComments` 都會有大量的的計算，導致 event loop queue 沒辦法即時 pop job 到 stack。因為每個 job 要處理的太多。導致 re-render 效能下降。

## Tasks

1. 把 pubnub subscribe 這段 mock 掉
2. 重構 `src/views/Post/components/Comments/index.vue` 中的 `analysedComments` 方法。每一個 pubnub message triggers `O(n^3)` operations 與 `O(n)` 的 regular expression 的 matching。
3. 執行 `analysedComments` 這個 method 會 iterate 所有 comments 並做 normalize。所以如果有 m 個訊息，就會做 O(m * n) 次的 message normalize。這個應該要可以做優化。
4. 嘗試使用 worker 來做 message analysing。當 message analyse 完後再把 message post 回 UI thread，只 re-render 那一個 message DOM 跟 message list，降低 UI thread 的 loading。
5. 檢查 message DOM 跟 message list DOM。盡量把這兩個 DOM 的需要 re-render 的 DOM 結構簡單化。