模拟面试
230913. 大四秋招期望大厂

视频版:2024届北京实习同学的前端模拟面试,基础不错,目标上海杭州武汉的大厂 (opens in a new tab)

山月的面试问题记录

  • 实习经历(空气质量监测)
    • 时间切换优化
    • 图片懒加载
    • Excel文件导出组件
  • 大屏应用注意点
    • 自适应
    • 首屏优化
  • 优化代码中较为冗余的部分
  • 共享画板实现
  • IM 一对一聊天表设计
  • 群聊表设计
  • 在数据库中如何维护好友
    • 1:1
  • Axios 二次封装
    • 拦截器
    • 开发环境、生产环境区分
      • process.env.NODE_ENV
  • css 盒模型
  • HTTP 状态码
    • 204/206/301/302/304/307/308/400/401/403/404/405
  • HTTPS 建立连接的过程
  • 如何保证证书没有被篡改 ❎
  • 使用 express 配置跨域
  • JS 基础数据类型
    • bigint
  • HTTP 中如何传递 JSON ❎
  • HTTP 中如何传递 bigint
  • Promise.allSettled()
  • isArray
  • JS 如何检测到对象中有循环引用 ❎

候选人面经

非常感谢山月老师的模拟面试,让我对知识点有了更深入的理解。以下是我对面试问题的补充:

实习经历

  1. 时间切换优化:通过缓存来优化时间切换,减少重复计算
  2. 图片懒加载:监听滚动事件,只加载进入视口的图片,提高页面性能
  3. Excel文件导出组件:封装导出 Excel 的组件,通过设置表头和数据来生成 Excel 文件

大屏应用注意点

  1. 自适应:通过媒体查询来实现不同分辨率的自适应
  2. 首屏优化:代码分割,只加载必要资源,使用骨架屏placeholder提升白屏时间

优化代码中较为冗余的部分

可以通过抽象成组件、提取公共方法、利用继承等方式来减少重复代码

共享画板实现

可以使用 Canvas 结合 Socket.io 实现,Canvas 负责绘制,Socket.io 负责实时通信

IM 一对一聊天表设计

用户表、好友表、消息表,消息表存储发送者、接收者、内容、时间等信息

群聊表设计

群表、群成员表、消息表,消息表同上,存储群 ID

在数据库中如何维护好友

可以建立用户表、好友表,好友表存储用户 ID 和好友 ID 的映射关系

Axios 二次封装

  1. 拦截器:可以在请求发送前和响应后进行拦截,实现日志、loading 等功能
  2. 开发环境、生产环境区分:通过 process.env.NODE_ENV 来区分环境

css 盒模型

内容(content)、内边距(padding)、边框(border)、外边距(margin)

HTTP 状态码

204:无内容
206:部分内容
301:永久重定向
302:临时重定向
304:未修改
307:临时重定向
308:永久重定向 400:请求错误
401:未授权
403:禁止访问
404:未找到
405:方法不允许

HTTPS 建立连接的过程

客户端发送连接请求,服务器响应证书,客户端验证证书,协商生成会话密钥,通信加密

如何保证证书没有被篡改❎

客户端会验证证书的有效性,包括检查证书链、检查证书是否被吊销、检查证书中的域名,电子签名等

使用 express 配置跨域

可以通过 CORS 中间件实现,允许指定域访问 API

JS 基础数据类型

大于 2^53-1 的整数可以使用 bigint 表示

HTTP 中如何传递 JSON❎

通过请求头中的 Content-Type 指定 application/json

HTTP 中如何传递 bigint

需要转成字符串后再传递

Promise.allSettled()

返回所有 promise 结果,不管 fulfilled 或 rejected

isArray

判断一个值是否为数组

JS 如何检测到对象中有循环引用❎

可以通过 WeakMap 记录对象的访问历史来检测循环引用

再次感谢山月老师的模拟面试,让我认识到自己知识的不足,我会继续努力学习,提高自己的技术能力。非常感谢山月老师的指导