資訊專欄INFORMATION COLUMN
摘要：寫在最前原文首發于作者的知乎專欄中間件思想遇見的靈感附，感興趣的同學可以知乎關注，進行交流。其中，最重要的一個便是對多線程的支持。在中提出了工作線程的概念，并且規范出的三大主要特征能夠長時間運行響應理想的啟動性能以及理想的內存消耗。
寫在最前
原文首發于作者的知乎專欄：React Redux 中間件思想遇見 Web Worker 的靈感（附demo），感興趣的同學可以知乎關注，進行交流。
熟悉 React 技術棧的同學，想必對 Redux 數據流框架并不陌生。其倡導的單向數據流等思想獨樹一幟，雖然樣板代碼會有一定程度上的增多，但是對于開發效率和調試效率的提高是顯著的。同時還帶來了很多諸如 “時間旅行”，“ undo/redo ” 等黑魔法。
其實這還只是表象。如果你深入去了解 Redux 的設計理念，探索中間件奧秘，玩轉高階 reducer 等等，迎接你的就會是另一扇門。透過它，函數式編程思想之光傾斜如注。
思想背景但是隨著這個 web app 復雜度的提升，數據計算量壓力徒增，你所設計的 Reducer 變得臃腫不堪。好吧，我們可以拆分 Reducer 使得代碼看上去更加舒服。可是計算量呢？也許有一些“夢魘”，瓶頸般永遠無法消除。
冥冥之中，“各種處理計算既然注定在同一時空，那么能否永遠平行？”
曾幾何時，你是否聽說過 JS 單線程異步？聽說過瀏覽器卡頓或卡死？聽說過 60 fps？
其實一個很嚴峻的事實是：根據 60 fps 計算，每一幀留給我們 JS 執行的時間為 16ms（甚至更少）。那么一旦當 Reducer 計算時間過長，必然會影響瀏覽器渲染。
多線程思路關于瀏覽器主線程、render queue、event loop、call stack 等內容，本文不再復述，因為里面的知識完全都夠寫一本書了。假定讀者對其有一二認知，那么你也不難理解我們即將登場的救星—— Web Worker!
我們先來簡單認識一下 web worker：
2008 年 W3C 制定出第一個 HTML5 草案開始，HTML5 承載了越來越多嶄新的特性和功能。其中，最重要的一個便是對多線程的支持。在 HTML5 中提出了工作線程（Web Worker）的概念，并且規范出 Web Worker 的三大主要特征：
能夠長時間運行（響應）；
理想的啟動性能；
以及理想的內存消耗。
Work 線程可以執行任務而不干擾用戶界面。
于是，腦洞大開，能否將我們的 Redux Reducer 計算狀態部分放進 Worker 線程中處理呢？
答案是肯定的。
那么要如何實施呢？
我們先來看一下經典的 Redux workflow，如下圖：
如果要接入 Web Work，那么我們改動流程圖如下：
具體實現和一個demo當然，有了思路，還需要在實戰中演練。
我使用 “N-皇后問題” 模擬大型計算，并且實現的 demo 中可以任意設置 n 值，增加計算耗時。
如果你不理解此算法也沒有關系，只需要知道N-皇后問題這個算法的計算耗時很長，且和 n 值相關：n 越大，計算成本越大。
除了一個極其耗時的計算，頁面中還運行這么幾個模塊，來實現復雜的渲染邏輯操作：
一個實時每16毫秒，顯示計數（每秒增加1）的 blinker 模塊；
一個定時每500毫秒，更新背景顏色的 counter 模塊；
一個永久往復運動的 slider 模塊；
一個每16毫秒翻轉5度的 spinner 模塊
這些模塊都定時頻繁地更新 dom 樣式，進行大量復雜的渲染計算。正常情況下，由于 JS 主線程進行N-皇后計算，這些渲染過程都將被卡頓。
同時，我設置“N-皇后問題”的 n 值，來觀察在計算時這些模塊的表現（是否卡頓）。在不開啟 Work 線程的情況下，n 設置為13時，有 gif 圖，左半部分：
我們非常清晰地看到：由于瀏覽器 call stack 進行 n=13 的皇后問題計算，而無法“按時”渲染，所以造成了這幾個模塊的卡頓，這些模塊都無法更新狀態。在這個卡頓過程中，用戶的任何事件（如點擊，敲鍵盤等）都無法被瀏覽器響應。這就是用戶體會到的“慢”！
如果我把 n 值設置的大與13呢，比如24？
千萬不要這么做！因為你的瀏覽器會被卡死！我使用 Mac Pro 8G 內存情況下，設置到14，瀏覽器就無法響應了。
在開啟 Work 線程時，請參考上 gif 圖右半部分，幾個模塊的渲染絲毫不受影響。完美達到了我們的目的。
因為 Reducer 的超級耗時計算被放入 Worker 線程當中，所以絲毫沒有影響瀏覽器的渲染和響應。完全解決了用戶覺得“電腦慢”的問題。
看到了如此完美的對比，也許你想問 Web Worker 的兼容性如何呢？
總結其實，這篇文章的意義并不在于這個 demo 和應用。而是在啟發一種新的想法的同時，review 了很多 JS 當中關鍵概念和基本知識。比如：單線程異步、宿主環境、60 fps、一個算法等等。
更值得一提的是，如果你去深入 demo 代碼，你更會發現 Redux 設計精妙的思想，比如我們將 Web Worker 的應用抽象出一個公共庫：Redux-Worker，并包裝為 Redux 的中間件（middleware），所有 React Redux 都可以無侵入，采用中間件的思想使用：
import { applyWorker } from "redux-worker";
const enhancerWithWorker = compose(
applyMiddleware(thunk, logger),
applyWorker(worker)
);
const store = createStore(rootReducer, {}, enhancerWithWorker);
當然，Redux-Worker 這個中間件的實現原理更是巧妙，這里不再展開。感興趣的同學可以參考我的此項目 Github 倉庫。我 fork 了此庫源碼，并在核心邏輯加入了中文注釋，感興趣的同學可以關注。
我的其他關于 React 文章：
通過實例，學習編寫 React 組件的“最佳實踐”
React 組件設計和分解思考
[從 React 綁定 this，看 JS 語言發展和框架設計]()
React 服務端渲染如此輕松 從零開始構建前后端應用
做出Uber移動網頁版還不夠 極致性能打造才見真章
解析Twitter前端架構 學習復雜場景數據設計
React Conf 2017 干貨總結1: React + ES next = ?
React+Redux打造“NEWS EARLY”單頁應用 一個項目理解最前沿技術棧真諦
一個react+redux工程實例
Happy Coding!
PS:
作者Github倉庫 和 知乎問答鏈接
歡迎各種形式交流。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91385.html
摘要：現在關于最新版本新特性的宣傳講解已經鋪天蓋地了。測試場景是反復操作數組，這個反復操作有所講究，我們計劃持續不斷地改變數組的某一項而不是整個數組的大范圍變動。代碼和性能測試在使用開發時，相信很多開發者在搭配函數式的狀態管理框架使用。 現在關于 React 最新 v16 版本新特性的宣傳、講解已經鋪天蓋地了。你最喜歡哪一個 new feature？截至目前，組件構建方式已經琳瑯滿目。那么，...
摘要：前端日報精選理解的專題之偏函數譯理解事件驅動機制游戲開發前端面試中的常見的算法問題發布中文前端頁面傳參尚妝產品技術刊讀基礎系列二之實現大轉盤抽獎掘金指南眾成翻譯編程插入排序眾成翻譯源碼講解函數技術風暴初體驗個人文 2017-08-16 前端日報 精選 理解 JavaScript 的 async/awaitJavaScript專題之偏函數[譯]理解 Node.js 事件驅動機制Pokem...
摘要：我們來從設計思想上，和官方團隊的回應上，了解一下否決理由。此外，還有一個方法新的接口設計支持接收一個回調函數，當其子組件掛載時，這個回調函數就會相應觸發。 從 setState 那個眾所周知的小秘密說起... 在 React 組件中，調用 this.setState() 是最基本的場景。這個方法描述了 state 的變化、觸發了組件 re-rendering。但是，也許看似平常的 th...
摘要：我們來從設計思想上，和官方團隊的回應上，了解一下否決理由。此外，還有一個方法新的接口設計支持接收一個回調函數，當其子組件掛載時，這個回調函數就會相應觸發。 從 setState 那個眾所周知的小秘密說起... 在 React 組件中，調用 this.setState() 是最基本的場景。這個方法描述了 state 的變化、觸發了組件 re-rendering。但是，也許看似平常的 th...
摘要：表示調用棧在下一將要執行的任務。兩方性能解藥我們一般有兩種方案突破上文提到的瓶頸將耗時高成本高易阻塞的長任務切片，分成子任務，并異步執行這樣一來，這些子任務會在不同的周期執行，進而主線程就可以在子任務間隙當中執行更新操作。 showImg(https://segmentfault.com/img/remote/1460000016008111); 性能一直以來是前端開發中非常重要的話題...
閱讀 4308·2021-09-24 09:47
閱讀 1187·2021-09-03 10:33
閱讀 2068·2019-08-30 11:13
閱讀 1034·2019-08-30 10:49
閱讀 1756·2019-08-29 16:13
閱讀 2049·2019-08-29 11:28
閱讀 3096·2019-08-26 13:31
閱讀 3636·2019-08-23 17:14
