本次的候选人大二，成都某校大二，山月个人认为较为优秀，其 HTTP2 方面也回答较好，对其实践的摄像头视频流的处理也较为了解(但还不够，可将扩展知识一同学习，如视频编码、流的使用等)。

其中缺点就是实践偏少，当然这对于一个大二学生而言，要求其项目经验确实强人所难。

对 webpack 构建速度优化的总结也较为不错，但提两点:

1. 应该将书与文档一块来过。这样能够得到最新的最佳实践，因为文档总是与时俱进，而书籍则有可能因软件版本号与出版日期而困，特别对变更过大过频的前端而言
2. 添加实践。如读一些高频使用 Vue/React 脚手架的 webpack 配置文件，了解他们的默认配置，并可将最佳实践在个人/团队项目中进行实践

总的来说还是相当优秀，且才大二，未来可期。

以下是面试记录

视频版: 成都某 985 大二学生前端面试实录，基础很强，强过诸多两年经验，期待一个实习，个人预测毕业即大厂SP Offer

以下是简历大致内容:

山月的面试问题记录

• ES6
  • 如何学习
  • 构造100个全为0的数组
    • Array.prototype.fill
    • Array.from
  • Array.prototype.flat
  • TypedArray/ArrayBuffer ✅
    • uint8
    • uint16
• Streams API / 了解即可
  • Streams API: https://developer.mozilla.org/en-US/docs/Web/API/Streams_API
• Image Capture ✅
  • MediaStream API: https://developer.mozilla.org/en-US/docs/Web/API/MediaStream
  • https://developer.mozilla.org/en-US/docs/Web/API/ImageCapture
• Blob API ✅
  • savaAs 源码
• HTTP 状态码
  • https://q.shanyue.tech/base/http/51.html
  • 502
  • 504
• cors 相关的字段
  • • 安全性问题
  • cookie 携带问题
• http2
  • frame/stream ✅
  • 多路复用
  • priority
  • 对头阻塞
  • server push
  • undici (http1.1 的请求库) ✅
• server push 与 ws 的区别
  • https://q.shanyue.tech/base/http/392.html
• webpack 学习及优化
  • 深入浅出webpack
  • 路径解析优化
  • include/exclude
  • resolve -> alias/extensions/modules
  • uglify -> terser ❎
  • cssloader -> mintsize -> cssnano
  • tree shaking
  • happypack -> thread-loader ！！！
• React 的优化方法
  • 复杂计算 -> useMemo -> useWorker
  • https://github.com/alewin/useWorker
• 基于人脸识别的音乐播放器

候选人的面经

面试总结：有一些问题没有回答上来，对ES6、http的了解的深度不够；有些学习的资料有点过时，比如webpack的参考很多是webpack4时代的，需要更新一些知识；基础知识有些细节记得不是很清楚，还需要反复记忆巩固。

一些没答好的题目总结：

1. ES6的ArrayBuffer和Blob，以及二进制视频流相关的（x）
   • 参考：https://es6.ruanyifeng.com/#docs/arraybuffer
2. 怎么保存一个Blob格式的文件（x）
   • 通过a标签的download属性，然后通过createObjectURL为Blob生成一个url并设置为a标签的href，就可以实现下载。
3. CORS的Access-Control-Allow-Origin字段设置为*有什么问题（x）
   • 浏览器不会发送cookies
   • 安全问题
4. http2的主动推送(server push)和websocket有什么区别（x）
   • HTTP2 Server Push，一般用以服务器根据解析 index.html 同时推送 JPG/JS/CSS 等资源，而免了服务器发送多次请求
   • websocket，用以服务器与客户端手动编写代码去推送进行数据通信
5. http 502和504的区别：
   • 502 Bad Gateway。一般表现为你自己写的应用层服务(Java/Go/PHP)挂了，网关层无法接收到响应
   • 504 Gateway Timeout。一般表现为应用层服务 (upstream) 超时，如查库操作耗时十分钟，超过了 Nginx 配置的超时时间
6. webpack优化中的一些方式已经过时了
   • happypack --- 用 thread-loader替代
   • 压缩js --- TerserWebpackPlugin
   • 压缩css --- cssnano或CssMinimizerWebpackPlugin都可以
   • treeshaking的开启方式 --- package.json中的sideEffects选项

字幕

可对照字幕与视频进行快速浏览:

见 https://github.com/shfshanyue/Daily-Question/blob/master/mock/220522.srt