10.29分享题

第 22 题：介绍下重绘和回流（Repaint & Reflow），以及如何进行优化

Reflow
当涉及到DOM节点的布局属性发生变化时，就会重新计算该属性，浏览器会重新描绘相应的元素，此过程叫Reflow（回流或重排）。
Repaint
当影响DOM元素可见性的属性发生变化 (如 color) 时, 浏览器会重新描绘相应的元素, 此过程称为Repaint（重绘）。因此重排必然会引起重绘。

引起Repaint和Reflow的一些操作
• 调整窗口大小
• 字体大小
• 样式表变动
• 元素内容变化，尤其是输入控件
• CSS伪类激活，在用户交互过程中发生
• DOM操作，DOM元素增删、修改
• width, clientWidth, scrollTop等布局宽高的计算

Repaint和Reflow是不可避免的，只能说对性能的影响减到最小，给出下面几条建议：
• 避免逐条更改样式。建议集中修改样式，例如操作className。
• 避免频繁操作DOM。创建一个documentFragment或div，在它上面应用所有DOM操作，最后添加到文档里。设置display:none的元素上操作，最后显示出来。
• 避免频繁读取元素几何属性（例如scrollTop）。绝对定位具有复杂动画的元素。
• 绝对定位使它脱离文档流，避免引起父元素及后续元素大量的回流

第 23 题：介绍下观察者模式和订阅-发布模式的区别，各自适用于什么场景

观察者模式中主体和观察者是互相感知的，发布-订阅模式是借助第三方来实现调度的，发布者和订阅者之间互不感知

联系
发布-订阅模式是观察者模式的一种变体。发布-订阅只是把一部分功能抽象成一个独立的ChangeManager。

区别与适用场景
总的来说，发布-订阅模式适合更复杂的场景。

在「一对多」的场景下，发布者的某次更新只想通知它的部分订阅者？
在「多对一」或者「多对多」场景下。一个订阅者依赖于多个发布者，某个发布者更新后是否需要通知订阅者？还是等所有发布者都更新完毕再通知订阅者？
这些逻辑都可以放到ChangeManager里。

第 24 题：聊聊 Redux 和 Vuex 的设计思想

简单点的解释它们都是用来管理状态的库，对数据(data)统一的管理；只不过 vuex 是给 Vue 用的，redux 是给 JS App 用的（但是大部分都是给 React 用的，所以可以说是给 React 用的）
Redux： view——>actions——>reducer——>state变化——>view变化（同步异步一样）

Vuex： view——>dispatch——>actions——>mutations——>state变化——>view变化（异步操作）
view——>commit——>mutations——>state变化——>view变化（同步操作）

Redux

• 核心对象：store
• 数据存储：state
• 状态更新提交接口：dispatch
• 状态更新提交参数：带type和payload的 Action
• 状态更新计算：reducer
• 限制：reducer必须是纯函数，不支持异步
• 特性：支持中间件

VUEX

• 核心对象：store
• 数据存储：state
• 状态更新提交接口：commit
• 状态更新提交参数：带type和payload的mutation 提交对象/参数
• 状态更新计算：mutation handler
• 限制：mutation handler必须是非异步方法
• 特性：支持带缓存的getter，用于获取state经过某些计算后的值

Redux vs VUEX 对比分析

store和state是最基本的概念，VUEX没有做出改变。其实VUEX对整个框架思想并没有任何改变，只是某些内容变化了名称或者叫法，通过改名，以图在一些细节概念上有所区分。

• VUEX弱化了dispatch的存在感。VUEX认为状态变更的触发是一次“提交”而已，而调用方式则是框架提供一个提交的commit API接口。
• VUEX取消了Redux中Action的概念。不同于Redux认为状态变更必须是由一次"行为"触发，VUEX仅仅认为在任何时候触发状态变化只需要进行mutation即可。Redux的Action必须是一个对象，而VUEX认为只要传递必要的参数即可，形式不做要求。
• VUEX也弱化了Redux中的reducer的概念。reducer在计算机领域语义应该是"规约"，在这里意思应该是根据旧的state和Action的传入参数，“规约"出新的state。在VUEX中，对应的是mutation，即"转变”，只是根据入参对旧state进行"转变"而已。

总的来说，VUEX通过弱化概念，在任何东西都没做实质性削减的基础上，使得整套框架更易于理解了。

另外VUEX支持getter，运行中是带缓存的，算是对提升性能方面做了些优化工作，言外之意也是鼓励大家多使用getter。
————————————————
版权声明：本文为CSDN博主「hyupeng1006」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/hyupeng1006/article/details/80755667