前端面试题2026

客户端发SYN，服务端回SYN和ACK，客户端回ACK

不两次握手是怕网络原因服务器没有收到请求，但是客户端一直等，导致浪费资源/连接错误

客户端发FIN，服务端发ACK，服务端发FIN,客户端发ACK

不三次挥手是因为服务端要告诉客户端已经没有数据要发送了，然后客户端收到信号

TCP会建立连接才能数据传输，所以有连接性，而UDP不需要连接直接可以发送数据

TCP有错误检测，重传机制，和用滑动窗口来做流量控制和拥塞控制机制，所以有可靠性

TCP会给数据包排序，所以有顺序性，而UDP没有可能导致乱序的数据

所以TCP常常用做网页，邮件，文件下载，UDP用于需要实时性的直播，音视频

1.1是串型传输的，每个请求需要在前一个请求完成后才能发送和处理，当多个并行请求请求同一台服务器，服务器会按照顺序处理请求，如果一个请求比较耗时，会阻塞后面的请求，直到前面的请求完成<br>

TCP层面的阻塞？

默认永久连接，相比于1.1的connection:keep-alive

二进制分帧，数据流

多路复用

<div>头部信息压缩</div>

服务器推送、server&nbsp;push

优先级机制，每个请求可以带一个优先级，前端就是加header，主要后端处理优先级

QUIC协议，底层是基于UDP的，解决了TCP层面的阻塞问题<br>

有哪些特性？

是http加上SSL/TSL安全层

使用了对称加密 加密密文，非对称加密 加密密钥，数字证书加密

客户端发请求到服务端，服务端返回公钥和数字证书到客户端，客户端验证证书，并用服务端公钥和随机数加密生成“对称密钥”到后端，后端收到后用私钥解密得到对称密钥，然后用对称密钥进行加密解密<br>

204&nbsp;no&nbsp;content 成功但没有内容。常用于前端错误上报

301永久重定向

302临时重定向-自己网站挂了，定位到公告

304协商缓存

307类似&nbsp;302，区别在于能够确保请求方法和消息主体不会发生改变，get请求没有区别，post的时候302会尝试转换为get

400客户端请求出错，参数错误

401没有权限，比如token丢失

403forbidden，禁止访问

404 Not Found资源不存在

405请求方式出错

500服务器内部错误

502错误的网管或代理服务器

强缓

启发式缓存

协缓

jsonp的原理？

说一下解决跨域后如何可以携带cookie？<br>

简单请求是指使用&nbsp;GET、HEAD、POST&nbsp;三个方法中的任意一种，并且请求头中的&nbsp;Content-Type&nbsp;类型只能是&nbsp;application/x-www-form-urlencoded、multipart/form-data&nbsp;或&nbsp;text/plain&nbsp;中的一种。这种请求不会触发&nbsp;CORS&nbsp;预检请求，因为它们不会对服务器产生影响，且不会携带敏感信息

而复杂请求则是指使用了其他请求方法（如&nbsp;PUT、DELETE&nbsp;等）或者&nbsp;Content-Type&nbsp;类型为&nbsp;application/json、application/xml&nbsp;等，以及使用了自定义请求头等情况，这些会被认为是对服务器产生了影响，因此在发送前需要进行&nbsp;CORS&nbsp;预检请求，以确保请求的安全性

xss（跨站脚本攻击）

csrf（Cross—Site&nbsp;Request&nbsp;Forgery）跨站请求伪造，如钓鱼网站

都会把两个分支合并到一起，但是rebase不会创建新的提交对象，它的提交记录是线性的

它的使用是在目标分支使用git rebase 分支名 然后如果有冲突需要手动解决然后git add 解决完后git rebase --continue，可以git log看合并结果， 如果要回退git rebase --abort

合并指定提交

回滚上次commit，且有提交记录

回滚指定commit

地图api，拖拽api，input的type，indexDB(localforage)，web component，语义化标签，音视频标签，worker

dragable

dragstart

dargenter

dragOver

块级格式化上下文，是一个独立的空间

它的规则有块级元素会在垂直方向上一个一个排列。内部元素改变不会影响外部元素

垂直方向的距离由margin决定，属于同一个BFC的两个相邻的标签外边距会发生重叠

计算BFC的高度的时候，浮动元素也会参与其中

触发bfc的条件

box-sizing:content-box为w3c标准盒模型，设置的width/height实际设置的时候content box元素的大小由content+border+padding决定<br>

box-sizing:border-box为IE怪异盒模型（替代（IE）盒）,content&nbsp;宽高包括&nbsp;border&nbsp;和&nbsp;padding，元素的大小就等于width/height+margin构成，

.triangle&nbsp;{<br>&nbsp;&nbsp;width:&nbsp;0;<br>&nbsp;&nbsp;height:&nbsp;0;<br>&nbsp;&nbsp;border-top:&nbsp;50px&nbsp;solid&nbsp;transparent;<br>&nbsp;&nbsp;border-right:&nbsp;50px&nbsp;solid&nbsp;#f00;<br>&nbsp;&nbsp;border-bottom:&nbsp;50px&nbsp;solid&nbsp;transparent;<br>}

div高度和宽度都为0，通过边框绘制三角形，边都要有长度，但是只有一个边有颜色就可以了,其他边transparent

扇形加一个50%的border-radius

通配符是0，标签是1，类是10，id是100，style是1000

可以通过定位，3D变换的CSS属性，video，canvas，C3动画，will-change

flex-grow，默认值为1，放大比例

flex-shrink，默认值为1，缩小比例

flex-basis，默认值为auto，占据主轴空间

number string array object symbol bigint boolean null undefined

模板字符串，let/const，箭头函数，promise，生成器迭代器，set/map/symbol/bigint proxy等

const 和 let是es6的，有块级作用域不能重复声明，有暂时性死区，const定义常量不能修改（但引用类型可以修改），var可以变量提升，重复声明

写法简单，可以简写

箭头函数因为没有prototype和arguments不能当作构造函数

箭头函数里没有this，this指向上层作用域

Function instanceof Object和Object instanceof Function都返回true

Function.__proto__&nbsp;===&nbsp;Function.prototype

Object.__proto__=== Function.prototype

Function.prototype.__proto__===Object.prototype

Function.__proto__&nbsp;instanceof&nbsp;Object<br>

Object.__proto__&nbsp;instanceof&nbsp;Function&nbsp;<br>

查找对象的属性的时候，如果在对象身上找不到，就会去对象的原型去找，对象的原型又有自己的原型，直到找到Object.prototype.__proto__为null,这条查找链就是原型链

new&nbsp;一个构造函数，生成一个实例对象，构造函数的prototype和实例对象的__proto__都指向同一个对象，这个对象就是原型对象，实例对象的constructor是指向构造函数，这样就形成了一个三角关系

1.创建一个空对象

2.空对象的__proto__指向传入函数的prototype

3.绑定this并且传入参数执行函数且拿到执行结果

4.如果是引用类型就返回这个函数执行的结果，如果是值类型就返回创建的对象

遍历左边的原型链看能否等于右边的prototype

判断对象

判断数组

这里需要注意的是Object.prototype.toString.call()不能检测包装类型，然后toStringTag在ES6也支持修改

还要注意constructor不是一个靠谱的方法，因为constructor属性可以被修改

slice是纯函数，不会改变数组

splice不是纯函数，可以修改数组，可以删除和添加

call是一个一个传参，apply是传一个数组，bind是一个一个传参，call/apply会立即执行，bind不会立即执行

call/apply是执行时改变this指向，bind是声明时改变this指向

箭头函数可以调用call/apply/bind吗

多次bind的结果是什么？

对于bind，如果使用new实例化，this不会被改变，而是构造函数实例化的this

可选链空值不报错返回undefined

只有null&nbsp;或&nbsp;undefined返回后面的，区别于逻辑或

语法不同

加载方式不同，esm是静态加载，编译确定依赖关系，所以可以编译时做tree-shaking，cjs是动态加载，运行时候确定依赖关系

作用域不同，es6使用严格模式，模块内部变量和函数不会暴露到全局作用域，但是cjs会

防抖在规定的时间内再次触发，会重新计时，如用户点击提交按钮防止重复提交

节流规定一个单位时间内只能触发一次事件，常用在操作dom的时候，如页面滚动懒加载，下拉刷新

weakmap利于垃圾回收，只能使用对象作为key

就是异步的时候，一直回调，解决是promise或者async/await

有三个状态：Pending，Fulfilled，Rejected

Promise.all和Promsie.race都有短路特性，all是一次性执行数组里面的promise，race赛跑是全部执行，返回最先改变状态的一个promise

Promise.allSettled相比于Promise.all可以拿到成功和失败的结果（全部执行完，而不会被短路），原理是遍历执行promise，然后用一个数组拿到成功的结果，然后在catch的时候拿到失败的结果，最后用finally去返回成功和失败的结果

Promise.any是ES12新增的API,只要有一个成功，就返回那个成功的结果

可以用Promise.race实现一个请求超时，原理是把一个超时Promise和一个请求放进数组让promise执行，如果超时的promise先完成，则说明该请求超时<br>

可以用Promise.race做并发控制，原理创建一个事件池和控制最大并发数变量max，是在for循环里创建promise实例，这个promise实例状态改变就从事件池移除，然后放入事件池，当并发池的length达到max的时候，使用promise.race去执行并发池，这样就会让并发池先执行完一个请求然后移除，然后又推入，这样循环可以达到并发控制效果

静态方法的话，成功是返回值，失败是返回失败的promsie

promise捕获错误的机制有哪几种，错误捕获优先级是怎样的

async&nbsp;await&nbsp;语法是&nbsp;ES7出现的，是基于ES6的&nbsp;promise和generator生成器实现的

使用symbol做对象的key，可以避免key值重复

可用Symbol.iterator来定义迭代器，这样就可以使用for...of循环来遍历对象。

用普通的for of不能遍历symbol的值，Object.getOwnPropertySymbols()可以遍历出symble属性，所以可以模拟私有变量

如react里使用了symbol,$$typeof标识react元素类型，防止xss，不支持symbol的环境会是个数字（如果后端支持传的json,json模拟react元素），因为json不支持symbol

深拷贝对于多层引用数据结构，也不会互相影响，浅拷贝只有第一层不影响

利用Set去重

双重for循环

filter加includes

indexOf

JS使用双精度浮点数类型存储的，遵循IEEE754规范，在转为二进制计算的时候精度会丢失

for&nbsp;in&nbsp;一般用来遍历对象，他会遍历原型对象上的属性，一般会加一层hasOwnProperty

for of&nbsp;是遍历实现了iterator迭代器的对象，比如数组&nbsp;set&nbsp;map，不会遍历原型上的属性

map有get和set，set有个has,size,add,delete,clear

isNaN会尝试转化，而number.isNaN严格判断

Number.isNaN('abc')//false,es6新增，除了NaN返回true,其他都是false

isNaN('abc')//true<br>

object.is接收两个参数判断是否相等，基本和===一样，不过+0和-0为false还有NaN为true的时候与===不同

相同的输入相同的输出，没有副作用

defer和async都是domContentLoaded之后执行，都是异步加载，defer可以保证顺序，async不能保证顺序所以不影响dom不在乎js顺序的可以使用async

DOMContentLoaded事件在页面的DOM结构加载完成后触发，而onload事件在整个页面（包括图片、样式表、脚本等资源）都加载完成后触发。

并行的，不会阻塞解析

因为和js互斥（js也可能改变样式），所以渲染会阻塞

js是单线程的，同步任务放入执行栈执行，异步任务放到异步任务队列，异步任务队列分为宏任务队列和微任务队列，当执行栈中代码执行完后，会去检查微任务队列是否有任务，有的话全拿出来执行，执行完后取下一个宏任务执行，如果遇到微任务会先执行微任务再执行下一个宏任务

可以理解为一开始是宏任务，因为script是宏任务，然后宏任务是一个一个执行的，微任务是批量执行的

是一种编程范式，比如纯函数，函数不可变，高阶函数，函数一等公民等

是更好的一种编程方式，比面向过程，面向对象好

宏任务：script，定时器，I/O，dom事件，ajax，MessageChannel，UI&nbsp;rending，rfa

微任务：promise.then()，nextTick，mutationObserver，queueMicroTask

高阶函数，做累计的操作

把多个传参改为一个一个的，可以函数复用

原型链继承

构造函数继承

组合继承

原型继承

寄生继承

es6继承

用于多开线程，做耗时操作，然后通过postmessage通信

可以缓存函数

可以防抖节流柯里化操作

可以模拟私有变量

使用weakmap/map，如果已经拷贝过直接返回

闭包被全局变量引用，闭包中变量将无法被回收

interval引用了本应该回收的外部变量，将无法被回收

DOM在页面中已经删除了，但内存中还引用着这个DOM结点，DOM结点将无法被回收

CPU节能，切换至后台时，会暂停刷新任务

减少DOM操作，合并每一帧的DOM操作，每一帧只执行一次

函数节流，为了防止在一个刷新间隔内发生多次函数执行，在每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销，一个刷新间隔内函数执行多次时没有意义的，因为多数显示器每&nbsp;16.7ms&nbsp;刷新一次，多次绘制并不会在屏幕上体现出来

词法：词法作用域是在代码编写过程中确定的作用域，也被称为静态作用域

语法：this，可以动态的修改,语法作用域是在代码执行过程中确定的作用域，也被称为动态作用域

闭包有时会代替作用域链，来代替变量的查找

因为&nbsp;typeof&nbsp;null&nbsp;返回的类型标签前三位是000和object的一样，所以返回object

监听dom变化

离线缓存

消息推送

必须https

pwa用的

interface只能定义对象

type可以定义普通数据类型，可以使用联合类型交叉类型，类型别名

type是类型别名不会创建新的类型

intercface可以extends继承其他接口，实现复用

当定义多个接口时，可以把公用的属性方法定义在一个父接口种，其他子接口继承它，提高复用性可维护性

type使用&amp;联合类型也能实现一样的继承，不过只是类型的一种定义方式

用尖括号&lt;&gt;传入一个类型变量，可以用这个类型变量去推断别的类型

同一个函数名根据不同的参数类型和数量实现不同的函数体

传不同参数返回不同类型

Partial

Omit

Pick

Exclude/Extract

Record&lt;K,&nbsp;T&gt;表示将类型K中所有属性的类型都变为T的新类型。

keyof&nbsp;T表示获取类型T中所有属性名组成的联合类型

它可以用于从泛型类型中推断出某个类型，并将其作为一个新的类型变量来使用

infer通常和条件类型（Conditional&nbsp;Types）一起使用，用于从条件类型中推断出某个类型

type&nbsp;ReturnType&lt;T&gt;&nbsp;=&nbsp;T&nbsp;extends&nbsp;(...args:&nbsp;any[])&nbsp;=&gt;&nbsp;infer&nbsp;R&nbsp;?&nbsp;R&nbsp;:&nbsp;any;<br>

https://gitmind.cn/app/docs/m3inc866

url规范化，缓存检查，dns解析，网络进程做tcp连接3次握手和解析响应头等，响应数据，接收数据，4次挥手，渲染进程做生成dom树，cssom树，样式计算，布局，分层，绘制，分块，光栅化，合成

主进程

渲染进程，每个标签页

插件进程

GPU进程，图形加速相关

重绘就是重新绘制，会重新计算样式，比如改变背景颜色，改变字体大小都是重绘

回流就是重排，除了会重新计算样式，还会重新布局，比如改变元素的位置就是重排

可以想到网络层面优化（如dns预解析），渲染层面的优化（如动画图层），代码层的优化合并更新减少重绘回流

引用计数

标记清除

分代回收

jsonp的原理是发送一个callback到后端，后端拼接数据并返回，缺点是只支持get请求

npm login/npm publish

fs/http/path/child_process/querystring/url/util等

Buffer&nbsp;是用于处理二进制数据的类。它提供了一种在&nbsp;JavaScript&nbsp;中操作字节的方式，可以用来创建、读取、写入和转换二进制数据

path.join方法会将参数中的所有路径片段连接起来，常用来文件名路径

path.resolve&nbsp;方法也会将参数中的所有路径片段连接起来，但是它会根据当前目录进行解析，并将相对路径转换为绝对路径，返回一个新的绝对路径字符串。这个方法常用于获取完整的绝对路径。<br><br>

exec&nbsp;方法：用于执行一个&nbsp;shell&nbsp;命令

execFile&nbsp;方法：用于执行一个可执行文件

spawn&nbsp;方法：以流的形式启动一个命令

fork&nbsp;方法：创建一个新的&nbsp;Node.js&nbsp;进程，并通过&nbsp;IPC&nbsp;通道进行通信，当然还有别的很多通信方式

v-if是真正的渲染和销毁，而不是显示和隐藏，v-show通过css&nbsp;dispaly控制显示和隐藏

在diff算法中，判断是否是sameNode，只需要移动，不用删除和消耗，减少渲染次数，提高渲染性能

防止组件间data互相影响

computed可以把值缓存起来，当依赖发生变化才会重新计算，所以能用computed的尽量用computed，computed是多对一的，通过多个值计算出一个需要的值

watch支持异步，当监听的值改变后会重新执行，支持异步，watch是一对多的，监听某一个值，可以去修改多个地方的值

在父组件beforeMounted之后，执行整个子组件生命周期，再回头执行父组件mounted

mixin用来逻辑复用，但是会有命名冲突问题

变量名不好查找等问题

全局守卫

独享守卫

组件内守卫

activated路由组件被激活时触发。deactivated路由组件失活时触发。

说一下provider和inject？

父子组件props和this.$emit

自定义事件&nbsp;event.$on&nbsp;event.$off&nbsp;event.$emit

vuex

用state存数据，可以mapState获取数据

用mutation定义可以改变state的方法，接受到state和payload参数，通过commit触发或者mapMutations

用action可以做异步操作，接受到context和payload参数，用dispatch触发action或者mapActions；

用getter也可以存数据，相当于vue的计算属性（有缓存）

用module可以用来拆分模块

可以，但是过滤掉了数组，因为数组结构可能很深，遍历很深影响性能

合理使用v-show和v-if，computed,v-for时加key,避免和v-if同时使用

事件销毁，合理使用异步组件，keep-alive,data层级不要太深

webpack层面的（后面）&nbsp;图片懒加载，SSR

$router是VueRouter的一个对象，全局的对象，他包含了所有的路由，包含了许多关键的对象和属性，push等

每一个路由都会有一个$route对象，是一个局部的对象，可以获取对应的name，path，params，query等

也就是用异步插入标签

封装一层真实dom，可以使用声明式的方法去操作真实dom

虽然直接去操作dom比较快，但是有可能造成多次重绘回流，用虚拟dom模拟真实dom，体积较小，js计算速度较快，批量更新的时候可能会比操作真实dom速度更快

取消请求

created和mounted可以用来发请求

mounted可以用来获取dom节点

beforeDestroy用来清除定时器，取消事件监听等

改了一个数据后，等dom更新后再触发的场景，在用this.$refs去拿dom数据的时候，created里想要拿到dom相关信息

.sync&nbsp;.native&nbsp;.trim&nbsp;.number&nbsp;.once&nbsp;.stop&nbsp;.self&nbsp;.prevent等

一个是性能上的优化

一个是给开发者更好的开发体验

更好的ts支持，支持按需引入

pinia可以有多个store，而vuex需要命名空间

1.采用软连接，.pnpm下的互相引用都是软链接

2.采用硬链接到.pnpm

1.数据驱动视图

2.关注业务逻辑，不用去关注手动操作dom

维护性更好

可以夸平台

直接操作真实dom会导致重绘重排，用虚拟dom批量更新性能更好

操作虚拟dom提高效率

初始化数据，编译template模版生成reder函数,在不同阶段触发生命周期，render执行生成vnode然后patch到页面

1、object.defineProperty加观察者模式实现的

2.初始化的时候会创建一个Watcher，Dep，使用observer监听data里的数据，用defineProperty给每一个key设置getter和setter

3.render执行的时候会触发getter，并在getter里通过Dep.addSub去通知watcher收集依赖

4.更新的时候，会触发setter，通过Dep.notify去通知watcher更新页面

1.首先时间复杂度是On，原因是不跨层比较，根据key，tag决定是否深度比较

2.头头&nbsp;尾尾&nbsp;头尾&nbsp;尾头&nbsp;剩下的找到则置为空放最前面&nbsp;没有找到则新建插入放前面

3.vue3则中间是最长递增子序列

分支切换是每次重新收集依赖重新计算

effect是通过栈解决的，或者属性描述

是基于ComputedRefImpl类，把计算属性定义为响应式数据（通过设置类的get/set,手动track和trigger），主要是保存了一个_dirty标记，用于标记计算属性是否重新计算，当发生变化时变为true表示需要重新计算

1.vue2用了promise，mutationObserve，setImmidate，setTimeout，4层降级，vue3直接promise.resolve().then

2.将函数放到微任务队列最后，完成异步更新

3.用flushCallbacks将所有的cb执行

vue2中是v-bind和input事件的语法糖

1.解析vue模板，用正则循环匹配（开始和结束标签，文本和属性），用到栈结构，头节点压栈尾节点出栈，生成ast对象

2.optimize标记静态节点

3.有个这个对象后，生成一段可以执行的代码字符串，用new&nbsp;Function包装生成一个可执行函数，这个函数就是render函数

如果没有render才编译 ： parse（正则/栈结构）生成ast -&gt;&nbsp;optimize（标记静态节点）&nbsp;-&gt;&nbsp;generate(ast转化成render&nbsp;function)

本身是一个全局组件，用于将动态组件缓存起来，用于切换时保留状态避免重新渲染

如果有max则会走LRU（最近最少使用）

学到一些新进的技术，比如monorepo,git-simple-hook，查漏补缺完全搞懂api用法，遇到bug可以更快定位问题

hash

history

Object.defineProperty(Vue.prototype,&nbsp;'$router',&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;get&nbsp;()&nbsp;{&nbsp;return&nbsp;this._routerRoot._router&nbsp;}<br>&nbsp;&nbsp;})

Vue.component('RouterView',&nbsp;View)

1.调用install方法安装，用mixin在beforeCreate注入vuexInit方法，所以每个实例都会调用这个方法，并且保存Vue对象

2.vuexInt可以实现vm访问store，原理是如果是更节点就把配置的sotre给this.$store，否则去parent上去查找

3.store的构造函数进行实例化这样就是响应式的（对象形式），然后commit调用mutation,dispatch是包装了一层promise.all来调用action

mergeOpitons做的

性能主要取决于代码的作用，而不是选择函数式还是类组件。尽管优化策略有差别(scu和memo)，但性能差异可以忽略不计。

以前函数组件没有状态，有了hook后，解决了这个问题

函数组件没有this问题

受控组件，表单的值受state控制，需要自己监听onChange去更新state

非受控组件，自己去用ref拿取节点

性能优化，浅比较，判断props，state变化来决定子组件是否要渲染

不可变数据

原理是使用proxy代理做的

useState

useEffect/useLayoutEffect

useRef

useContext

useReducer

useInpretiveHandle

useMemo/useCallback

useDefferedValue/useTransiton

use/useid

还有些写库需要的

props

自定义事件

Redux/Context

父组件更新，子组件没必要更新的时候，相当于pureComponent和SCU

如果父组件的状态跟子组件的状态有关不需要使用，不影响子组件的时候可以用

子组件暴露给夫组件的时候，用于父组件调用子组件的方法

接收一个组件，返回一个组件，其实就是多了一层中间层

代码复用

增强props

做权限

设计成数组结构的方式，是因为可以自定义变量名

useImmer最好

函数式编程，逻辑复用

useDefferedValue useTransition

data fetching cache

rsc

suspence

useDeferredValue 使用延迟值 主要用于减少连续状态更新带来的性能开销，将状态更新延迟到下一次渲染中

useTransition&nbsp;主要用于优化异步操作的过渡处理，提供平滑的用户体验并避免页面卡顿

父组件传一个render为函数的prop到子组件

加了心智负担，感觉无用

而且数据流从下到上不太好

useEffect没写[]，或者依赖的时候引用数据类型

通过dispatch去派发action，去通知reducer生成新的state，然后渲染到页面

isBatchingUpdate&nbsp;=&nbsp;true;<br>&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;你需要执行的一些代码<br>&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;...<br>&nbsp;&nbsp;&nbsp;&nbsp;isBatchingUpdate&nbsp;=&nbsp;false

为true走异步更新，为false走同步更新，定时器这些因为延迟所以为false了，就会走同步，普通react管理的走异步

react18之后都为异步

闭包引起的值不更新的问题，拿到的是旧的值

import&nbsp;{&nbsp;useRef&nbsp;}&nbsp;from&nbsp;'react';<br><br>function&nbsp;useLatest&lt;T&gt;(value:&nbsp;T)&nbsp;{<br>&nbsp;&nbsp;const&nbsp;ref&nbsp;=&nbsp;useRef(value);<br>&nbsp;&nbsp;ref.current&nbsp;=&nbsp;value;<br><br>&nbsp;&nbsp;return&nbsp;ref;<br>}<br><br>export&nbsp;default&nbsp;useLatest;

useEffect异步的不会阻塞渲染，而useLayoutEffect同步的会阻塞渲染

useEffect解决不了的时候才用useLayoutEffect

useCallback用于传入一个函数到子组件的时候，需要给子组件套一层React.memo，依赖的值不发生变化，这个子组件就不会随着父组件更新而更新

useMemo用于复杂计算量的时候，依赖不变就不用重新计算

注意本身也有开销，没有性能问题可以不用

怎么让这个缓存值永久不变？

const&nbsp;[state,&nbsp;dispatch]&nbsp;=&nbsp;useReducer(reducer,&nbsp;initialState)

useState&nbsp;用于管理简单的、相互独立的状态

而&nbsp;useReducer&nbsp;适用于管理复杂的、有关联的状态

通信

高阶组件

redux数据流

redux中间件机制

redux异步请求

redux和vuex的区别

diff算法

jsx怎么转为真实dom,createElement原理

hooks

usememo usecallback区别

useLayoutEffect

useEffect

useState返回数组<br>

useState同步异步

useRef理解

useContext理解

hooks限制

事件机制

并发和并行

fiber

fiber和element

链表的好处，插入删除高效，移动占用空间

use&nbsp;useID&nbsp;cache&nbsp;rsc&nbsp;useDefferedValue&nbsp;useTransiton&nbsp;createRoot&nbsp;flushSync&nbsp;组件返回值可以null和undefined

react不能到组件

react错误捕获

方向优化

子主题

jsx不能静态编译优化，但是vue的template有更多限制，diff不同，优化手段不同等

react&nbsp;把&nbsp;schedule&nbsp;和&nbsp;reconcile&nbsp;叫做&nbsp;render&nbsp;阶段，这个阶段就是把&nbsp;vdom&nbsp;转换为&nbsp;fiber

之后把&nbsp;filber&nbsp;更新到&nbsp;dom&nbsp;的过程就叫做&nbsp;commit&nbsp;阶段

react自己写了一套事件系统模拟原生事件，好处是抹平浏览器差异，跨平台，事件池复用，利用冒泡机制减少内存使用

所以return false会失效，而原生的stopPropogation和preventDefault是react重写过的所以会生效

现在是root，而不是document

架构变化Stack&nbsp;Reconciler到Fiber&nbsp;Reconciler

历史原因：因为GUI线程和JS线程互斥，老版本React遇到组件更新耗时的时候，一次大量的递归更新会因为占用JS线程，导致浏览器没有时间渲染造成页面卡顿

好处/解决的问题：而fiber架构可以拆分任务，中断任务，异步更新方面，解决不可中断的递归更新卡顿问题

先说它是什么，1、是一种架构，支持时间分片/优先级调度/异步可打断更新；2、可以看成是最小粒度执行单元，保存了节点的状态和副作用以及更新的优先级（自身过期时间expirationTime（lane）判断是否有空闲时间执行更新，没有接把控制权给浏览器渲染），可以理解为虚拟dom，是根据虚拟dom生成的；

return指向父fiber&nbsp;child指向子fiber&nbsp;&nbsp;sibling指向兄弟fiber

RIC浏览器空闲时间执行，防止浏览器没有空闲时间而卡死

setTimeout(fn,&nbsp;0)由于递归执行会延迟4ms左右，所以不用这种方式

给任务分5个优先级

用MessageChannel去模拟RIC,去请求浏览器空闲时间

任务分割

切分/任务队列/优先级排序/空闲时间从队列取出优先级高的完成，dom树渲染，是否时间到，任务挂起，任务分割暂停从新吊起

渲染动画的时候，如果上一帧计算量比较大，导致上一帧画面绘制当前帧画面之间有较长间隙，出现白屏

React用workInProgress（内存中构建的树）和curren（渲染树）来实现更新逻辑，双缓存一个在内存中构建，一个渲染视图，两棵树用alternate指针互相指向，在下一次渲染的时候，直接复用缓存树作为下一次的渲染树，上一次的渲染树又作为缓存树，这样防止只用一颗树更新状态丢失的情况，又加快了Dom节点的替换和更新

concurrent mode就是把render改为了createRoot，主要是使用useTransition和useDeferredValue来设置优先级

也就是可打断更新，用scheduler调度器判断fiber的优先级和lane

setState只在合成事件和钩子函数中是“异步”的，在原生事件和&nbsp;setTimeout&nbsp;中都是同步的

1.把newState存入pending队列

2.判断是否是batch&nbsp;update，如果是则放入dirtyComponents中

3.如果不是则遍历dirtyComponents调用updateComponent，更新pending&nbsp;state&nbsp;props

调用多个setState的时候，react会对这些state批量处理，减少渲染次数提高性能

初始化

更新

就是在拦截了dispatch(action)这一步，然后执行别的逻辑再走dispath

第一轮和vue一样，后面开始记录位置，如果能在老节点里找到，则移动到前面，没有则新增一个在前面，然后新的多了新增，旧的多了删除

不使用ssr的话，先加载首页再获取异步数据动态渲染到首页，而开启ssr，省略了链式fetch异步数据，返回一个有数据的首页，浏览器直接渲染

sitemap.xml

canonical网址规范化

ssr

语义化标签

ssr服务端渲染

ssg静态站点生成

isr增量静态再生

pages router需要使用use

app router默认服务端组件

RSC通过Suspence加异步组件流式渲染

默认RSC

解决持久化缓存layout问题

强大的文件约束，如loading,error等

一些组件在服务端渲染好，所以叫服务端渲染

生成一些字符串给前端，然后前端进行一些hydrate操作

然后把props，data这些扔进去

在服务器上流式传输&nbsp;HTML。<br><br>要实现这个功能，需要从原来的方法切换renderToString切换到新renderToPipeableStream方法。<br><br>客户端的选择性注水作用。<br><br>使用&nbsp;hydrateRoot&nbsp;代替&nbsp;createRoot&nbsp;方法。

fallback:false

fallback:true

fallback:blocking

自定义组件

https://nextjs.org/docs/pages/api-reference/functions/get-static-paths#getstaticpaths-return-values

说一下webpack/roolup/vite/esbuild的区别?

webpack有做过哪些优化？

说一下hash的种类？

loader和plugin的区别？

怎么把css打包到一个文件？

说一下url-loader和file-loader的区别？

说一下生产环境和开发环境分别使用什么sourcemap，为什么？

loader的原理？

plugin的原理？

说一下HMR的原理？

说一下webpack的原理？

说一下webpack怎么打包成多页面？

说一下webpackd的模块联邦？

说一下webpack提示安装第三方包？

说一下tree-shaking的原理？

打包过程，每步做了什么？

webpack code split原理？

webpack写loader和plugin?

说一下vite的依赖预构建？

vite的原理？

rust写的，速度更快

函数级别缓存

按需编译

在nextjs中0配置使用，不过还不支持生产环境

lcp最大内容绘制2.5s

fid首次输入延迟100ms

cls累计布局偏移0.1

网络层

代码层

构建层

渲染层

window.onerror捕获网络错误

Vue.config.errorHandler捕获vue组件错误

react&nbsp;ErrorBoundary

页面埋点

数据上报/数据采集

数据存储/数据清洗

汇总统计

报警展示

优化整改

grid有网格数量限制的兼容性问题

定位瀑布流

grid瀑布流

建vite模版

迁移代码

排坑

vite优化

css3变量做的，一个初始化主题的函数（判断本地localStorage是否有主题），一个监听变化的函数（使用window.matchMedia('prefers-color-scheme:dark')），然后给html加dark，然后css3变量改变主题

后期使用tailwind darkmode

matchMedia&nbsp;=&nbsp;window.matchMedia('(prefers-color-scheme:dark)')<br>&nbsp;&nbsp;//&nbsp;监听主题变更<br>&nbsp;&nbsp;matchMedia.onchange&nbsp;=&nbsp;function&nbsp;()&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;toggleTheme(matchMedia.matches,&nbsp;true)<br>&nbsp;&nbsp;}

工厂模式的核心思想是定义一个工厂函数或类来封装对象的创建过程，将对象的实例化过程从业务逻辑中分离出来，使得代码更加灵活和可维护

一个类仅有一个实例，并提供一个全局访问点，单例模式的核心思想是使用一个变量来存储类的实例，并提供一个静态方法来获取这个实例

js中抽离变的数据，通过map来做

适配器作为中间层，根据不同情况，输出不同接口

尾递归

其他类型

const&nbsp;flat&nbsp;=&nbsp;(arr)&nbsp;=&gt;&nbsp;{ &nbsp;&nbsp;return&nbsp;arr.reduce((pre,&nbsp;cur)&nbsp;=&gt;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;pre.concat(Array.isArray(cur)&nbsp;?&nbsp;flat(cur)&nbsp;:&nbsp;cur) &nbsp;&nbsp;},&nbsp;[]) }

function&nbsp;myNew(fn,...args){<br>&nbsp;&nbsp;const&nbsp;obj&nbsp;=&nbsp;Object.create(fn.prototype)<br>&nbsp;&nbsp;const&nbsp;res&nbsp;=&nbsp;fn.apply(obj,args)<br>&nbsp;&nbsp;return&nbsp;typeof&nbsp;res&nbsp;===&nbsp;'object'&nbsp;&amp;&amp;&nbsp;res!==null&nbsp;?&nbsp;res&nbsp;:&nbsp;obj<br>}

function&nbsp;MyInstanceOf(a,&nbsp;b)&nbsp;{<br>&nbsp;&nbsp;let&nbsp;proto&nbsp;=&nbsp;a.__proto__&nbsp;//隐式原型<br>&nbsp;&nbsp;let&nbsp;prototype&nbsp;=&nbsp;b.prototype&nbsp;//显式原型<br>&nbsp;&nbsp;while&nbsp;(true)&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(proto&nbsp;===&nbsp;null)&nbsp;return&nbsp;false<br>&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(proto&nbsp;===&nbsp;prototype)&nbsp;return&nbsp;true<br>&nbsp;&nbsp;&nbsp;&nbsp;proto&nbsp;=&nbsp;proto.__proto__<br>&nbsp;&nbsp;}<br>}<br>

数组的存储空间是有序的，元素的查找更快，链表是不连续存储空间，元素的删除插入更快

层序遍历（广度优先）O(n)在一层循环中读取left和right