# 前端項目上 Web Worker 實踐 - 鍾恆
###### tags: `jsdc2019`

{%hackmd @JSDC-tw/2019-announcement %}

> Start here

## 使用web worker情境
- window==X== document==X==
- 多線程併行 不影響主線程
- 多線程測試：https://toxic-johann.github.io/compress-kitten-demo/
- Transferable
- 卡頓測試：https://toxic-johann.github.io/page-lag-demo -> 將卡頓留在web worker
- 多任務串行轉並行（少）必須獨立

## 選型
- 多任務串行轉並行
- 多任務之間需要沒有依賴關係
- 多任務的調度會有一定的難度
- 這種場景比較少
- 大運算量任務避免影響主線程
- 傳輸會不會有性能問題
- 異步操作會不會有邏輯問題

## 性能問題
> 線程間傳遞的 postMessage發送&接收 是否會早成卡頓？
- postMessage
- Object深度廣度影響
- [推薦文章](https://dassur.ma/things/is-postmessage-slow/)
- 在巨量資料級別才會造成阻塞 (up to 10k)
- 是否有動畫渲染 v.s 數據量的承受度10k ->100k
- 屬於task -> 異步問題

## 優化主線成執行效率
- 分段傳輸
- 傳遞行為而不是數據本身
- 異步的衝突處理
- 失敗 超時處理

## web worker 支持度
- worker exist?
- can be establish?
- can communicate?

SUbstitution:
- Service worker
Offscreen camvas

Twitter: https://twitter.com/toxic_johann
Github: https://github.com/toxic-johann