html
行内元素和块级元素有哪些？行内元素怎么转成块级元素？
块级元素：div ul ol li h1 h2 h3 h4…p
行内元素：a b span img input select strong
行内元素转块级元素：diaplay：block | inline-block
css
css水平垂直居中
常用的方法：
子元素宽高已知
1.absolute top 50% left 50% margin-top 子元素高的一半 margin-left 子元素宽的一半
2.absolute top calc(50% - 子元素高的一半) left calc(50% - 子元素宽的一半)
3.absolute top、bottom、left、right均为0 margin：auto
子元素宽高未知
4.flex justify-content: center align-items: center
5.absolute top 50% left 50% transform: translate(-50%, -50%);
6.行内元素 text-align：center；line-height = height
隐藏元素的方法
1.opacity：0
2.display：none
3.visibility：hidden
4.transform： translateX 或者 translateY 足够大的值
5.transform: scale(0,0)
6.position：relative 或 absolute 或者fixed z-index足够小
7.overflow:hidden;
跨端开发h5和pc兼容怎么做
viewport和innerHeight
viewport：视口
vh：浏览器一屏的高度 innerHeight：页面内部高度，包括横向滚动条
如何减少重绘回流
前置信息：
浏览器的渲染过程：
1.解析HTML，生成DOM树，解析CSS，生成CSSOM树
2.将DOM树和CSSOM树结合，生成渲染树(Render Tree)
3.Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
4.Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
5.Display:将像素发送给GPU，展示在页面上
重绘：repainting
回流：relayout
js
数据类型
7个基本数据类型：undefined、null、number、string、boolean、symbol、bigint
1个复杂数据类型：object
原型、原型链
深拷贝浅拷贝
基本数据类型存储在栈中，拷贝的时候拷贝的是数据本身
复杂数据类型存储在堆中，地址存在栈中，所以有深拷贝和浅拷贝的区别，深拷贝拷贝的是堆中的数据，完全复制一份，存储到新的地址中，修改拷贝后的数据对之前的数据没影响，浅拷贝拷贝的是栈中的地址，最终拷贝的数据和之前的数据指向的是同一个地址，共用堆中的数据，任意一方改变数据都会影响另一方。
闭包
防抖节流
防抖：多次连续操作，只执行最后一次（input监听输入并提交请求/监听用户1分钟内无输入提交请求）
节流：高频操作，只执行一次（scroll分页请求，resize）
如何阻止用户多次点击按钮发送请求
加开关，发请求钱打开开关，发请求后关闭开关，请求回来之后打开开关
promise
promise的出现是处理回调地狱的问题，多数情况下用于发送请求，方法有then、catch、all、race，then方法返回的还是一个promise，因此可以链式调用
除了promise.all还能用别的方法等待两个请求回来之后做一些操作吗？
1.请求嵌套
2.computed：依赖两个请求返回的数据
vue
mvvm
MVVM 是 Model-View-ViewModel 的缩写。
Model 代表数据，业务逻辑
View 代表页面展现
ViewModel 连接model和view，model改变驱动view改变，view改变驱动model改变，无需人为参与这个过程，使得开发者只关注业务逻辑，不需要关心操作dom，同步状态等问题。
vue的生命周期
beforeCreate、created、beforeMount、mounted、beforeDestroy、destroyed
created可以发请求吗？为什么？会有什么问题
可以，created的时候已经有data和methods了，可以直接调用方法，发送请求，但是注意不要操作dom，必须要操作dom的话就移动到mounted中或者加nexttick异步操作
data为什么是一个函数
根组件的data是一个对象，其他的组件中定义data是一个函数。 这是因为每个组件内部维护自己的data作用域，如果是一个对象，会互相产生影响，造成变量污染
v-if v-show
v-if用于变化频率不高的显隐状态控制，v-if从隐藏到显示要重新渲染dom
v-show用于变化频率高的显隐状态控制，v-show只是样式控制，不会重新渲染dom
如果为了FCP优化，就用v-if，因为不会渲染false的dom，可以节省时间
如果v-if用在子组件上，那么从隐藏到显示，子组件会经历什么，生命周期会经历哪些？
重新渲染子组件，经历的是完整的生命周期，从beforeCreate开始
v-if v-for为什么不能同时使用？优先级比较
vue2中v-if优先级高于v-for，如果同时使用，每次循环的时候都会判断一次v-if的条件，浪费时间和资源 vue3中v-for优先级高于v-if
v-for为什么用key
性能优化，vue底层在diff时如果有key，就使用key进行对比，这也是不推荐用index作为key的原因 不加key：就地更新 加key：唯一标识
vue diff原理
比较顺序：旧头新头、旧头新尾、旧尾新头、旧尾新尾、查找
vue响应式原理
vue2中用的是Object.defineProperty()
具体来说：数据劫持（Object.defineProperty）+发布订阅模式
Observer，Compile 和 Watcher：
Observer —— 监听 model 的数据变化，
Compile —— 解析编译模板
Watcher 连接 Observer 和 Compile ，达到通信的目的，数据变化驱动视图更新，视图变化驱动数据更新
vue3中用的是proxy和reflect
vue双向数据绑定
依赖的是vue的响应式原理，v-model、.sync都是双向数据绑定
组件通信方式
vue的数据流是单向的，子组件不能直接改变父组件中的变量值
1.props和emit（由于vue的数据是单向的，官方推荐这种方式进行显示改变数据）
2.ref和parent
3.provide和inject
4.eventbus
5.storage
6.vuex
vue为什么是异步更新的
数据是同步更新的，试图是异步更新的。
如果视图更新是同步的，短时间多次修改数据导致多次渲染，浪费资源
参考：v2.cn.vuejs.org/v2/guide/re…
vue官网解释： vue更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。
vue2和vue3有哪方面的区别
生命周期、函数式编程、响应式原理
vue中的map文件
用于记录文件在运行时的报错信息，在上线时可以打包去掉map文件，但是保留map文件可以做前端监控
有没有封装过自定义指令，遇到的问题
vuex
基本概念
5个点：status、getters、mutation、action、modules
能改变status的只有mutation，action可以有异步操作，最后提交mutation来改变status
vuex刷新数据丢失，为什么会丢失，如何处理
vuex本身就不是持久化存储的方案，可以将vuex换成localStorage或者sessionStorage，cookie（少用），或者有vuex持久化存储插件，但是这些插件的原理也是本地化存储，同上三个方法
webpack
热更新原理，怎么通知到浏览器进行局部更新
Hot Module Replacement，简称HMR，是webpack内置的功能 过程如下：
1.启动webpack，生成compiler实例。编译文件，监听本地文件变化。
2.使用express框架启动本地server，让浏览器可以请求本地的静态资源
3.本地server启动之后，再去启动websocket服务，可以建立本地服务和浏览器的双向通信。浏览器就可以知道本地文件变化自动局部刷新页面
vite和webpack在打包和热更新的时候有什么区别
上线的时候所有的文件都会更新吗？第三方依赖会如何变化
其他
跨域
前端性能优化
代码层面： 防抖和节流、减少回流（重排）和重绘、减少 DOM 操作、按需加载、vif、vshow合理使用，vifvelse添加key、路由懒加载、图片懒加载、减少data中的数据直接用this.xx在全局中使用
构建方面：压缩代码文件、开启 gzip 压缩、使用CDN、tree shaking、sourceMap优化
其它：使用 http2、SSR、图片压缩、http 缓存、SSR、骨架屏、前端本地存储
前端存储
cookie、localstorage、session storage
