header标签（前端面试题）

直接先推荐一个前端在线的面试题库：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. 微前端有哪些优势？

基座和微应用的整体自动化部署和交付，类似于微服务的集群；各应用的独立开发能力；整个系统统一的监控、埋点、访问控制能力等等；