https://amatsuzero.github.io/LastStand/tags/%E7%AC%AC%E4%BA%8C%E8%BD%AE/Recent content in 第二轮 on Last StandHugozh-cnMon, 28 Jul 2025 14:52:54 +0000https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-66/round-109/Mon, 28 Jul 2025 14:52:54 +0000https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-66/round-109/<blockquote> <p>← <a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-66/round-108/">第 1 轮</a> · <a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-66/">返回本次面经</a> · 已是最后一轮 →</p> </blockquote> <p><strong>本轮概述：</strong> 第二轮对技术深度有一定的考察。 对构建工具有深入理解，能够分析技术选型原因 掌握React核心概念和性能优化技巧 具备网络协议和安全知识 代码实现能力强，能够设计合理的算法和架构 理解设计模式在实际场景中的应用</p> <p>本轮共 14 道题。答案默认折叠，便于先自行作答。</p> <h2 id="question-subjective-f1c0f4f71588">1. Node中间件的作用和使用</h2> <h3 id="题目要点">题目要点</h3> <p>请求拦截处理、横切关注点、链式执行、功能解耦</p> <details> <summary>参考答案</summary> <p>中间件是在请求和响应之间执行的函数，用于处理横切关注点。在Express/Nest.js中，中间件按顺序执行，每个中间件可以修改请求对象、响应对象，或者终止请求-响应循环。</p> <p>常用的中间件包括：</p> <ul> <li>身份验证中间件：验证用户token</li> <li>日志中间件：记录请求信息</li> <li>错误处理中间件：统一处理异常</li> <li>CORS中间件：处理跨域请求</li> <li>参数验证中间件：验证请求参数格式</li> </ul> </details> <h2 id="question-subjective-c12bd009cf82">2. 大模型的理解和应用</h2> <h3 id="题目要点-1">题目要点</h3> <p>语言模型、涌现能力、开发辅助、安全考虑</p> <details> <summary>参考答案</summary> <p>大模型是基于Transformer架构的深度学习模型，通过大规模数据训练获得强大的语言理解和生成能力。主要特点是参数量巨大、涌现能力强、通用性好。</p> <p>在开发中的应用：</p> <ul> <li>代码生成和补全：提高开发效率</li> <li>文档生成：自动生成API文档和注释</li> <li>代码审查：发现潜在问题和优化建议</li> <li>需求分析：辅助理解业务逻辑</li> </ul> <p>使用时需要注意数据安全、结果准确性验证、成本控制等问题。</p> </details> <h2 id="question-subjective-0ea3ab62cd5f">3. Webpack vs Vite 的理解和区别</h2> <h3 id="题目要点-2">题目要点</h3> <p>构建原理差异、性能表现、生态成熟度、配置复杂度</p> <details> <summary>参考答案</summary> <p>Webpack是基于模块打包的构建工具，通过入口文件分析依赖关系，将所有资源打包成bundle。Vite是基于ES模块的构建工具，开发时利用浏览器原生ES模块支持，生产时使用Rollup打包。</p> <p>主要区别：</p> <ul> <li><strong>启动速度</strong>：Vite利用ES模块按需加载，启动更快；Webpack需要预先打包</li> <li><strong>热更新</strong>：Vite基于ES模块的HMR更精确；Webpack需要重新打包相关模块</li> <li><strong>生态系统</strong>：Webpack生态更成熟，插件丰富；Vite相对较新但发展迅速</li> <li><strong>配置复杂度</strong>：Vite开箱即用，配置简单；Webpack配置相对复杂</li> </ul> </details> <h2 id="question-subjective-29f2b86eee7f">4. 项目选择构建工具的考虑</h2> <h3 id="题目要点-3">题目要点</h3> <p>开发体验优先、项目延续性、团队熟悉度、稳定性考虑</p> <details> <summary>参考答案</summary> <p>个人项目选择Vite主要考虑开发体验，启动快、热更新迅速，配置简单，适合快速原型开发。实习项目使用Webpack主要因为：</p> <ul> <li>历史项目延续性，已有完整的配置和工作流</li> <li>团队熟悉度高，维护成本低</li> <li>生态系统成熟，特殊需求的插件支持更好</li> <li>大型项目的稳定性考虑</li> </ul> </details> <h2 id="question-subjective-4d144b12214f">5. Vite 开发环境与生产环境差异</h2> <h3 id="题目要点-4">题目要点</h3> <p>按需加载vs完整打包、开发体验vs生产优化、不同构建工具</p> <details> <summary>参考答案</summary> <p>开发环境：</p>https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-55/round-85/Sun, 27 Jul 2025 15:48:27 +0000https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-55/round-85/<blockquote> <p>← <a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-55/round-84/">第 1 轮</a> · <a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-55/">返回本次面经</a> · 已是最后一轮 →</p> </blockquote> <p><strong>面试时间：</strong> 60分钟</p> <p>本轮共 16 道题。答案默认折叠，便于先自行作答。</p> <h2 id="question-subjective-327d97d7d172">1. 前端和后端有什么区别？</h2> <h3 id="题目要点">题目要点</h3> <p>职责分工不同，前端关注用户体验，后端关注业务逻辑，但需要密切协作完成产品开发。</p> <details> <summary>参考答案</summary> <p>前端和后端在职责、技术栈、关注点等方面都有明显区别。前端主要负责用户界面和交互体验，使用HTML、CSS、JavaScript等技术，关注的是如何让用户更好地使用产品。后端则负责业务逻辑处理、数据存储、系统架构等，使用Java、Python、Node.js等语言，关注的是系统的稳定性、安全性和性能。</p> <p>工作内容上，前端需要将设计稿转化为可交互的页面，处理用户输入、数据展示、页面跳转等；后端需要设计数据库结构、编写API接口、处理业务逻辑、确保数据安全等。思维方式也不同，前端更多从用户角度思考问题，注重体验和视觉效果；后端更多从系统角度思考，注重逻辑严谨性和数据一致性。</p> <p>但两者并不是完全独立的，现代Web开发中前后端需要密切协作，通过API接口进行数据交互，共同完成产品功能。随着技术发展，界限也在模糊，比如Node.js让前端开发者也能做后端开发。</p> </details> <h2 id="question-subjective-a769eef3130d">2. 如果现在有一个需要前后端协作的功能开发需求，你认为前端和后端在沟通和配合上最重要的是什么？</h2> <h3 id="题目要点-1">题目要点</h3> <p>API接口设计一致性、数据格式规范、清晰的沟通方式、完善的联调流程是协作的关键。</p> <details> <summary>参考答案</summary> <p>最重要的是在项目开始前就API接口的设计达成一致。这包括接口的URL设计、请求方法、参数格式、返回数据结构、错误处理方式等。清晰的接口文档能够避免后续很多沟通成本和返工问题。</p> <p>其次是建立统一的数据格式规范。比如时间格式、状态码定义、分页参数等，这些看似细节的问题如果不提前约定，会在开发过程中产生很多摩擦。还要约定好错误处理机制，什么情况下返回什么状态码，错误信息的格式等。</p> <p>沟通方式也很重要。建议使用统一的协作工具，如Postman分享API文档，或者使用Swagger等工具生成接口文档。定期的技术评审会议也必不可少，确保双方对需求理解一致。</p> <p>最后是要建立联调测试的流程。前端可以先用Mock数据开发，后端接口完成后再进行联调，这样能够并行开发，提高效率。</p> </details> <h2 id="question-subjective-8ece703ad1f7">3. 项目是怎么接到的？</h2> <h3 id="题目要点-2">题目要点</h3> <p>通过课程项目、实验室项目、实习项目和个人项目等多种渠道积累开发经验。</p> <details> <summary>参考答案</summary> <p>主要通过几个渠道获得项目经验。首先是课程项目，在Web开发、软件工程等课程中，老师会布置一些实际的开发任务，比如开发一个在线学习平台、图书管理系统等。这些项目虽然规模不大，但涵盖了完整的开发流程。</p> <p>实验室项目是另一个重要来源。导师的研究项目中经常需要开发一些数据展示、实验管理的Web系统，会让研究生参与开发。这类项目更贴近实际应用，需求也更复杂一些。</p> <p>还有就是实习期间参与的公司项目。虽然作为实习生主要是辅助开发，但能够接触到真实的商业项目，了解完整的产品开发流程。</p> <p>另外也会主动寻找一些开源项目参与贡献，或者自己发起一些小项目来练习新技术。比如看到一个有趣的API，就会想着用它开发一个小应用来练手。</p> </details> <h2 id="question-subjective-d94383ceb7e2">4. 讲一个你觉得最有成就感的项目</h2> <h3 id="题目要点-3">题目要点</h3> <p>科研数据可视化平台，解决了性能优化和数据适配的技术挑战，最终被多个实验室采用。</p> <details> <summary>参考答案</summary> <p>最有成就感的是在实验室开发的一个科研数据可视化平台。这个项目是为了帮助实验室的研究人员更好地分析和展示实验数据。</p> <p>项目的挑战在于需要处理大量的科研数据，并且要支持多种图表类型的动态切换。数据量大的时候页面会卡顿，用户体验很差。通过学习和实践，使用了虚拟滚动技术处理大列表，用Web Workers在后台处理数据计算，用Canvas替代DOM渲染复杂图表，最终解决了性能问题。</p> <p>另一个难点是不同研究方向的数据格式差异很大，需要设计一个灵活的数据适配层。通过抽象出通用的数据模型，并提供配置化的字段映射功能，让系统能够适应不同的数据格式。</p> <p>最终这个平台不仅在我们实验室使用，还被其他几个实验室采用，帮助研究人员提高了数据分析效率。看到自己开发的系统真正解决了实际问题，并且得到用户认可，这种成就感是最大的收获。</p> </details> <h2 id="question-subjective-97f2b3016aef">5. 前端怎么样才是一种好的体验？</h2> <h3 id="题目要点-4">题目要点</h3> <p>性能优化、交互反馈改进、错误处理优化、移动端适配、基于反馈的持续改进。</p> <details> <summary>参考答案</summary> <p>好的前端体验应该是用户感知不到技术存在的体验。首先是性能方面，页面加载要快，交互要流畅，用户不应该感受到明显的等待时间。这需要做好资源优化、懒加载、缓存策略等。</p> <p>界面设计要直观易懂，用户能够快速找到需要的功能，操作流程要符合用户习惯。响应式设计也很重要，在不同设备上都能提供良好的体验。</p> <p>交互反馈要及时准确。用户的每个操作都应该有明确的反馈，比如按钮点击效果、加载状态提示、操作结果通知等。错误处理要友好，当出现问题时，要给用户清晰的错误信息和解决建议。</p> <p>可访问性也是好体验的重要组成部分。要考虑到不同能力用户的需求，比如键盘导航、屏幕阅读器支持等。</p> <p>最后是要保持一致性，整个应用的交互模式、视觉风格、信息架构都要保持统一，让用户形成稳定的使用预期。</p> </details> <h2 id="question-subjective-a1e083f32238">6. 平时怎么学习前端的？</h2> <h3 id="题目要点-5">题目要点</h3> <p>系统性学习、实践项目、阅读源码、关注社区、记录总结、保持好奇心。</p> <details> <summary>参考答案</summary> <p>学习前端主要通过几个渠道。首先是系统性学习，通过在线课程平台如慕课网、极客时间等学习完整的技术体系。看技术书籍也很重要，比如《JavaScript高级程序设计》、《CSS权威指南》等经典书籍能够建立扎实的基础。</p> <p>实践是最重要的学习方式。会跟着教程做一些小项目，然后尝试改进和扩展功能。GitHub上有很多优秀的开源项目，通过阅读源码能够学到很多最佳实践。</p> <p>技术社区是获取最新信息的重要渠道。经常浏览掘金、思否、MDN等网站，关注前端技术的发展趋势。参加一些技术分享会和线上讲座，能够了解行业动态和实际应用经验。</p> <p>建立了自己的学习笔记系统，将学到的知识点整理成文档，定期回顾和总结。还会写一些技术博客，通过输出来加深理解。</p> <p>保持好奇心很重要，看到新技术会主动去了解和尝试。比如最近学习了WebAssembly、微前端等新技术，虽然可能暂时用不到，但能够拓宽技术视野。</p> </details> <h2 id="question-subjective-087d2cdb21b3">7. 最近了解到的新技术讲一下</h2> <h3 id="题目要点-6">题目要点</h3> <p>WebAssembly提供高性能计算能力，微前端解决大型应用架构问题，新CSS特性增强布局能力。</p>