前端面试大全
- 一、html+css
- 1、垂直定位的实现方式
- 二、javascript
- 1、深拷贝浅拷贝
- 2、作用域
- 3、原型+原型链
- 4、防抖+节流
- 5、设计模式
- 6、闭包
- 7、js的事件循环机制
- 三、ES6+
- 1、
- 四、typescript
- 五、vue
- 1、什么是SPA
- 1、vue2和vue3的区别【高频】
- 2、生命周期
- 3、computed+watch
- 4、ref和reactive的区别
- 六、react
- 七、uni-app
- 八、Cesium+openlayer
- 九、Threejs
- 十、nginx
- 其他
- 1、websocket
- 2、如何防止网站遭受xxs攻击
- 3、前端性能优化
集成各种实际面试题和常谈的面试题
一、html+css
1、垂直定位的实现方式
二、javascript
1、深拷贝浅拷贝
2、作用域
3、原型+原型链
4、防抖+节流
5、设计模式
- 创建型
- 单例模式
- 基本概念:确保类只有一个实例,并提供全局访问。
- 实现要点:通过闭包或者静态属性缓存实例,构造函数私有化。
- 应用场景:1)全局状态管理;2)页面唯一弹窗组件;3)数据库连接池(避免多次连接开销)
- 工厂模式
- 基本概念: 通过工厂函数进行封装,根据输入返回不同实例。
- 应用场景: 1)UI组件库根据类型生成按钮等
- 建造者模式
- 原型模式:
- 基本概念:克隆现有对象创建新实例,减少重复初始化开销;
- 应用场景:1)复杂配置对象的快速复制(如Three.js材质配置)
- 单例模式
- 结构型
- 代理模式
- 基本概念:通过代理对象控制目标对象的访问,添加额外逻辑
- 应用场景:1)图片懒加载(占位图代理真实图片);2)缓存代理(缓存API响应,较少重复请求);3)权限校验(删除前确认)
- 适配器模式
- 基本概念:转换接口使不兼容对象协调工作
- 应用场景:1)数据格式转换(后端json适配前端组件props)
- 装饰者模式
- 基本概念:动态为对象添加职责,不修改原类
- 应用场景:1)扩展函数功能(添加日志记录,性能监控);2)表单验证链(逐步叠加校验规则)
- 组合模式
- 代理模式
- 行为型
- 策略模式
- 观察者模式
- 基本概念:对象间一对多依赖,状态变化时,自动通知订阅者
- 应用场景:1)事件监听系统(DOM事件等)
- 发布订阅模式
- 基本概念:通过消息中心,解耦发布者和订阅者
- 应用场景:1)跨组件通信(如vue的EventBus);2)微前端架构中模块间的消息传递
- 原生js实现:
class PubSub {constructor() {this.topics = {}; // 保存所有主题及其订阅者 }subscribe(topic, callback) {if (!this.topics[topic]) {this.topics[topic] = [];}this.topics[topic].push(callback);return () => this.unsubscribe(topic, callback); // 返回取消订阅的方法 }unsubscribe(topic, callback) {if (this.topics[topic]) {this.topics[topic] = this.topics[topic].filter(cb => cb !== callback);}}publish(topic, data) {if (this.topics[topic]) {this.topics[topic].forEach(callback => callback(data));}}
}// 使用示例
const pubsub = new PubSub();// 订阅者
const subscriber1 = (data) => console.log('Subscriber1 收到:', data);
const subscriber2 = (data) => console.log('Subscriber2 收到:', data);// 订阅主题 'news'
const unsubscribe1 = pubsub.subscribe('news', subscriber1);
pubsub.subscribe('news', subscriber2);// 发布消息
pubsub.publish('news', { title: 'Breaking News', content: 'Something happened!' });// 取消订阅
unsubscribe1();
pubsub.publish('news', { title: 'Another News' }); // Subscriber1 不再接收
- 中介者模式
- 状态模式
- 职责链模式
6、闭包
- 什么是闭包
- 闭包是指一个函数能记住并并访问外部函数内部的变量。
- 闭包为什么会产生内存泄漏
- 闭包会无意中保留对外部大量数据的引用,导致这些数据无法被垃圾回收,从而引发内存泄漏。
- 如何消除闭包造成的内存泄露呢
- 断开不必要的应用
- 原理: 应用变量设置为null/undefined
- 实现:变量接受闭包函数,使用完后,该变量置为null,即使闭包函数的引用为null,间接的使用长期引用的变量置为null。
- 及时清理闭包
- 原理: 当闭包作为回调函数时,比如定时器,可以清除定时器
- 使用弱引用
- 原理: 使用WeakMap或者WeakSet存储对象,而不会阻止垃圾回收。弱引用存储时,当没有强引用指向弱引用对象时,弱引用会被自动回收。
- 避免全局闭包
- 原理: 如果一个闭包是全局的,那么这个闭包会一直存在到内存中,直到脚本结束。
- 断开不必要的应用
7、js的事件循环机制
事件循环机制是JS处理异步操作的核心。比如定时器、Promise、async/await。js是单线程的,通过事件循环实现了非阻塞的异步操作。
-
事件循环机制的主要作用
- 确保js引擎不会被阻塞
- 在主线程完成同步任务后,处理队列中的异步任务
-
事件循环执行的顺序
- 主线程中的同步任务;(同步任务压栈)
- 执行所有微任务队列:每次宏任务执行完后,立即执行所有微任务(promise)
- 执行一个宏任务:执行所有宏任务(定时器,I/O操作)
- 执行所有微任务
- 循环执行最后两步,直到没有微任务和宏任务
-
主线程阻塞的解决方案
- 使用定时器分解任务
- 使用web workers
- 避免长同步代码
- 优化I/O操作
-
常见的异步操作
- 定时器
- 网络请求
- 事件监听
- promise
- 文件操作
- 动画帧
-
如何优化异步代码的性能
- 避免频繁使用定时器和网络请求
- 合并异步处理,promise.all()
- 使用缓存
三、ES6+
主要询问js新特性
1、
四、typescript
五、vue
1、什么是SPA
SPA(Single Page Application)是一种网络应用程序或网站的设计模式。通过动态重写当前页面来与用户交互,而不是从服务器重新加载整个新页面。这种应用程序通过Ajax和JavaScript来实现,使得页面可以在不重新加载的情况下更新。
1、vue2和vue3的区别【高频】
- API设计上的区别
- vue2:使用的是选项式API
- vue3:使用的是组合式API,支持使用函数式编程的风格组织代码逻辑,提升代码复用性和可维护性
- 响应式系统上的区别
- vue2:使用Object.ObjectProperty实现,不支持数组劫持
- vue3:使用Proxy,支持数组劫持
- 组件化上的区别
- vue2:组件化主要依赖自定义指令和插件扩展
- vue3:引入Teleport和Suspense组件,增强组件间的通信和布局能力
- 性能优化上的区别
- vue3: 优化了虚拟DOM实现和响应式系统,提升了渲染速度和内存利用率
- 包体积上的区别
- vue2: 包体积较大,部分功能需要额外安装插件
- vue3: 提供了更轻量的核心库和模块化选项,支持按需加载,减小打包体积
- 兼容性上的区别
- vue2:兼容旧版本浏览器,支持范围较广
- vue3:需要更高的浏览器支持,部分新特性可能需要polyfill。
2、生命周期
3、computed+watch
4、ref和reactive的区别
- ref
- 用于包裹任意类型
- 返回一个响应式对象,具备value属性,需要使用value解包
- 适用于需要频繁访问和修改的基本类型数据, 包裹对象或数组时不如reactive直观
- 性能较低比reactive,因为有value的开销
- reactive
- 仅仅支持引用类型
- 直接返回一个响应式的代理对象,无需通过value访问
六、react
七、uni-app
八、Cesium+openlayer
九、Threejs
十、nginx
其他
1、websocket
-
什么是websocket:一种网络通信协议,允许在单个TCP上进行全双工通信。
-
websocket特点
- 全双工通信:客户端和服务端可以同时发送和接收数据
- 持久连接:一旦建立连接,只能是主动关闭
- 轻量级协议:头部信息较小,减少了通信开销
-
websocket的握手过程
- 客户端发起http请求,并携带请求头:Upgrade:websocket和Connection:Upgrade
- 服务器响应101状态码,并完成协议升级
- 连接建立。
-
websocket的断开重连问题处理
- 监听onclose事件,连接断开时,触发重连逻辑
- 设置重连和最大连接数,避免无线重连导致资源耗尽
-
websocket的使用场景
- 实时聊天
- 在线游戏
- 实时监控
-
websocket连接不稳定的解决方案
- 使用心跳包机制保持连接活跃
- 心跳包机制的实现逻辑:客户端定期发送心跳包;服务器收到心跳包后回复确认;如果超过一定时间未收到心跳包,主动断开连接。
2、如何防止网站遭受xxs攻击
- 严格的输入验证:比如表单、URL参数、cookie等
- 使用白名单机制
- html转义:防止恶意脚本注入
- 配置http安全头
- 定期的安全测试和日志监控、分析
3、前端性能优化
- 资源压缩与合并
- CDN加速
- 延迟/懒加载
- 静态资源缓存
- 使用async或defer属性异步加载js脚本
- 分割代码块
- 移除未使用的css、js代码
- 减少回流和重回
- 避免复杂布局
- Lighthouse性能监控、分析