视频版：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 如何检测到对象中有循环引用 ❎
候选人面经
非常感谢山月老师的模拟面试,让我对知识点有了更深入的理解。以下是我对面试问题的补充:
实习经历
- 时间切换优化:通过缓存来优化时间切换,减少重复计算
- 图片懒加载:监听滚动事件,只加载进入视口的图片,提高页面性能
- Excel文件导出组件:封装导出 Excel 的组件,通过设置表头和数据来生成 Excel 文件
大屏应用注意点
- 自适应:通过媒体查询来实现不同分辨率的自适应
- 首屏优化:代码分割,只加载必要资源,使用骨架屏placeholder提升白屏时间
优化代码中较为冗余的部分
可以通过抽象成组件、提取公共方法、利用继承等方式来减少重复代码
共享画板实现
可以使用 Canvas 结合 Socket.io 实现,Canvas 负责绘制,Socket.io 负责实时通信
IM 一对一聊天表设计
用户表、好友表、消息表,消息表存储发送者、接收者、内容、时间等信息
群聊表设计
群表、群成员表、消息表,消息表同上,存储群 ID
在数据库中如何维护好友
可以建立用户表、好友表,好友表存储用户 ID 和好友 ID 的映射关系
Axios 二次封装
- 拦截器:可以在请求发送前和响应后进行拦截,实现日志、loading 等功能
- 开发环境、生产环境区分:通过
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 记录对象的访问历史来检测循环引用
再次感谢山月老师的模拟面试,让我认识到自己知识的不足,我会继续努力学习,提高自己的技术能力。非常感谢山月老师的指导