摘要：写在最前原文首发于作者的知乎专栏中间件思想遇见的灵感附，感兴趣的同学可以知乎关注，进行交流。其中，最重要的一个便是对多线程的支持。在中提出了工作线程的概念，并且规范出的三大主要特征能够长时间运行响应理想的启动性能以及理想的内存消耗。
写在最前
原文首发于作者的知乎专栏：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仓库 和 知乎问答链接
欢迎各种形式交流。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/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); 性能一直以来是前端开发中非常重要的话题...
阅读 4203·2021-09-24 09:47
阅读 1140·2021-09-03 10:33
阅读 2043·2019-08-30 11:13
阅读 1011·2019-08-30 10:49
阅读 1736·2019-08-29 16:13
阅读 1986·2019-08-29 11:28
阅读 3074·2019-08-26 13:31
阅读 3618·2019-08-23 17:14
