快手前端校招一面面经 🤔🤔🤔

最近在使用 NestJs 和 NextJs 在做一个协同文档 DocFlow，如果感兴趣，欢迎 star，有任何疑问，欢迎加我微信进行咨询 yunmz777

面试问题与详细答案：

1. 自我介绍两个项目，为什么要做，为什么项目难点等，后续在面试过程中延伸问答。

第一个项目是我参与的一个电商平台的数据分析项目，主要目的是通过分析用户行为数据，优化推荐算法。项目的难点在于处理大规模的用户数据，并且要实现高效的实时数据分析。我通过使用 Python 与 SQL 技术对数据进行清洗、预处理和分析，最终帮助平台提升了个性化推荐的精度。第二个项目是一个前端开发项目，目标是提高网站加载速度和响应性。该项目的难点是如何优化页面性能，特别是在低带宽环境下。通过使用异步加载和懒加载技术，我们显著提高了页面加载速度，解决了跨浏览器兼容性问题，改善了用户体验。

2. 大规模模型输入输出如何支持多模态？

大规模模型支持多模态输入输出，通常采用多模态神经网络架构，如 Transformer 和 BERT 等。这些模型可以同时处理不同类型的数据输入，如文本、图像、语音等。通过使用共享的表示学习方法（例如交叉注意力机制），模型可以从多个模态中提取特征，并融合这些特征以生成一个统一的表示。这样，模型就能够处理更复杂的输入和输出，如图文匹配、视觉问答等应用。

3. 为什么选择的原生大模型的流式响应而不是 SSE？

流式响应（Streaming Response）相比 SSE（Server-Sent Events）在高并发、低延迟场景下表现更好，尤其是在实时数据流处理时。流式响应可以在请求发起后持续地推送数据，而 SSE 是单向通信，更适合较为简单的事件推送。流式响应的优势在于它能够通过多线程或多进程处理多个请求，具有更高的可扩展性，适合大规模分布式系统中的数据传输需求。

4. FMP 排查方案

FMP（First Meaningful Paint）是衡量页面首次有意义内容渲染的时间，影响用户体验。排查 FMP 性能问题时，首先应检查关键资源（如 CSS、JavaScript 文件）的加载顺序，确保这些资源在渲染前尽早加载。其次，使用浏览器开发者工具（如 Chrome DevTools）进行性能分析，查看资源加载、执行脚本和渲染的具体时间，找出影响 FMP 的瓶颈。常见的优化措施包括：减少阻塞资源、采用异步加载技术、减少 DOM 操作、压缩图片等。

5. 白屏的原因

白屏问题通常由以下几种原因导致：

资源加载失败：CSS、JavaScript 或图片资源未能正确加载，导致页面无法渲染。
JavaScript 错误：脚本错误导致页面渲染过程被中断。
浏览器兼容性问题：某些 CSS 样式或 JavaScript 代码在不同浏览器中的表现不同，可能导致渲染失败。解决方案包括：使用开发者工具查看加载的资源和脚本，确保所有资源都正确加载，检查浏览器控制台的错误信息，避免阻塞渲染的文件。

6. http 和 https 的区别

HTTP（HyperText Transfer Protocol）和 HTTPS（HyperText Transfer Protocol Secure）的主要区别在于安全性。HTTP 是明文传输数据，容易受到中间人攻击。而 HTTPS 则使用 SSL/TLS 协议加密数据传输，确保数据在传输过程中不被窃取或篡改。HTTPS 通过数字证书验证服务器身份，增强了通信的安全性，特别适用于需要保护用户敏感信息的场景，如支付、登录等。

7. 从输入 url 发生了什么？

当用户输入 URL 并按下回车时，浏览器首先通过 DNS 查询解析出 URL 对应的 IP 地址。然后，浏览器通过 TCP/IP 协议与服务器建立连接，并发送 HTTP 或 HTTPS 请求，服务器返回响应数据。浏览器接收到响应后，会根据页面内容开始渲染，包括 HTML 解析、CSS 样式应用、JavaScript 执行以及图片等资源加载，最终将页面显示给用户。

8. 代码输出手写，除了 let 替换法外，要求必须写出其他方法

除了使用let，JavaScript 中还可以使用var和const来声明变量。var是传统的声明方式，它的作用域是函数作用域；而let和const属于 ES6 引入的新特性，具有块级作用域。const用于声明常量，值一旦赋值后不能修改。此外，可以通过闭包和模块化方法来避免全局变量，确保变量作用域的安全性。

9. CSS 手写：垂直居中+平移

css 复制代码

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 使用视口高度使容器充满整个屏幕 */
}
.element {
  transform: translateY(-50%); /* 使用平移实现精确居中 */
}

通过使用 Flexbox 布局，可以轻松地实现水平和垂直居中。transform: translateY(-50%)用于精确地将元素垂直平移 50%，达到完美居中的效果。

10. 如果在实际开发中，用户输入显示推荐词的方案，你倾向于防抖还是节流，为什么？

在这种情况下，我倾向于使用防抖（debounce）技术。防抖的核心思想是只有当用户停止输入一定时间后，才触发请求，这样可以有效避免输入过程中每次按键都发送请求。防抖能够显著减少不必要的请求，提升性能并减少服务器负担。节流则适用于需要定时触发的场景，例如定时滚动事件等。

11. 防止应用类：用户来回在网好的/不好的地方发请求，怎么确保正常解析请求？

针对网络不稳定的情况，我会使用请求重试机制，确保请求成功。当网络环境较差时，可以自动重新发起请求，或者通过提示用户稍后再试。同时，可以实现本地缓存策略，在请求失败时从本地缓存中获取数据，确保用户能够继续访问内容。

12. 内存泄漏的原因除了闭包还有什么？

除了闭包导致的内存泄漏，常见的原因还有：

全局变量：全局变量生命周期过长，无法被垃圾回收机制清理，容易造成内存泄漏。
DOM 引用：JavaScript 对象持有对已删除 DOM 节点的引用，导致内存无法释放。
事件监听器：如果没有手动移除不再需要的事件监听器，也会导致内存泄漏。
定时器：未清除的定时器（如setInterval）会持续占用内存，导致内存泄漏。

面试评价与总结

这份面试题目全面考察了候选人的技术基础、系统设计与性能优化以及解决实际问题的能力：

技术基础：涵盖了前端开发中核心的技术栈，如 JavaScript、CSS、HTTP 协议等，考察了候选人对基础知识的掌握和运用能力。
系统设计与性能优化：面试中的问题深入探讨了如何设计高效的系统，如何进行性能优化，特别是在大规模并发和实时数据处理中的应用。
解决问题的能力：通过考察实际开发中的常见问题，如内存泄漏、白屏问题、网络请求的可靠性等，评估了候选人在面对复杂问题时的分析、诊断和解决能力。

总的来说，这份面试题目不仅考察了基础的编程能力，还涵盖了较高阶的系统设计与性能优化，适合用于技术岗位的面试。它能够全面地评估候选人在技术深度、广度以及实际问题解决方面的综合能力。