小程序怎么开_电子政务平台官网_做个公司网站多少钱_sem和seo是什么

集成各种实际面试题和常谈的面试题

一、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性能监控、分析