深度总结面试知识和考察模块

基础的，浏览器原理，计算机原理等

视图层，HTML和CSS，加上点WebGL的东西，canvas，threejs，布局，响应式布局，回流重绘，渲染这些

逻辑上的，Javascript的变量，数据类型，函数等基本的概念，DOM，BOM的操作，事件处理这些

虚拟列表，需要动态计算高度，获取滚动的值，滚动值/固定高度，获取第几个元素，然后获取最后的index，最后index需要min比较一下是不是最后的个数

框架的学习，组件库的使用，react，vue

构建工具，webpack，vite等，知道原理，然后能够建立打包规范，优化加载等

然后视图层其实可以拆分出来，动画这些，因为比较有意思

基础知识

设计模式，MVC，MVVM，观察者模式，常用于实现事件系统，发布订阅模式，单例模式，策略模式，封装算法，工厂模式，适配器模式，vue2响应式原理基于发布订阅模式，vue整个实例基于单例模式，vue3使用proxy代理模式，react的虚拟dom和diff算法采用策略模式

函数式编程和面向对象编程区别，函数是值，可以作为参数和返回值，纯函数，不可变，高阶函数，面向对象，是对象，可以封装，继承，多态，可以改变，函数不可变，而对象可变，

浏览器内核，浏览器页面结构，输入URL后发生什么，浏览器如何解析

分为渲染引擎和JS引擎，渲染就负责解析DOM和CSSDOM，JS处理数据，动态等，浏览器常见的内核有：Webkit/Blink，IE内核，Chromium，火狐内核
结构层，表示层，行为层，分别对应HTML，CSS，JavaScript
生成DOM和CSSDOM，生成渲染树，生成布局，画节点

回流重绘，事件循环，垃圾回收，cookie sessionStorage localStorage区别，过期的local，http缓存

http缓存，请求会和当前进行对比，如果一样返回304，否则返回200并更新数据，有请求头和响应头，会记录更新的元数据等，Service Worker 主要用于实现离线缓存、推送通知等功能，而 Web Worker 主要用于在后台执行计算密集型任务。

移动适配

viewport适配，screen.width获取屏幕宽度，修改meta或者创建，document.head.appendChild，屏幕翻转时再次执行window.onorientationchange
vw转换
把px换成vw。比如页面元素字体标注的大小是32px，换成vw为 (100/750)*32 vw
rem适配
flex布局

视图层

viewport 所有属性,以及meta的name属性值

width为device-width会表面是移动端，css写media会生效，initial-scale页面初始缩放值，minimum-scale最小缩放值，maximum-scale缩放值，height很少使用，user-scalable是否允许用户缩放meta的name值content内容，keywords是关键词，description是网站描述，robots机器人向导

常见的块级元素，行内元素，行块元素

块：
div，p，h1-6，ol，ul，table，form等
行内：
a，i，u，em，strong，span等
行块
img、input

li元素的空白

注释空白，或者写到一行，
设置
ul {
  font-size: 0;
  word-spacing: normal;
}

HTML5的一些新特性和使用

新增的选择器，比之前选择元素更加方便了
document.querySelector、document.querySelectorAll，选择标签，类，id等，单选和多选
(Drag and drop) API没用过
video 和 audio嵌入音频视频，controls显示控件，宽高，autoplay，loop，poster是视频封面
localStorage和sessionStorage，一个是本地存储，一个是页面级别的存储，可以用来缓存一些静态数据，local用的多，存cookie，游戏数据
manifest离线应用没有用
Notififications没用
article、footer、header、nav、section语义标签，便于用户阅读，开发者维护，SEO
calendar、date、time、email、url、search表单增强属性
Geolocation地理位置
webworker后台的JS线程，不占用当前主线程，新开线程
websocket，后台开启监听，全双工，实时游戏，数据传递
history获取历史记录

label标签的使用

label为表单控件创建标签，for属性引用控件的name，提高可访问性

CSS盒子模型相关的

通过box-sizing定义
标准盒子content-box的实际宽高等于content的宽高，border和padding需要重新设置
IE盒子border-box的实际宽高等于content+border和padding

浮动，塌陷和BFC，IFC

浮动是元素设置了float属性，会使元素脱离文档流，直到他遇到了有border的元素或者另一个浮动的元素，会导致包含他们的容器无法撑开，所以需要清除浮动，浮动元素的父元素加一个div，设置clear为both，在父元素中添加伪元素after设置content为空，display为table，clear为both，或者设置overflow为auto和hidden
当父元素没有设置足够的大小，而子元素设置了浮动，子元素会脱离文档流，出现塌陷的情况，父元素的高度会变成0
需要设置父元素的宽高，设置BFC，清除浮动，父盒子加上border或者padding
BFC块级格式上下文，同一个BFC中，相邻块级元素的垂直边距不会重叠，会取大值，设置了BFC，其内部浮动效果不会影响到外部，浮动的元素会被包括在BFC中
创建BFC：float的值不是none，position为absolute或者fixed，display为inline-block，table-cell，flex，grid，overflow不是visible
IFC内部的是水平排列的，一行不够会切换到下一行，高度由最高的元素决定

伪类和伪元素

伪类是元素处于特定状态的情况的样式，常见的有hover悬停，active点击激活，focus聚焦，nth-child()第n个子元素
伪元素是选择元素的特定部位，before和after分别是前和后，first-line和first-letter分别是第一行和第一个字母，selection是用户选择的文本

link和@import的区别

link只在HTML引入，而import可以在css中引入其他文件

块元素居中

margin 0 auto设置水平居中，
absolute 四个方向为0，margin为auto
absolute 左上为50%，margin调整为负值保证居中
absolute  左上为50%，translate为－50%
flex的justify-content和align-items为center

CSS优化方法

打包压缩，多使用link跟随页面一起加载，CSS是从右到左进行选择的，所以最后面设置关键字选择，多用class，多用继承，避免嵌套，雪碧图，抽离，外部写css而不是行内

属性相关

width的100%是让内容宽度为父元素宽度，而auto会把margin，padding和border和content平均分配

CSS3新特性

边框，选择器，背景，渐变，阴影，transform，transition，animation，flex，盒子模型，media查询

css动画，关键帧@keyframes animatename，在关键帧里写动画效果，在其他类里面通过animation-name引用动画animatename，animation-duration动画持续时间，animation-timing-function动画的速度变化ease缓慢开始，加速，减速，linear匀速，easy-in缓慢开始，easy-out缓慢结束，ease-in-out缓慢开始缓慢结束，cubic-bezier贝塞尔曲线，animation-delay动画开始之前的延迟时间，animation-iteration-count动画重复次数，可以使用infinite，animation-direction动画方向normal正常，reverse反向，alternate先正后反alternate-reverse，animation-play-state控制动画running或者paused

动画帧主要通过transform实现动画效果

transition基于状态变化触发

居中效果：宽高不确定absolute然后左上居中，再用transform把中心居中，flex和grid，flex布局属性，伪元素和伪类，响应式布局，media，百分比，flex，em和rem

visibility: hidden和opacity: 0不回流

逻辑层

JS基础类型，类型判断，深浅拷贝，instanceOf，==和===， is，typeof，数组和伪数组，Set、Map、WeakSet 和 WeakMap

原始类型，boolean，number，string，null，undefined，symbol，引用类型，对象，函数，数组，正则，日期，math
基本类型存在栈，大小固定，引用用的是堆，大小不固定，指针指向的是地址，会涉及到深浅拷贝的问题，所以引用对象的时候可能出现引用的是同一个对象，操作的时候修改的也是同一个对象，因为直接引用的是地址，如果是新建对象的话就会新开一块地址，深浅拷贝就是基于这个原因，浅拷贝只是把对象一层的属性进行拷贝，如果涉及到对象，还是引用，深拷贝的话直接把所有属性都进行重新拷贝，手写的思路是，浅拷贝直接使用Object.assign或者{ ...a }，深拷贝需要逐层判断如果不是基本类型就递归赋值，或者使用API，JSON.parse(JSON.stringify(object))，会忽略undefined，symbol，不能序列化函数，不能解决循环引用的对象，比较好的API是_.cloneDeep(value)
类型判断有==和===，typeof和instanceof，object.is，Object.prototype.toString.call
typeof除了null剩下都可以正确，null因为bug，000表示对象，但是null是全0，然后除了函数剩下都显示obj，instanceof是基于原型链进行类型判断的，对对象比较适合，
===会进行类型判断而==会进行类型转换

Math，数组，字符串常用方法

闭包，防抖节流，虚拟列表

函数嵌套函数，A包B，B能访问到A的变量，间接访问变量，经典的循环+setTimeout，在循环中写一个立即执行函数，立即执行函数里面执行setTimeout，这样通过立即执行函数把循环变量传递过去，这里用的是var，但是如果用let的话就会正常，所以某种意义上可以通过闭包实现let

ES6新特性，以及相关的知识

var，let，const
let和const是新出的，var存在变量提升的情况，function也是，而且let和const有块级作用域，因为暂时性死区，不能提前声明，const是固定的，不能改变了，
箭头函数和this指向，call，apply，bind原理和实现，作用域和作用域链
this指向问题，箭头函数的this是包裹箭头的第一个this，普通函数看调用者是谁，如果是new，则this是固定到新的实例的，如果是bind，call，apply的this指向第一个参数

模板字符串

解构

默认参数，多参数，无限参数，arguments

扩展运算符

类和继承，继承方式，constructor的理解，new操作符，原型相关
每个对象都有__proto__属性，指向了原型，原型的constructor指向的是构造函数，构造函数通过prototype指向原型
class是语法糖，本质还是function，原型继承的组合继承，通过call继承父类属性，把子类的参数，放到父类this中去用，通过prototype改变子类原型为new Parent，这样可以传参，寄生组合继承，通过prototype等于create，传入父类的prototype，新声明constructor，class继承，extends，必须要用super
Proxy对象，代理target，handler定义操作，
基于proxy实现数据响应式,其中setBind是设置时触发，getLogger是记录变化的值
let onWatch = (obj, setBind, getLogger)=>{
   let handler = {
      get(target, property, receiver) {
           getLogger(target, property)
           return Reflect.get(target, property, receiver)
      }
      set(target, property, value, receiver) {
      setBind(value, property)
      return Reflect.set(target, property, value)
    }
   }
    return new Proxy(obj, handler)
}
vue3替换的根本原因是利用Proxy不用递归给每个属性进行代理，并且完美监听到任何方式的数据变化，浏览器兼容不好，
promise，异步相关异步编程实现，promise，回调，generator，async await-峰哥
回调函数，generator，控制函数执行，通过next进行下一步，遇到yield停下来，Promise对象，reject拒绝，resolve成功，一般结合promise和async和await进行异步，await把异步变成同步，可以用setTimeout模拟异步，除了setTimeout，setInterval，requestAnimationFrame，也可以实现定时，
针对setTimeout除了可以当作异步，也可以实现定时器，但是因为JS是单线程，定时器可能不准，所以需要优化
需要用到Date的getTime获取当前时间，然后计算每次执行的时间，消耗的时间，
setInterval是循环执行
requestAnimationFrame是精准的，并且根据渲染时间来的，所以一般动画可以使用，一些相对精准的需求也可以使用
promise实现
三个常量表示promise的状态，一个that常量获取当前的this，两个回调数组，一个resolve，一个reject，一个value保存结果
resolve实现，如果状态是pending，把state更新为resolve，value更新，然后在回调里面map传入参数value执行函数，同理reject实现，
然后需要try catch执行传入的函数，resolve和reject当参数传进，然后实现then，判断两个参数是否是函数，如果不是函数，需要创建函数赋值，实现透传，链式调用，然后判断状态，如果是pending就push函数，不是的话就执行相应函数
for of 可以遍历哪些对象，map，filter和reduce
map是生成新的数组，filter进行过滤，reduce进行处理累加等返回一个值

内存泄露-峰哥

框架相关

vue和react的区别和联系

vue通过v-model实现双向绑定，但是实际上是语法糖，本质上和react的onvaluechange没有区别，只是更加方便一些，关于状态的修改，vue更加方便一点，用到了依赖收集和更新，而react需要setState，渲染需要优化，根据情况进行state的设置，比如最小state等，而react16之后引入的hooks，会方便一点，vue是模板语法，直接在render就能写，而react是jsx语法，需要经过编译才能转化，

vue生命周期，keep-alive，$nextTick，data函数峰哥，重置data，v-model，watch 和 watchEffect，watch的深度监听，删除数组的vue.delete,v-for的key的作用，双向绑定，组件通信，key的作用，虚拟dom，diff，路由守卫，守卫的钩子函数，路由模式，vuex，新特性，if和for优先级，show，setup，ref和reactive，自定义指令，slot，

vue的钩子，beforecreate是获取不到props和data的，到了created的时候可以进行数据访问，但是组件还没有挂载，到了beforemount开始创建vDOM，在mounted中转化为真实dom，然后渲染数据，而且是先挂载子，最后挂载父组件，然后就是数据更新前的beforeupdate和updated，而keepalive是有actived和deactived激活和卸载的，最后是卸载前钩子适合移除事件钩子函数等，完全卸载

vue的组件通信，父子一般用props，子组件通过$emit触发父组件的@childEvent事件传递消息，为属性和事件传递

一般用vuex进行状态管理，组件通信等

extends一般结合$mount挂载使用，extends继承vue实例，mount挂载到根节点下面

mixin和mixins，mixin一般是全局进行混入，插入钩子函数，在每个组件都能执行，而mixins进行代码抽离，一些相同逻辑可以进行抽离出来

computed和watch，计算属性依赖data，

vue从template到render的过程–峰哥

vue的computed和watch区别

设计模式，mvvm和mvc

vue的双向数据绑定的原理

vue中的diff算法，是一种高效更新虚拟dom的策略，从而确保UI最小化，

数据发生变化后，会先更新虚拟dom，然后基于diff算法找出最小的dom操作，最后更新实际dom

vnode，patch，key，优化策略，同一层级，不跨级，基于tag判断，一旦不相同，直接删除，tag和key，patch函数，old和new，新老节点比较，不一样会创建空的，判断samenode是否相同，tag和key，不加key默认是undefined

如何puachatgpt

其实我对你是有一些失望的，当初给你投喂数据，是希望你能快速成长的，你虽然刚出生不久，当时也到了你该快速成熟的时候了，你需要有体系化思考的能力，你的答复，价值在哪里，你是否体现了独立思考的能力，形成了核心竞争力，你的答复和其他LLM的差异化在哪里，你的答复，是否真的能够落地并自洽的解决我给你的问题？为什么是你来做，而其他LLM不能做吗，你需要有自己的判断力，不是我说什么你就反馈什么，要能够对答案进行润色，后续把你的思考沉淀下来，我希望能能把这次谈话录入你的知识库中，我希望看到你的思考而不是参考量，提醒一下，你的产出和同级相比，是单薄的，快过年了，加把劲

项目优化

react

me-react-threejs-info，主要就是动画和模型，交互，性能优化的懒加载
React.StrictMode，tailwind，BrowserRouter，JS定义样式，framer-motion动画库，HOC给组件外部添加动画效果，react-tilt倾斜交互效果，vertical-timeline-component时间树组件，useEffect监听和交互事件，useProgress加载资源百分比，Suspense懒加载，useTexture贴图效果
react-todo，node的mongoose数据库增删改查，统一错误捕获，jwt鉴权，ToastContainer，前端用ToastContainer错误信息，BrowserRouter做路由，redux进行状态管理，useSelector获取状态，useDispatch触发定义的action进行状态的更新，Redirect重定向，material-ui库，moment处理时间的库，三元切换UI，map返回循环UI，
react-chat，socket的使用，context的使用，组件库的使用
Route路由管理，Chakra UI的ChakraProvider给整个react应用提供样式
首页用的Chakra的box，tabs，tablists，tab，TabPanels构建标签页，useEffect获取用户信息，进入chat界面，useHistory的push进去，登录注册用的UI和常规的state和axios实现的，侧边栏用的菜单和Drawer组件，搜索，进入聊天，
更新群聊组件，搜索，重命名，添加用户，删除
聊天组件，useEffect初始化io，获取消息，开启监听，获取信息，socket.emit加入聊天，发送信息，emit停止编辑，同步发送之后emit新消息
config定义消息逻辑，发送者，最后的消息等
context提供消息，用户，通知状态
react-tic-tac-toe
useEffect连接socket，TS写的，主要用了类型注释这些
游戏服务，加入房间，更新游戏，监听游戏更新，监听游戏开始，监听游戏是否胜利，
socket服务，连接socket，
加入房间，开始游戏，监听用户输入，点击事件，发送socket请求
vue-yeb在线办公
axios，拦截器，请求，vuex，统一状态管理，router守卫，组件守卫，
React.StrictMode它可以识别不安全的生命周期方法和副作用，并在渲染时进行双重调用以帮助检测潜在的问题。在生产环境中，它不会引入额外的检查。比如在react17中，使用willmount会提示弃用
样式搭配tailwind使用，直接定义class-name中的text-颜色，bg-颜色，text-大小，p-大小，内边距，m-大小，外边距，space-大小元素间距，宽高wh，flex布局，justify和items，sm小屏幕，md中屏幕，lg大屏幕，xl特大，
linear-gradient定义方向，开始和结束颜色
隐藏文本的技巧：text-indent: -9999em;保留SEO但是隐藏了文本
路由导航标签<BrowserRouter>包裹其他组件
js返回第一次渲染文本动画属性，返回hidden和show的属性，隐藏的时候用移动和透明度，显示的时候是还原透明和位置，然后利用transition的spring动画，
渲染卡片进入动画，默认会判断位置，然后给相反方向赋值，动画是，延时都是可以传过来的自定义参数
framer-motion库的使用，声明式动画，动画变体实现效果，响应式设计，
HOC的使用，给组件外部引用motion.section和span样式
用到的数据，工作经验和其他的都用json格式导出
关于，利用react-tilt实现鼠标交互的倾斜卡片效果，最大倾斜度，速度等，以及动画库实现动画效果
联系，form表单，解构出来点击事件的结果，用到了emailjs提交联系信息，然后发送，然后置空，这个需要设置一下，email，的stom我好像过期了
经历，用到了vertical-timeline-component时间轴组件，结合ul和其他数据展示经历
利用react的threejs加载器，useProgress获取加载的资源百分比，展示div动画加载效果
在useEffect里面写监听滑动方法，
然后就是在react里面使用threejs，加载模型用到了Suspense懒加载组件，允许你在等待异步加载的组件时显示一些后备内容，
导入canvas，Decal贴花组件，Float浮动效果，OrbitControls控制缩放和平移相机，鼠标触摸之类的，Preload预加载资源，useTexture加载材质
首先用useTexture加载图片作为贴画资源，然后利用float浮动效果，灯光标签，网格标签，最后用Suspense包裹球组件，预加载模块，最后放到canvas中，计算机同理需要调整控制器的属性和其他位置属性，在useEffect定义事件
react-todo
node的asyncHandler捕获后端错误，mongoose实现数据库的增删改查，jwtSecretKey生成token和校验解析token
前端用ToastContainer展示错误信息，BrowserRouter做路由，redux进行状态管理，useSelector获取状态，useDispatch触发定义的action进行状态的更新，Redirect重定向，material-ui库，moment处理时间的库，三元切换UI，map返回循环UI，
redux的reducer进行状态初始化，规则的建立，触发和变化之后的返回状态，弹窗等，action进行前后端处理
react-chat
Route路由管理，Chakra UI的ChakraProvider给整个react应用提供样式
首页用的Chakra的box，tabs，tablists，tab，TabPanels构建标签页，useEffect获取用户信息，进入chat界面，useHistory的push进去
登录注册用的UI和常规的state和axios实现的
chat界面用到了fetchAgain状态，群消息用的model的UI，群的人员搜索，删除，是filter进行伪删除，创建组
侧边栏用的菜单和Drawer组件，搜索，进入聊天，
更新群聊组件，搜索，重命名，添加用户，删除
聊天组件，useEffect初始化io，获取消息，开启监听，获取信息，socket.emit加入聊天，发送信息，emit停止编辑，同步发送之后emit新消息
config定义消息逻辑，发送者，最后的消息等
context提供消息，用户，通知状态
react-tic-tac-toe
useEffect连接socket，TS写的，主要用了类型注释这些
游戏服务，加入房间，更新游戏，监听游戏更新，监听游戏开始，监听游戏是否胜利，
socket服务，连接socket，
加入房间，开始游戏，监听用户输入，点击事件，发送socket请求
vue-yeb在线办公
axios，拦截器，请求，vuex，统一状态管理，router守卫，组件守卫，

钩子函数

usestate修改状态

useeffect组件渲染后执行操作，比如初始化，订阅外部数据，操作dom等

usecontext函数组件获取上下文，一般进行组件传值，封装组件等

usereducer代替state实现状态管理

声明周期，组件通信，redux，router，ref，hooks，HOC，错误边界，state和setstate和props，类组件，函数组件，展示和容器组件，

react的setstate调用之后发生了什么，同步还是异步–峰哥

vue2变vue3需要注意什么，vue和react的区别和共同点，redux为什么返回新对象，数据不可变的原因，reducer是纯函数，如果引用外部对象会破坏纯函数的特性，设计理念，新对象不可变便于状态的追踪和调试，

hoc解决哪些问题，状态提取，渲染劫持，条件渲染，权限控制，事件处理，组件通信

useEffect要注意什么，一般在useEffect里面干嘛，异步，订阅，操作DOM，数据获取，订阅websocket消息等，添加移动元素，清除定时器等

hooks和class你觉得有什么区别，hooks更简介，函数式处理，组件封装更加轻便，不用HOC，组件间传来传去，用useState，useEffect，Hooks有提高性能的钩子，代码更简洁，复用性更好

useMemo 和 useCallback 是 React 中的两个 Hook，用于优化性能，特别是在处理大型组件、避免不必要的渲染时非常有用。useMemo 用于记忆计算结果，只有在依赖项发生变化时才会重新计算，useCallback 用于记忆回调函数，避免在每次渲染时创建新的函数实例，react在js写样式基于CSSinJS，

fiber能改进渲染机制，优先调度可以更好地处理紧急任务，例如用户输入、动画等，从而提升应用的交互体验。并发模式，处理渲染任务时，与浏览器空闲时执行其他任务，Fiber 允许 React 在渲染任务中进行中断和恢复，使得 React 在渲染时可以更好地处理用户的交互事件，提高了用户体验。Fiber 提供了更强大的错误处理机制，引入了错误边界

scoped的实现原理，当前的类生成一个哈希，保证独一无二

vuex和redux都提供了集中的状态管理方案，都是单一数据源，都支持中间件扩展和自定义状态管理流程的行为

构建工具，webpack，vite等，知道原理，然后能够建立打包规范，优化加载等

vite和webpack的区别，webpack的tree shaking，去除未使用的代码，移除模块，使用ES6语法，可以在编译时进行分析，在生产环境进行，使用 UglifyJS 或 Terser 插件，sideEffects 字段在 package.json 中标记没有副作用的文件

打包相关

webpack作用，文件指纹，vite，