前端杂记1

React是基于函数式编程的运行时框架，UI=fn（state），它的状态改变是通过发布订阅模式，单向数据流方式，更新是通过运行时diff，然后将变化的部分渲染，而vue 是通过响应式以组件为颗粒进行更新，因此它可以在预编译阶段进行动静态标记来优化更新比较过程

react scheduler会将组件根据优先级划分成更小颗粒的任务，每个任务执行完后会通过shouldYeid判断是否有优先级更高的任务要执行，有就中断后面链表节点的执行

react 源码解读比较好的例子

https://zhuanlan.zhihu.com/p/538096803

https://blog.csdn.net/weixin_42232156/article/details/129933030

https://zhuanlan.zhihu.com/p/343927857

https://zhuanlan.zhihu.com/p/343754137

https://zhuanlan.zhihu.com/p/357082574

https://zhuanlan.zhihu.com/p/586327404

https://article.juejin.cn/post/7225254242358558777

像 React 作者一样思考

React设计原理-卡颂

Vue是基于响应式来触发视图更新，而react是基于setState的单向数据流触发视图更新

react 并没有使用响应式来更新视图，而是大量采用发布订阅模式  单向数据流，当我们setState之后就触发组件更新，从而重新执行组件内定义的逻辑，因为浏览器对dom的重新渲染只要不超过16ms用户就是无感的内容替换，而不是刷新页面，这就是单页面组件刷新的根本

 jsx->babel-preset-react->createElement->reactElement->vdom->update->enqueueUpdate->workloop->beginWork/completeWork->currentFiber/workInprogessFiber->effectList->sheduler->reconcile->diff->render->commit->real dom

使用monorepo来管理大型前端项目 将多个业务模块拆分成子项目 将公共的组件和工具类抽离成package包

这样做有一定优点：1.可以抽离基础工程框架 比如CI配置、组件库、工具库等

2.简化各个项目的公共依赖管理

但是缺点也很明显：1.所有的项目都放一个仓库，权限控制不好控

2.子项目技术更新受制 比如一个项目要更新技术或者依赖版本，但是其他项目不需要

3.仓库代码过大，构建时间会很慢

4.对于新人来说增加了学习成本，以及本地调试成本

将一些常用并可以复用的简单逻辑抽离成一个带有状态的函数，叫做hooks目的是复用

前端异常监控+报警机制的一点思考

1.后台用什么存储及查看分析日志

2.什么类型用什么报警方式：核心业务组件渲染报错、核心接口报错采用短信报警，普通报错简单收集，其他邮箱

3.日志多久清除一次

4.前端用什么方式进行数据上报，上报什么数据、何时进行上报（项目信息、报错信息、模块信息、功能信息、页面信息、开发人员信息等）、上传频率、百分比

5.sourceMap解决报错源码定位

在做性能优化前我们要问几个问题：

1.为啥要做优化

2.优化的时机是什么时候

3.优化的时间、人力、财力的投入产出比

4.核心的性能指标是什么（TOC/TOB），有没有具体数据值

5.如何预防和兜底性能问题，获取性能指标数据并分析

6.如何找出影响性能的主要瓶颈

7.制定什么优化方案

8.验证并评估优化效果

9.优化经验是否可沉淀、是否形成工程化的解决方案等

一个React函数组件中，可以存在多个useState useEffect等hooks方法，这就是为啥可以引入其他带有状态的hooks一样，因为在函数的作用域里面，多个hooks，不管是引入，都会正常执行，这样就为代码逻辑的抽离提供了依据

React的setState是同步还是异步，得看情况，如果是在合成事件中比如生命周期函数里就是异步函数，要等同步执行完再执行异步队列，先进先出，同时还会因为性能优化合并每次的setState，最后再执行更新。而在原生事件比如定时器内，就是同步的，而且每次都会执行，不会优化合并

前端性能监控最合理的方式是  利用工程化的sdk先收集每个页面的大概性能指标数据：比如FCP/TTI/FP/LCP domComplte等 然后再具体到页面进行performance 快照分析（Main(找出慢task)/cpu（找出卡顿点）/memory（看是否存在内存泄露）） 以及 netWork资源加载情况分析（是否启用了压缩、使用了cdn 是否使用了首页拆分加载、懒加载、异步加载等）

https://juejin.cn/collection/6845242602665558024

reactfiber 是如何模拟requestIdeaCallback：

https://blog.csdn.net/LuckyWinty/article/details/121154921

浅谈MessageChannel

：https://zhuanlan.zhihu.com/p/432726048

因为raf是每一帧都执行，因此我们可以在里面设置每个任务标准的过期时间，比如进入时间加上16，然后当一个任务执行完下一个任务执行前进行过期对比，或优先级对比，如果都不符合继续执行，则标记当前中断节点信息，链表位置。利用message.channel的possmessage通知浏览器执行下一帧渲染，这样，就可以将浏览器主进程交给其他任务执行比如用户输入事件，滚动事件等。

任务的中断是相对于大任务的小任务而言的，比如一个大组件的渲染，它里面有多个子组件任务，当子任务被中止，也就是其他子任务没有执行时就意味着这个大组件任务被中断

尽管react的fiber借助链表的schedule 和浏览器分片实现了大任务的异步可中断，防止了更高优先级任务被阻塞，但是它毕竟是以应用作为单位进行重构，而vue是借助响应式将重构控制到了具体组件的颗粒度，也就是说它可以很清楚的知道哪个组件发生了变化，从而只重新diff这个组件就可以了，再加上预编译阶段的动静节点标记，使得它在大组件更新上看起来性能更优

前端监控优秀SDK开源项目：

https://github.com/xy-sea/web-see

https://github.com/LuciferHuang/heimdallr-sdk

https://github.com/bombayjs/bombayjs

https://github.com/woai3c/monitor-demo

https://github.com/lycarrot/apply-monitor

https://github.com/alex1504/femonitor-web