当前位置: 首页> 房产> 建材 > 小程序怎么开_电子政务平台官网_做个公司网站多少钱_sem和seo是什么

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

时间:2025/7/11 23:49:17来源:https://blog.csdn.net/weixin_44224921/article/details/145631807 浏览次数:0次
小程序怎么开_电子政务平台官网_做个公司网站多少钱_sem和seo是什么

前端面试大全

    • 一、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性能监控、分析
关键字:小程序怎么开_电子政务平台官网_做个公司网站多少钱_sem和seo是什么

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: