直接先推荐一个前端在线的面试题库：https://vue3js.cn/interview/
语言基础
· JavaScript
1. ES6或最新版ECMAScript有哪些新特性？
箭头函数、块级作用域、静态模块import/export、类class、模板字符串、解构赋值、扩展运算符、Promise等
2. 使用var、let、const语句声明变量有什么区别？
块级作用域、变量提升、暂时性死区等
3. Promise有哪些方法？有哪些库或常用方法使用了Promise？除了Promise还有哪些处理异步代码的方案？
then、catch、finally、resolve、reject、all、race、allsettled等
import()，fetch，axios等
async/await等
4. 浏览器中有哪些常用内置对象？
Array、Object、Math、Event、RegExp、URL、Blob、File
5. 创建对象有哪些常用方法？
字面量、原型继承、Object.create
6. 浏览器的事件模型有哪些？有多少种绑定事件的方法？怎么创建和触发自定义事件？
事件冒泡、事件委托
在元素节点上添加onclick等属性、给元素节点的onclick等属性赋值、调用元素节点的addEventListener方法
创建一个继承Event的对象，在元素节点上调用dispatchEvent
7. 有哪些值得使用jQuery的场景？为什么新项目用jQuery比较少了？
需要兼容IE浏览器、有第三方插件依赖jQuery等
随着ECMAScript标准化，jQuery已经与原生JavaScript相差不大；现代工程使用corejs库来兼容各种语言特性；
8. 浏览器有哪些持久化存储方案？
cookie、seesionStorage、localStorage、indexedDB
9. 数组有哪些方法？
1. filter、map、foreach、reduce、splice等
10. JavaScript支持哪些编程范式？支持封装、继承、多态吗？支持函数式编程吗？举例
面向过程、面向对象、函数式等等都支持
支持，数组的reduce方法
· CSS
1. 什么时候最适合使用浮动而不使用其他特性？
图片文字环绕
2. 除了浮动，还有什么布局方式？
flex、grid、绝对定位、相对定位等等
3. 同一行的图片和文字如何对齐？
vertical-align、相对定位、改变边距等等
4. 常用的CSS预编译器有哪些？为什么使用预编译器？
SASS、Less、stylus等
使用变量、继承、模块、枚举等原生CSS不支持的特性，更高效编写样式
5. CSS3有哪些新特性？
变量、圆角、阴影、渐变、平移旋转变换、过渡、动画、Flex布局、媒体查询等等
6. 盒模型有几种？区别是什么？
content-box、border-box
width值是否包含padding
7. CSS有哪些选择器？不同选择器的权重如何计算？
ID、类、相邻元素、子元素、通配符、标签、属性、伪类、伪元素等等
内联样式>ID>类、伪类、属性>标签、伪元素>通配符、子元素、相邻元素>继承样式（实际上并没有计算公式）
8. 两个块级元素的垂直方向外边距都设置成20px，实际两个元素的间距是多少？
会发生外边距合并，实际为20px
9. 怎么设置字体？怎么设置自定义字体？
font-family
@font-face
10. 纯CSS怎么实现作用域？有哪些避免CSS污染的方案？
CSS3还无法实现
借助JavaScript可以实现动态改变类名，从而保持元素的样式受控，参考Vue的scoped方案；还有CSS Module、styled-component等；
· HTML
1. HTML5有哪些新特性？
canvas、video、audio、details、header、footer等等新标签；Geolocation定位API；拖放API；Web Worker多线程支持；WebSocket双工通信支持；
2. 常见的块级和行内元素有哪些？
块级：div、p、ul、li、table、h1-h6、form；行内：span、a、i、label、img、input、button、select；
3. jpg、png、svg有什么区别？
jpg、png都是标量图，svg是矢量图；jpg有损压缩，png无损压缩；svg符合HTML标准；
4. form元素的所有子元素中，input元素的数量只有一个，在输入框中回车会发生什么？
会自动提交表单，并重定向到目标地址
5. img元素的alt属性有什么用？
客户端代理不支持图像显示或用户关闭图像显示的情况下，会使用alt的字符代替图像显示
6. iframe有什么使用场景？
方便加载第三方内容、利用沙箱机制进行安全隔离、用来触发资源下载、发起跨域请求等
· NodeJS
1. NodeJS相比其他服务端程序有什么特点？
事件驱动、非阻塞IO
2. SSR同构有什么优点？缺点？
利于SSO，首屏渲染速度更快，首屏数据到来时间更短，在移动网络有更好的用户体验
2. 耗费服务器资源较多，技术架构复杂
工程化和框架
· Webpack/rollup/vite/gulp
1. Webpack的作用？
1. 将代码、样式表、页面、图片等源文件打包为静态资源；作为代理服务器，在本机启动项目；通过插件和加载器，实现各类功能（如编译特殊代码、代码Tree Shaking、依赖分析、资源压缩优化等等）
2. Webpack和Gulp的区别？
1. 前者是资源打包工具，专注于从源文件到目标文件的转换过程，后者是一个功能丰富的自动化脚本引擎，可以编写任意工作流，两者可以结合使用；
3. Vite的特点？
1. 基于ES Module的开发服务器，跳过Webpack的“打包”概念，使用浏览器解析代码源文件，属于下一代构建工具
· React/Redux/Mobx/react-router
1. React Hooks和Class组件区别？
2. Redux和Mobx区别？
3. 函数式组件的特点？
· Vue/Vuex/vue-router
1. Vue的生命周期？
1. 从Vue组件实例创建到销毁的过程，包含创建、初始化数据、编译模板、挂载DOM、渲染、更新、卸载等步骤
2. 组件第一次加载会触发哪些方法？
beforeCreate、created、beforeMount、mounted
3. DOM渲染在哪个方法执行前完成？
mounted
4. v-show和v-if的区别？
v-show是样式切换，DOM结构仍保持不变，不会触发组件生命周期；v-if是完整的销毁和重新创建组件，触发生命周期，性能成本更高；
5. 有哪些常用指令？
v-model数据双向绑定、v-html更新innerHTML、v-if条件渲染、v-on绑定事件、v-for循环渲染、v-bind绑定属性
6. 有几种路由跳转方式？
显式声明router-link路由组件
执行router.push等方法
7. computed和watch有什么区别？
前者是计算属性，具有缓存，适合数据的实时计算；后者是监听属性，用于观察数据变化然后执行回调函数
8. scoped属性的作用？原理？
实现了样式的私有化，隔离CSS作用域，防止一个组件的样式污染其他组件
动态的给组件添加一个带有哈希字符的属性，使用属性选择器匹配样式表
9. Vue组件的data为什么只能是函数？
当一个组件有多个实例时，data函数每次执行时会返回一个对象，各个实例之间的数据互相隔离，不会导致数据冲突
10. 组件之间传值有几种方式？
自定义事件监听、子组件调用$emit向父组件发送消息、使用Vuex共享数据
数据可视化
· 报表
1. 大数据量的滚动优化
· 图形库
1. ECharts
性能优化、浏览器
· 渲染
1. 浏览器加载到HTML文件后，通过哪些步骤完成页面渲染？
1. 解析HTML文档、同步或异步加载资源文件、根据标签构建DOM树、根据样式表构建CSSOM树、将CSS与DOM整合为渲染树、调用底层接口绘图
2. 回流和重绘的区别？
1. 前者指的是某个元素的CSS改变（如宽高、边距、定位），引起页面布局变化，需要整体重新绘制页面；后者指的是改变CSS未引起布局变化，仅重新绘制该元素
· 网络
1. 怎么查看多个HTTP请求是否建立在同一个TCP连接上？
Chrome Network中可以显示TCP连接号
2. 浏览器并发请求数是多少？
不同浏览器实现不一样，一般都支持同域下4-8个并发请求
3. 在浏览器中，什么是简单请求？非简单请求？有什么作用（跨域的原理）？
请求方法为GET、HEAD、POST，且没有自定义的请求头，且内容类型为text/plain、multipart/form-data、application/x-www-form-urlencoded
2. DELETE、PUT，或自定义请求头，或内容类型为application/json等不满足简单请求条件的
3. 简单请求可以跨域发出请求和接收响应，非简单请求在跨域时会先发出OPTIONS预检请求，询问服务端允许的请求方法和请求头，若服务端表示接收此请求，则正常通信，反之只能发起请求，不能接收响应（响应被浏览器拦截）
· 缓存
1. 开发模式怎么禁用缓存？
Chrome Network可以禁用缓存
2. 生产模式怎么禁用缓存？
1. 设置请求头Cache-Control: no-store；设置唯一的资源文件名；
3. HTTP有几种缓存？
1. 强缓存，以缓存过期时间判断是否使用缓存；协商缓存，客户端和服务端通过请求头的配置共同确定是否使用缓存；
微前端
· 技术架构
1. 有哪些技术方案可以实现微前端？
Nginx路由转发；iframe；Web Components；组合式应用路由分发（qiankun）；
2. 微前端由哪些模块组成？
包含一个基座和多个微应用；基座负责应用注册、路由映射、消息转发、请求代理等，微应用实现业务逻辑，不限制技术栈，且微应用脱离基座也可以访问。
3. 微前端要解决哪些问题？
路由切换的应用分发问题，用户点击菜单或触发跳转后，基座需要拦截跳转并处理权限、应用配置等逻辑；
各应用的隔离问题，不同技术栈或相同技术栈都可能会有代码执行冲突，CSS冲突，基座需要对应用间进行上下文隔离和上下文恢复；
各应用的通信问题，完全的隔离反而会降低性能和便利性，基座和应用、应用和应用之间需要能够通信和复用组件；
4. 基座如何加载应用资源？
通过fetch API加载远端的HTML文件，再解析并加载其他脚本、样式表，成熟的库如import-html-entry；
5. 基座如何拦截路由并支持不同技术栈的应用？
触发跳转前，基座的router模块接收跳转事件，检查用户权限，查找目标应用是否已注册和加载过，再拉取或加载目标应用，微应用加载后会根据路由进行渲染相应组件；
6. 如何实现应用隔离？
CSS隔离：采用CSS Module、类名命名空间等方案；JavaScript隔离：利用Proxy对象模拟沙箱机制；
7. 有哪些成熟的微应用框架？
single-spa、qiankun、icestark等等
https://www.yuque.com/zaotalk/road/ggh0zg
8. 微前端有哪些优势？
基座和微应用的整体自动化部署和交付，类似于微服务的集群；各应用的独立开发能力；整个系统统一的监控、埋点、访问控制能力等等；