React性能优化
小程序优化
围绕 加载性能 跟 渲染性能
cookie和session
cookie 是网站用于标记用户的身份的一段数据（加密的字符串），session是另一种记录客户状态的机制
cookie和session的区别
cookie 被禁用了怎么办
保持登录的关键不是cookie，而是cookie保存的session id，所以还常用 HTTP 请求头来传输，但需要手动添加
session 弊端
token
token 的认证流程与 session 很相似，无本质区别，使用token的目的是为了减轻服务器的压力
token与cookie的区别
token 比 cookie 更安全，浏览器不会自动添加到headers里，需要开发者手动添加
token 支持跨域访问，cookie 不支持
token 在服务器不需要存储 session 信息，本身就包含用户信息，只需要在客户端存储
不依赖cookie，不需要防范CSRF
含义：
作用：
GC回收机制
基本思路：确定确定哪个变量不会再使用，然后释放它占用的内存。这个过程是周期性的，即垃圾回收程序每隔一定时间就会自动运行。
主要使用两种方式标记未使用的变量：标记清理和引用计数。
标记清理
当变量进入上下文（比如在函数内部声明一个变量），这个变量会被加上存在于上下文的标记。在上下文的变量，逻辑上讲永远不应该释放它的内存，因为只要代码在运行，就有可能用到。当变量离开上下文时，也会被加上离开标记。
GC回收运行的时候，会标记内存中存储的所有变量（标记方式有很多种，标记过程并不重要，关键是策略）。然后，它会将所有在上下文中的变量的标记去掉。在此之后再被标记的就是待删除的，原因是任何在上下文中的变量都访问不到它们了。随后GC做一次内存清理，销毁带标记的所有值并收回它们的内存。
引用计数
思路是对每个值都记录它的引用次数。声明变量并给它赋一个引用值时，这个值的引用数为1。如果同一个值又被赋给另一个变量，那么引用数加1。如果对该值得引用得变量被其他值给覆盖了，那么引用数减1。当一个值得引用数为0时，就说明没办法再访问到这个值了，就可以安全的收回其内存了。
GET和POST是HTTP协议中的两种发送请求的方法， HTTP的底层是TCP/IP（ 数据如何在万维网中通信的协议），所以GET和POST的底层也是TCP/IP 。 GET和POST能做的事情是一样的。给GET加上request body，给POST带上url参数，技术上是完全行的通的
总结： GET 与 POST 都有自己的语义，不能随便混用 。POST 请求比 GET 慢，因为 POST 要发两次包，GET 在 request body 中带数据有些服务器可能会忽略
答： 多个元素嵌套，有层次关系，这些元素都注册了相同的事件，如果里边的元素的事件触发了，外面元素的改事件也自动触发；
如果事件涉及到更新HTML节点或者添加HTML节点的时候，就会出现这样的一种情况，新更新的或者新添加的节点无法绑定事件，表现的行为是无法触发事件
比如：有一个需求，需要点击 ul 列表下的 li 标签触发事件，如果给每个 li 都绑定事件，会产生下面 2 个问题
li 数量非常大的话就会产生性能问题，甚至造成页面卡顿崩溃li 不能绑定事件如果用事件委托，则会很好的解决这两个问题， 用注册一个事件则能监听子节点的所有事件，所应用的就是事件的冒泡
一、相同点
两者都是外部引用CSS的方式
二、区别
BFC规定了内部的Block Box如何布局
定位方案：
满足下列条件之一就可触发BFC
Cookie一共十个属性
function newFn (Fn, params) {
// 创建一个新的空对象 instance
// const instance = {}
// 将 instance 的 __proto__ 属性指向构造函数的原型（Fn.prototype）
// instance.__proto__ = Fn.prototype
const instance = Object.create(Fn.prototype)
// 以 instance 来调用执行构造函数（借助 call/apply）
const result = Fn.apply(instance, params)
// 判断构造函数的返回值，返回 instance 或函数返回值（当构造函数返回值为 object 时）
return (result && (typeof result === 'object' || typeof result === 'function')) ? result : instance
}
优缺点
面向过程：
优点是性能比面向对象高，因为类调用时需要实例化，开销比较大，比较消耗资源。而Linux\Unix等一般采用面向过程开发，性能是最重要的因素。缺点是没有面向对象易维护，易复用，易扩展。可维护性差，不易修改。
面向对象：
优点是易维护，易复用，易扩展。由于面向对象由封装，继承，多态性的特性，可以设计出耦合度低的系统，使系统更加灵活，更加易于维护。 缺点是性能比面向过程低
组合继承
通过原型链和盗用构造函数实现
原型式继承
寄生式继承
寄生式组合继承
类继承
渲染层和逻辑层
一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发
为什么小程序不采用浏览器的设计模式?
知道了原理我们能干什么？
浏览器缓存机制有两种：
强缓存：
通过响应头中的Cache-Control属性判断 （优先级最高）
协商缓存：
两种缓存标识
协商缓存标识不生效时，状态码200，服务端返回body和header
在对比缓存标识生效时，状态码为304，并且报文大小和请求时间大大减少。原因是缓存标识生效只返回header部分，通过状态码通知客户端使用缓存，不再需要将报文主体部分返回给客户端
总结
所有任务可以分成两种，一种是同步任务， 另一种是异步任务
宏观任务和微观任务
先执行微观任务，再执行宏观任务
宏观任务主要包含：setTimeout、setInterval、script(整体代码)
微观任务主要包括：Promise、MutaionObserver、process.nextTick(Node.js 环境)
Node 事件循环
当Node.js启动时会初始化event loop, 每一个event loop都会包含按如下六个循环阶段，nodejs事件循环和浏览器的事件循环完全不一样
阶段概览
如果event loop进入了 poll 阶段，且代码未设定timer，将会发生下面情况：
- 如果poll queue不为空，event loop将同步的执行queue里的callback,直至queue为空，或执行的callback到达系统上限;
- 如果poll queue为空，将会发生下面情况：
- 如果代码已经被setImmediate()设定了callback, event loop将结束poll阶段进入check阶段，并执行check阶段的queue (check阶段的queue是 setImmediate设定的)
- 如果代码没有设定setImmediate(callback)，event loop将阻塞在该阶段等待callbacks加入poll queue,一旦到达就立即执行
如果event loop进入了 poll阶段，且代码设定了timer：
- event loop将检查timers,如果有1个或多个timers时间时间已经到达，event loop将按循环顺序进入 timers 阶段，并执行timer queue
http1.0：每次请求都需要重新建立tcp连接，请求完后立即断开与服务器连接，这很大程度造成了性能上的缺陷，http1.0被抱怨最多的就是连接无法复用。
http1.1 对比 1.0：
http2 对比 1.1
以 vue 项目 npm run serve 为例
通过Object.defineProperty劫持所有data属性，一个属性创建一个 Dep 对象
解析器（Compile）解析模板中的 Directive(指令)，获取到哪里用到了属性（订阅者），比如{{name}} {{message}}，创建一个观察者watcher添加到对应的Dep 对象中，同时初始化view，在界面上显示
Watcher属于Observer和Compile桥梁，将接收到的Observer产生的数据变化，并根据Compile提供的指令进行视图渲染，使得数据变化促使视图变化
import Toast from './Toast'
export default {
install(Vue) {
// 1. 创建组件构造器
const toastConstructor = Vue.extend(Toast)
// 2. new 一个组件对象
const toast = new toastConstructor()
// 3. 手动挂载某一盒子上
toast.$mount(document.createElement('div'))
// 4. toast.$el 对应的就是 div
document.body.appendChild(toast.$el)
// 5. 原型上添加属性
Vue.prototype.$toast = toast
}
}
缺点：pinia 不支持调试
一、MVVM
在MVVM下视图和模型是不能直接通信的，只能通过ViewModel进行交互，它能够监听到数据的变化，然后通知视图进行自动更新，而当用户操作视图时，VM也能监听到视图的变化，然后通知数据做相应改动，这实际上就实现了数据的双向绑定。
优点:
二、MVC
分为:Model(模型)、View(视图)、Controller(控制器)。View和Model不直接联系，必须通过Controller来承上启下。
优点：
区别：
响应式原理不同
vue：会遍历data数据对象，使用Object.definedProperty()监听每个属性
react：通过setState()方法来更新状态，状态更新之后，组件也会重新渲染
监听数据变化的实现原理不同
vue：使用的是可变数据，通过 getter/setter以及一些函数的劫持，能精确知道数据变化
react：强调数据的不可变，通过比较引用的方式（diff）进行的，如果不优化可能导致大量不必要的VDOM的重新渲染
Diff算法不同
vue对比节点，如果节点元素类型相同，但是className不同，认为是不同类型的元素，会进行删除重建，但是react则会认为是同类型的节点，只会修改节点属性。
vue的列表比对采用的是首尾指针法，而react采用的是从左到右依次比对的方式，当一个集合只是把最后一个节点移动到了第一个，react会把前面的节点依次移动，而vue只会把最后一个节点移动到最后一个，从这点上来说vue的对比方式更加高效。
数据流不同
vue：组件与DOM之间可以通过v-model双向绑定
react：一直不支持双向绑定，提倡的是单向数据流
组合不同功能的方式不同
vue：通过mixin（侵入太强）
react：通过HoC(高阶组件）
模板渲染方式不同
vue：在和组件JS代码分离的单独的模板中，通过指令来实现的
react：在组件JS代码中，通过原生JS实现模板中的常见语法，比如插值，条件，循环等，都是通过JS语法实现的
渲染过程不同
vue：可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树
react：应用的状态被改变时，全部子组件都会重新渲染
响应式
读取 computed 时会触发 get, 设置时会触发 set
如何控制
某个计算属性C依赖 data 中的 A，每次读取C，C就会去读取A，从而触发A的 get，如果没有缓存多次触发是很消耗性能的；
脏数据标记：dirty，是 watcher 的属性
依赖的data发生改变，computed 如何更新
setState 在组件生命周期或React合成事件中更新数据是异步的，在setTimeout或者原生dom事件中更新数据是同步的。原因是返回了不同的值做更新判断，同步返回 Sync，批量处理返回 Batch
跟 shouldComponentUpdate 更新界面有关，内部进行的是浅层比较，如果直接在原数据上修改引用型数据类型，比较的时候内存地址是一样的导致不会更新视图，但实际上数据又发生了变化
情况一：对比不同类型的元素
当一个元素从 <div> 变成 <p> 时， <div> 树下面的子节点会全部销毁，重新渲染 <p> 树
会调用 <div> 树的 componentWillUnmount()， <p> 树的 componentDidMount() 方法
情况二：对比同一类型的元素
会保留 DOM 节点，仅比对及更新有改变的属性
- 会更新该组件的props
- 下一步，调用 render() 方法，diff 算法将在之前的结果以及新的结果中进行递归
情况三：对子节点进行递归
当递归 DOM 节点的子元素时，React 会同时遍历两个子元素的列表；当产生差异时，生成一个mutation
在 HTML 中，表单元素（如<input>、<textarea> 和 <select>）之类的表单元素通常自己维护 state，并根据用户输入进行更新。
受控组件
而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”
非受控组件
不通过 React 控制，当提交表单时通过 ref 来从DOM节点中获取表单数据，这种表单元素叫做“非受控组件”
可以针对某些React代码进行更加优雅的处理。
优点：
缺点：
特点：当有不同的请求时，在同一个页面渲染不同的组件
原理：前后端分离（后端专注数据，前端专注交互与可视化）+ 前端路由
Hash 路由（也就是锚点#），本质是是改变location的hash属性
利用 URL 上的 hash，当 hash 改变不会引起页面刷新，可以触发相应的 hashchange 回调函数配置路由
window.onhashchange = function() {
// 更新页面内容
switch (location.hash) {
case '#/home':
app.innerHTML = '首页'
break
case '#/about':
app.innerHTML = '关于'
break
default:
app.innerHTML = ''
}
}
本质是通过h5新增的history.pushState()或history.replaceState()改变路径
pushState()、replaceState() 方法接收三个参数：state、title、url
history.pushState({color: 'red'}, '', '/red') // 设置状态，生成 /red
window.onpopstate = function(event) { // 监听状态
if (event.state && event.state.color) {
document.body.style.color = event.state.color // 更新页面内容
}
}
优势：
pushState 设置的 url 可以是同源下的任意 url ；而 hash 只能修改 # 后面的部分，因此只能设置当前 url 同文档的 url
pushState 设置的新的 url 可以与当前 url 一样，这样也会把记录添加到栈中；hash 设置的新值不能与原来的一样，一样的值不会触发动作将记录添加到栈中
pushState 通过 stateObject 参数可以将任何数据类型添加到记录中；hash 只能添加短字符串
pushState 可以设置额外的 title 属性供后续使用
劣势：
history 在刷新页面时，如果服务器中没有相应的响应或资源，就会出现404。因此，如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面
hash 模式下，仅 # 之前的内容包含在 http 请求中。对后端来说，即使没有对路由做到全面覆盖，也不会报 404
useEffect 会捕获 props 和 state。所以即便在回调函数里，你拿到的还是初始的 props 和 state。如果想得到“最新”的值，可以使用 ref。
一、自动批处理state更新
跳过批处理
import { flushSync } from 'react-dom';
function handleClick() {
flushSync(() => {
setCounter(c => c + 1);
});
// React has updated the DOM by now
flushSync(() => {
setFlag(f => !f);
});
// React has updated the DOM by now
}
二、新的Suspense SSR架构
三、startTransition 非紧急更新
React将状态更新分为两类：
紧急更新（Urgent updates）：反映直接的交互，如输入、点击、按键按下等等。
过渡更新（Transition updates）：将UI从一个视图过渡到另一个视图。
setInputValue(input);
// 标记为非紧急更新
startTransition(() => {
React.setSearchQuery(input);
});
和setTimeout的区别
优化打包构建速度，一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块），极大提升构建速度
HTML文件不用做HMR功能，因为只有一个html文件
开发环境下：
生产环境下：
浏览器访问网站后会强缓存资源，第二次刷新就不会请求服务器（一般会定个时间再去请求服务器），假设有了bug改动了文件，但是浏览器又不能及时请求服务器，所以就用到了文件资源缓存（改变文件名的hash值）
webpack是先打包再启动开发服务器，vite是直接启动开发服务器，然后按需编译依赖文件。
由于现代浏览器本身就支持ES Modules，会主动发起请求去获取所需文件。vite充分利用这点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack先打包，交给浏览器执行的文件是打包后的
由于vite使用的是ES Module，所以代码中不可以使用CommonJs
定义函数,接口或类时,不预先指定具体类型,而是在使用的时候指定具体类型
// 定义类型的时候 动态指定值
interface KeyPair<T,U> {
key: T;
value: U;
}
let kp1: KeyPair<number,string> = { key: 123, value: 'str' }
let kp2: keypair<string,number> = { key: 'str', value: 123 }
相同点：
不同点：
// 第一种方式
function myFlat(arr, newArr = []) {
for (let x of arr) {
if (Array.isArray(x)) {
myFlat(x, newArr)
} else {
newArr.push(x)
}
}
return newArr
}
console.log(myFlat([1, [2, 3], [4, [5, 6]]]))
// 第二种方式
function flat(arr) {
return arr.reduce((result, item) => {
return result.concat(Array.isArray(item) ? flat(item) : item)
}, [])
}
console.log(flat([1, [2, 3], [4, [5, 6]]]))
function deepCopy(obj) {
if (typeof obj === 'object') {
var result = Array.isArray(obj) ? [] : {}
for (let i in obj) {
result[i] = typeof obj[i] === 'object' ? deepCopy(obj[i]) : obj[i]
}
} else {
var result = obj
}
return result
}
const arr = [1, [2, 3], [4, [5, 6]]]
const newArr = deepCopy(arr)
newArr[1][0] = 4
console.log(arr, newArr)
Function.prototype.bind = function (context, ...args) {
context = context || window
const fnSymbol = Symbol('fn')
context[fnSymbol] = this
return function (..._args) {
args = args.concat(_args)
context[fnSymbol](...args)
Reflect.deleteProperty(context, fnSymbol)
}
}
// 防抖
function debounce(fn, wait = 300) {
let timer = null
return function (...args) {
timer && clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, args)
}, wait)
}
}
// 节流
function throttle(f, wait = 1000) {
let timer = null
let flag = true
return (...args) => {
if (timer) return
if (flag) {
f(...args)
flag = false
}
timer = setTimeout(() => {
flag = true
timer = null
}, wait)
}
}
window.onclick = throttle(() => {
console.log('点击')
})
class MyPromise {
constructor(fn) {
this.resolvedCallbacks = []
this.rejectedCallbacks = []
this.state = 'PENDING'
this.value = ''
fn(this.resolve.bind(this), this.reject.bind(this))
}
resolve(value) {
if (this.state === 'PENDING') {
this.state = 'RESOLVED'
this.value = value
this.resolvedCallbacks.map(cb => cb(value))
}
}
reject(value) {
if (this.state === 'PENDING') {
this.state = 'REJECTED'
this.value = value
this.rejectedCallbacks.map(cb => cb(value))
}
}
then(onFulfilled, onRejected) {
if (this.state === 'PENDING') {
this.resolvedCallbacks.push(onFulfilled)
this.rejectedCallbacks.push(onRejected)
}
if (this.state === 'RESOLVED') {
onFulfilled(this.value)
}
if (this.state === 'REJECTED') {
onRejected(this.value)
}
}
}
class Event {
// 首先定义一个事件容器，用来装事件数组（因为订阅者可以是多个）
#handlers = {}
// 事件添加方法，参数有事件名和事件方法
addEventListener(type, handler) {
// 首先判断handlers内有没有type事件容器，没有则创建一个新数组容器
if (!(type in this.#handlers)) {
this.#handlers[type] = []
}
// 将事件存入
this.#handlers[type].push(handler)
}
// 触发事件两个参数（事件名，参数）
dispatchEvent(type, ...params) {
// 若没有注册该事件则抛出错误
if (!(type in this.#handlers)) {
return new Error('未注册该事件')
}
// 便利触发
this.#handlers[type].forEach(handler => {
handler(...params)
})
}
// 事件移除参数（事件名，删除的事件，若无第二个参数则删除该事件的订阅和发布）
removeEventListener(type, handler) {
// 无效事件抛出
if (!(type in this.#handlers)) {
return new Error('无效事件')
}
if (!handler) {
// 直接移除事件
delete this.#handlers[type]
} else {
const idx = this.#handlers[type].findIndex(ele => ele === handler)
// 抛出异常事件
if (idx === -1) {
return new Error('无该绑定事件')
}
// 移除事件
this.#handlers[type].splice(idx, 1)
if (this.#handlers[type].length === 0) {
delete this.#handlers[type]
}
}
}
}
场景：前端页面zh
要求：
function createTask(i) {
return () => {
// 模拟网络请求
return new Promise(resolve => {
setTimeout(() => {
resolve(i)
}, 2000)
})
}
}
class TaskQueue {
constructor() {
this.max = 10 // 最大数 10
this.taskList = [] // 存储任务，模拟队列先进先出
setTimeout(() => { // 自动执行
this.run()
})
}
addTask(task) {
this.taskList.push(task)
}
run() {
const length = this.taskList.length
if (!length) return // 没有任务了
let count = Math.min(this.max, length) // 最大并发数
for (let i = 0; i < count; i++) {
const task = this.taskList.shift() // 取出第一个任务
task().then(res => {
console.log(res)
}).finally(() => {
count--
if (count === 0) { // 并发请求队列空了，继续下一轮
this.run()
}
})
}
}
}
const taskQueue = new TaskQueue()
for (let i = 0; i < 20; i++) {
const task = createTask(i)
taskQueue.addTask(task)
}