阿里-淘天-前端面经

先上正文，文末贴复盘以及可以改进的地方表现得很差，但是1小时后通知选2面时间，许愿下次自己能自信点，好好讲解项目自我介绍- 蓝桥杯是什么- 问两个开源项目：   - Threejs 那个怎么说（2年前的项目了，根本不记得多少，扯了一下新版实现，模型优化，看了一下源码解决bug）  - 某音乐网站嵌入 tauri 二次开发（扯了一下写的 vite 插件，实现了把外部网站嵌入到脚手架内实现的直接开发，还有重写部分热重载代码，以及代理后端，实现内容覆盖与整个网站的控制权，以及扯了一下这种跨平台开发要注意的是什么，然后就扯了一下ipc通信与序列化的性能）    - 做了这些插件最终的意义？（提升开发体验与效率） - 这些是自己做的还是实验室做的（第一个跟隔壁实验室哥们一起做的，第二个是自己做的，2023年7月 -> 2024年8月，有GitHub提交可查）- 说一下你对前端工程化的理解（尽可能地实现非业务部分过程自动化，使得开发者可以专注开发）- 用过webpack吗，没有，直接 vite 上手- 说一下你对 vite 的认知，越多越好，尽可能地说（esbuild 开发环境，rollup 生产环境，vite 在加速方面做了哪些努力（esbuild 构建开发环境js，预构建依赖，对源码更新采用链失活处理（仅概念）））- esm cjs（同步与异步导入，import 静态分析）- url 到页面呈现（合法判断，cache，dns，tcp，dom树，cssom，js 阻塞，render tree，绘制，部分 css 送入 gpu 处理）- 说一下用 Astro 的原因（vite 作为底层驱动支持，内容驱动静态网站生成，支持SSG，SSR）- 除了 SSG，SSR 还有什么渲染，区别是什么（ISR，CSR，边缘计算）- Astro SSR 还有哪些应用场景（扯了一下官网文档的电商平台，用户可以先看到页面商品内容，具有交互性质的按钮可以在后续注水激活）- 说一下 yjs 是干什么的（以CRTD为核心思想的并发冲突解决库）- 在线演示平台，平台有多少人在用（不多，给内部人员编辑使用）- 做这个遇到最难的地方是什么（服务端崩溃上下文丢失后内容恢复，说了目前的实现与未来最好实现）- VSCode 插件看一下效果（演示了一下并说了转 ast 做处理的简单流程）笔试第一题：对url中的query参数中将title提取出来：https://aaaaa/?aaa=bbbb&title=dddd创建一个 box，长 100px 宽 50px，插入到整个页面中，要求水平垂直居中针对 box 写一个动画：500ms 后长宽变成 100px700ms 后移动到右上角笔试第二题：```jsfunction get() {}const obj = {  layer1: {    layer2: {      val: 1    }  },  target: [1,2,{ok:1}]}get(obj, 'layer1.layer2.val', 'target[0]', 'target[2].ok')```笔试第三题有一个树：1| \2  3| \4  5现请你遍历该树，并在到达叶子节点时将其前方所有的值拼接为数字，对于本树就是: 124 + 125 + 13 = 262本来要反问了，感觉节奏不对，继续跟面试官扯完了简历上的后两点：- 页面预览实现？  成本有点高，目前思路是转发脚手架页面  曾经做过的努力：  - 用 astro 的编译器看看能不能 build 一些组件并拼接完整页面（不能，必须依赖 node 环境或在浏览器实现需要的 api）  - 用 SSR （审查了 astro 部分源码发现对于 markdown 编译逻辑都是写在 vite 插件内，打包时是直接把 markdown 编译成 js，SSR执行时直接静态出字符串，没有运行时编译过程）  - 11月14号新出的 content layer api，去官方文档看了milestone，其中写清楚了不把运行时编译 markdown 放在目标内，与 astro 的 baseline 与解决问题场景不一致- jsx 编写通用组件？  曾经做过的努力：  - 调研 tinyMVC，在示例仓库里发现他针对各个框架都写了一套 renderless 逻辑，还为此写了一个专门抹平框架差异的函数  - taro，基于编译器实现，背后有编译团队，运行时团队，小程序团队和跨平台团队支持，对于小团队开发成本太高了反问：- base 北京上海- 二面什么时候（已约下周三）- 主要业务？负责抖音头条等搜索处理- 需要改进的地方？（东西做的很多，但是要把项目重点总结好）总结：- 这次面的状态真的很差，比上次腾讯的还差，不清楚是什么原因，但最后不到残血又不会玩，可能我真的需要休息一下吧- 不够自信，项目都是自己做的，但是一问就只能答出想到的点，后面复盘的时候一下子联想到了很多  - 桌面播放器能扯的非常多：rust 过程宏生成 ts 声明辅助开发；dll 打包内联，怎么同时放下 nodejs 脚本，网页注入脚本，还有 rust 自身大小优化；组件库用 storybook 实现预览；针对本地音频文件采用流式传输，计算 range 大小；为什么用户手动安装node，在这之前有做过什么努力吗（pkg，deno，node dll 预制插件打包）；热重载代码为什么不影响原网站（原网站采用 SSR 水合，自己的部分是渲染）；离线访问（包爬虫 + rust 三方库内联到程序内）；具体参考我的博客吧：https://blog.shiinafan.top/posts/%E5%A1%9E%E5%A3%AC%E5%94%B1%E7%89%87%E6%A1%8C%E9%9D%A2%E7%89%88%E6%8A%80%E6%9C%AF%E5%88%86%E6%9E%90/- 笔试表现很差，把简单问题复杂化- 八股文同理，每次一问就进入了意识狭隘的通道，复盘才想起来还有好多可以回答- 没有总结好重点，其次是没有引导面试官到自己熟悉的领域- 说话逻辑有点混乱，没有一口气讲到重点我想我可能需要休息一下，想清楚和搞好状态再继续，下周一腾讯约二面，许愿自己能讲清楚项目内核，先写这么多吧

一面水平垂直居中的实现方案如何页面适配（vw vh）forEach和map的区别深拷贝和浅拷贝的区别cookie sessionStorage和localStorage事件循环是什么手写url解析成对象手写字符串中查找单词出现次数二面css如何实现动态宽度vue中key的作用 原理vue中数组不能实现响应式，怎么弥补这个缺陷vue3中是怎么做的router.js怎么配置vue router原理组件通信方式，除了props和$emitnodejs洋葱模型node接口超时自己实现过webpack吗H5的首屏加载优化如何避免反射型XSS攻击三面为什么选前端对AI怎么看对百度怎么看看过框架的源码吗面完...

#美团前端实习##已OC#已经化身团孝子了！先整理一下时间线吧10.18  一面10.24  二面10.28  口头offer11.01  邮件offer下面就是我的面经了-------------------------------------------------------------------------一面：上来就是自我介绍CSS部分：    position有几个值    怎么实现水平垂直居中    弹性盒子实现方式    css盒模型JS部分：    promise谈谈你的理解    如果有3个请求，首先需要1和2的结果去发出3    说说其他的方式做异步请求    async await怎么处理异常，前面我说了async await    说一下强缓存和协商缓存Vue部分：    说一下vue的生命周期    created和mounted的本质区别    说一下vue通信的方式    provide和inject的数据是响应式吗    事件总线的设计模式    说一下vuex有几部分，分别做什么    action和mutation的区别计算机网络：    tcp和udp的区别    tcp拥塞控制项目：    项目拷打    项目怎么发布的    跨域怎么解决    跨域会携带cookie吗中间穿插三个代码题：    1. 事件循环的代码，看代码说结果    2. 写一下事件总线    3. 写一下快排反问：    我的不足    部门技术栈二面：自我介绍什么时候开始学习前端平时通过什么学习前端？项目选一个你熟悉的说一下说一下项目难点，然后就是一直拷打项目了！前后端联调遇到的困难什么时候可以实习可以实习多久导师方面有阻碍吗你觉得自己的优缺点是什么反问    部门的主要技术栈。    部门对实习生有什么要求。HR面：这就是闲聊了，电话面，跟我说了一下公司情况和福利待遇，沟通一下入职时间#美团##美团前端实习##面经##日常实习##一面##二面##HR面#

1.自我介绍2.聊实习，京东面试官只看了在线简历，没看附件，提示了他才看，大家面试的时候注意下，比如我在线简历比我附件简历少了一份实习3.实习印象最深的东西，聊了下性能优化4.手写实现promiseRetry5.浏览器渲染过程6.缓存方案7.cookie和localstorage区别8.跨域解决方案9.react生命周期和fiber解决了啥问题，聊了下diff算法10.反问，做oa软件的，已进二面，面试时间是28号，下周一二面，持续更新