前端面试
2025-07-01 22:55:12 0 举报AI智能生成
在一场典型的前端面试中，您可能会遇到一系列涵盖多个核心领域的具体问题和挑战。首先，面试官可能会从HTML、CSS和JavaScript的基础问题开始，这些问题旨在评估您对基本概念的理解和技术的熟练程度。随后，您可能会被要求编写代码或者解决一个编码问题，以证明您在实际场景中应用这些技能的能力。另外，问题可能还会涉及前端框架如React、Angular或者Vue的使用经验和最佳实践。此外，现代前端工作流程和工具链的知识，比如Webpack、Babel、NPM以及Git等，也是面试中的常客。由于性能优化和SEO在现代网站开发中占据着重要地位，因此您可能会被问及如何提高网站速度和SEO排名。最后，您可能会讨论自己在以往项目中的经验、遇到的挑战以及如何解决它们，以及对响应式设计、跨浏览器兼容性和前端安全性的理解。综上所述，一个全面的前端面试是衡量一个求职者是否具备必要技能以及能否应对实际工作挑战的重要工具。
作者其他创作
大纲/内容
js基础
变量提升/函数声明提升
函数声明优先级最高，会覆盖同名变量
代码在编译阶段会先进行变量和函数的声明提升的操作
作用域
全局作用域
函数作用域
块作用域
作用域链
this指向
new生成新对象
call/apply/bind 绑定this
函数对象的方法调用
默认绑定全局
隐式转换
引用类型先转成基本类型
数组转成元素拼接的字符串
对象转成'[object Object]'
基本类型都转成数字
布尔值
true = 1
false = 0
字符串
空字符串转成0
都往数字上靠
原型链
构造函数的prototype指向原型对象
原型对象的constructor指向构造函数
构造函数的实例的__proto__指向原型对象
new的实现
生成一个空对象
空对象的proto指向构造函数的原型对象 Object.setPrototypeOf(obj, fn.prototype)
this指向新对象
执行构造函数的代码
返回新对象
浏览器的事件循环机制
宏任务
同步代码
setInterVal/setTimeout
I/0操作
用户的交互事件
微任务
promise.then
mutationObserver
箭头函数
继承外层作用域的this
不能当作构造函数
没有arguments对象
没有原型属性
垃圾回收
栈
通过指针下移
堆
新生代
存放小的以及存活时间短的对象
活动区域
空闲区域
两者交替
老生代
放大的以及存活时间长的对象
标记清除
产生碎片之后将所有对象靠边放
map和object的区别
object的key只能是字符串和symbol；map的key可以是任意类型
object的key的数量需要手动计算；map可以通过size获取
object只能用for in循环；map可以通过for of
map适用于需要频繁对key进行增删的场景。object不适合
map和weakMap的区别
weakMap的key只能是对象，且是弱引用的，如果检测到没有被引用，就会自动回收
map的key可以是任何类型，需要手动回收
promise
概念
异步编程的解决方案
解决了回调地狱的问题
有三个状态：进行中/已完成/已拒绝
任务完成了就是从进行中到已完成；失败了就是从进行中到已拒绝
一旦状态改变就不能再更改为其他状态
无法取消
通过resolve和reject来改变状态
通过then可以链式调用
all
都成功返回结果数据，有一个失败只返回失败的结果
race
返回第一个成功或者失败的结果
allSettled
等待所有promise完成，并返回结果数组
内存泄漏
闭包
定时器
引用dom的变量
全局变量
console.log
proxy 和 reflect
为什么要结合使用
需要reflect的reviver传递正确的执行上下文，保证this的正确指向
esModule和commonJS
commonJs输出的是值的拷贝，输出之后，模块内部的改变不会再影响已经输出的值
esModules输出的是值的引用，当读取值的之后才去module内读取值，如果module内部改变了值，会影响到外面的引用
网络
http
http1到http2的升级
多路复用
首部压缩
服务端推送
https加密
非对称加密结合对称加密
缓存
强缓存
expires
cache- control
max-age
no-cache
协商缓存
last-modified
if-modified-since
e-tag
if-none-match
状态码
200
3xx
301 永久重定向
302临时重定向
304命中缓存
4xx
400 请求体语法错误
401 需要用户验证
403 被拒绝
404 未找到
500 服务端错误
浏览器
同源策略
域名 协议 端口一致、
跨域
cors
cookie
seesion
local storage
sessionStroage
安全
xss
方式
脚本注入
解决
转义
禁止执行内连脚本
禁止读取cookie
csrf
方式
诱导跳转三方页面，携带源页面的cookie
解决
cookie: samesite=strict 禁止三方页面携带cookie
csrf token
vue
响应式原理
初始化阶段劫持数据设置getter和setter
渲染阶段，读取数据，触发getter，生成watcher实例，加入到dep
更新阶段，修改数据，触发setter，遍历dep，挨个触发watcher
vue3的升级
响应式处理
vue2: object.defineProperty
无法监听数组的按索引修改值
重写了数组的方法
无法监听对象key的增删
vue3: proxy
性能的提升
响应式数据的处理
vue2在初始化的时候需要递归处理data中所有的数据
vue3基于proxy实现的ref/reactive在运行时
v-for vs v-if
vue2
for优先级高
vue3
反之
diff算法
vue2
头头对比
头尾对比
新增新列表中未遍历到的节点
删除老列表中未遍历到的节点
vue3
标记静态元素
头头对比 尾尾对比
找出最长递增子序列
处理剩下的节点
setup
隐藏了beforeCreate和created声明周期
生命周期
onBeforeMount
onMounted
onBeforeUpdate
onUpdated
onBeforeUnmount
onUnmounted
onActiveted
onDeactiveted
watch
vue2是对象
vue3是函数
computed
同上
响应式数据
vue2
函数返回一个data
vue3
ref/reactive
ts类型支持友好
v3是用ts写的
vue3
ref 和 reactive的区别
读取方式
ref需要.value
reactive不需要
for what
ref for 基本类型数据 也可复杂类型
reactive 复杂类型数据 only
实现原理
reactive
proxy对传入的数据进行响应式包装
ref
首先用reactive包装了一层，增加 value 属性，然后proxy监听value 属性
watch和watchEffect的区别
watch
声明依赖对象
可以拿到oldValue
默认初始化不会执行
immediate：true 就会先执行
watchEffect
不需要声明依赖对象
拿不到oldvalue
初始化就会执行
设置flush：post可以更新之后的dom 或者 watchPostEffect
组件通信
props / emit
provide/inject
vueX/pinia
expose/ref
性能优化
包体积优化
tree shaking
使用支持es模块的依赖
defineAsyncComponent 组件懒加载
代码层面
props稳定性
v-once
v-memo
computed 稳定性
大型数据的稳定性
shallowRef/shallowReactive 只做浅层的响应式处理
不必要的组件抽象
hash 和 history的区别
hash
有个#
onhashChange
hash值不会出现在请求中
history
没有#
pushState/replaceState
刷新后，服务端没有对应配置会404
react
diff算法
同层级diff
遍历新旧列表，遍历结束处理剩下的节点
fiber架构
背景
之前的树结构无法中断，一次性渲染有卡顿
如何解决
改为链表结构，可中断
requestIdleCallback
时间分片：利用浏览器空闲时间执行任务
双缓冲机制
维护两颗fiber树。交替更新保证连续性
hook为什么不能写在条件语句
底层将所有hook串成了一个链表
usecallback / useMemo
useMemo 处理值
useCallback 处理函数
useEffect
依赖项空数组
只会执行一次
执行时机
页面渲染完之后
useLayoutEffect
页面渲染前执行
useState和useRef的区别
useState的数据必须通过setState修改，是异步的，会触发页面更新，每次渲染都是独立的
useRef：在current中直接修改，是同步的，不会触发页面更新
组件通信
props
子组件用forwardRef包裹，通过useImperativeHandle暴露方法，父组件通过ref调用
逻辑/状态复用
自定义hook
状态提升
renderProps
命名冲突
HOC 高阶组件
命名冲突
context
redux
触发重新渲染的条件
被父组件连带更新
props变化
setState
消费的context变化
react的并发模式
fiber的可中断渲染
批处理
多个setState放在一批处理
过渡更新
startTranstion和useTranstion 标记非紧急更新，不阻塞交互
性能优化
useMemo/useCallback
Memo包裹组件
props变了才更新
状态就近原则
较少无关组件渲染
避免内连对象作为props
每次都是新的引用
key的作用
元素的唯一标识，方便复用元素
合成事件
事件冒泡
抹平浏览器差异
bff
背景
后端升级为微服务结构
细粒度
职责单一
问题
过度获取数据/数据冗余
前端迭代快，后端为了追求稳定，不想频繁迭代
需要支持多端数据
解决
bff代替客户端请求服务端
rpc更快
对数据剪裁
bff可以自由封装接口适配迭代和不同平台
接管权限校验
rpc 对比 http
协议
rpc 基于tcp，更快
http 基于http
序列化
http是json
rpc是二进制
微前端
解决了什么问题
巨石应用
技术栈升级困难
协作效率低
服务升级慢
优点
独立开发部署
技术栈独立
渐进式升级
高复用性
缺点
复杂度高
调试困难
通信问题
样式污染问题
适合
系统复杂
多团队协作
技术栈不同
实现
样式隔离
shadowdom/监听应用加载收集/卸载移除
js隔离
proxy代理window对象实现隔离
路由匹配动态加载子应用
ts
type和interface的区别
type不能继承
type不能重名 interface重名会合并
工程化
webpack
构建流程
合并命令的配置和配置文件生成 compile 对象
从入口处开始递归查找所有模块，调用loder对所有文件进行处理，得到所有的依赖关系
根据依赖关系打包成chunk，加入到输出列表
生成出口文件，写入结果
热更新
启动阶段注入热更新代码
开启一个开发服务器
用websocket链接服务器和浏览器
监听文件变哈
重新编译
通知浏览器拉取更新
浏览器拉取更新并替换
触发更新回调
loader
处理文件内容
让webpack能处理除js以外的文件
自定义开发
接收一个source，处理完返回新的source
plugin
做一些额外的事情
自定义开发
实现一个具有apply方法的类
compiler
负责整个构建的过程
暴露了不同生命周期的hook
compilation
代表一次具体的构建过程
负责模块的创建优化和资源的处理
优化
开发阶段
缓存
cache配置项
减少loader和plugin的处理范围
设置include/exclude
多进程/多实例构建
添加thread-loader
优化路径解析
配置alias别名
生产性能
减少包体积
tree shaking
代码分割
splitChunks
资源压缩
minimize
css抽离/压缩
vite
为什么快
利用浏览器支持es的特性
劫持浏览器请求返回编译后的代码
启动
不需要全量编译
按需请求编译
执行依赖预构建
原因
兼容性
将commonJs和umd的转换为es模块
性能
将包含多个模块的依赖构建为单个模块
用到哪个构建就构建哪个
缓存
构建好的模块设置为强缓存
热更新
检测模块变化
通知浏览器请求对应模块
按需编译对应模块并返回
替换更新对应模块
优化
依赖预构建
指定或排除要构建处理的依赖项
optimizeDeps
include/exclude
生产构建优化
代码分割
output.manualChunks
资源压缩
cdn加速
external
monorepo
优势
代码复用
依赖管理
统一版本控制
统一工作流
基建
ci/cd
缺点
仓库变大
引入额外工具链进行管理
造成ide的卡顿
依赖管理
方式
将依赖提升到根目录下的node_module
pnpm的workspace
问题
可能会造成幽灵依赖
0 条评论
下一页
