字节社招前端面试经验分享

45min 场景+项目两个用户平台如何打通登录账号输入框是文字  怎么能在文档中去检索大文件上传 断点续传使用的协议计算机存的都是二进制   -8在内存怎么存js能表示的数字  大数字表示不了怎么办vue 虚拟dom对比 diff算法DOM结构复杂的时候用什么（前端框架的优化策略）页面有个列表  每个行上有个编辑   点击编辑 可以出现一个表单窗口   我点了关闭后就没有了   现在的需求是 当表单内容变化  关闭的时候给我一个弹窗提醒 如何实现列表的每个item的表单数据封装的格式是怎么样的，数据遍历的思路是怎么样的使用watch深度监听和vue的diff算法有什么区别为什么使用Lodash第三方库

一面： 主要根据简历里的实习经历和项目经历来提问和追问细节，大概50min。1. 实习经历里页面加载速度交互响应速度提升是什么指标？怎么计算的？具体怎么优化的？关于项目优化你知道哪些方法？2. APP适配和PC适配的不同之处，APP样式尺寸单位3. 用NodeJS做了哪些工作？4. 项目中怎么维持的登录态？为什么用这个方案？5. 事件循环代码输出顺序6. 算法题：数字字符串格式化二面：50min左右。1. 前端学习经历2. 介绍项目，根据项目来提问，穿插着一些八股3. get、post、put、delete请求的区别？post可以实现delete或update吗？推荐吗？为什么要这么设计？4. 浏览器是如何实现异步的？过程具体是怎样的？5. 现在用的http是哪个版本？有用https吗？http和https的区别？https加密的是什么？加密过程怎么协商密钥的？6. 实习经历的性能优化，关注了哪些指标？做了哪些事情？除了技术指标外有关注业务指标上的增长吗？7. 后端方面有学习过其他语言吗？8. 学习过程中有阅读过一些源代码吗？9. 手撕题：promisify；memoize

让ai总结了一下问题和回答，心累了，面试官一直问优化相关的问题，多少也回答了一些出来，最后反问的时候，问有什么能加强的，说是觉得项目没什么亮点，一、代码问题的主动发现与预防主动发现方式静态代码分析：使用 ESLint、TSLint 等工具在编码阶段检测语法错误、代码规范问题、潜在逻辑漏洞（如未处理的空值、死循环）。自动化测试：通过单元测试（Jest）、集成测试（Cypress）覆盖核心逻辑，结合 CI/CD 流程在提交 / 部署前触发测试，提前暴露问题。代码审查：制定 Code Review 规范，重点检查边界条件、性能风险、安全性（如 XSS、CSRF）。监控告警：线上通过 Sentry 等工具捕获运行时错误（如 TypeError、Promise 未捕获异常），结合日志分析高频异常点。预防措施制定开发规范：明确命名规则、代码结构、错误处理方式（如统一使用 try/catch 或全局异常捕获）。技术选型管控：避免引入低维护性依赖，优先选择成熟库并控制版本。定期重构：针对耦合度高、可维护性差的代码进行重构，降低后续迭代风险。二、To C 项目的监控设计To C 项目需重点关注用户体验与稳定性，监控设计可从以下层面展开：前端性能监控核心指标：首屏加载时间（FCP）、交互响应时间（TTI）、白屏时间，通过 Performance API 或第三方工具（如 Lighthouse、阿里云 ARMS）采集。资源加载：监控 JS/CSS 加载耗时、图片加载失败率，设置阈值告警（如某资源加载超时 >3s）。用户行为与异常监控错误监控：捕获 JS 运行时错误、接口错误（4xx/5xx）、资源加载失败，关联用户 ID、设备信息便于定位。行为轨迹：记录用户点击、滑动等操作，分析卡顿、崩溃场景的触发路径（如某按钮点击后高频报错）。业务指标监控核心流程转化：如注册、支付步骤的成功率，异常中断时触发告警。设备兼容性：统计不同浏览器 / 机型的报错率，优先修复高占比问题。实现方式埋点系统：通过 SDK 主动上报监控数据，后端存储后用 Grafana 等工具可视化。实时告警：配置短信 / 钉钉通知，针对严重错误（如大面积白屏、支付失败）即时响应。三、虚拟列表优化实现虚拟列表核心是只渲染可视区域内的 DOM 元素，减少渲染压力，实现思路：核心原理计算可视区域高度、单个 item 高度，确定可见项数量（如可视区高度 500px，item 高 50px → 可见 10 项）。监听滚动事件，动态计算滚动偏移量，确定当前需渲染的 item 起始索引。通过容器内的 “占位元素” 撑起列表总高度，避免滚动条异常，可视区项通过绝对定位展示。关键优化缓存已渲染项：避免滚动时频繁销毁 / 创建 DOM，仅更新位置和内容。预渲染缓冲区：在可视区上下额外渲染 1-2 项，减少快速滚动时的空白闪烁。动态高度支持：若 item 高度不固定，可通过预估高度 + 滚动时修正位置解决。库选型：优先使用成熟库（如 react-virtualized、vue-virtual-scroller），减少自研成本。四、列表滑动卡顿的排查与优化排查方向性能分析：用 Chrome DevTools 的 Performance 面板录制滑动过程，查看是否有长任务（>50ms）、频繁重排（Layout）/ 重绘（Paint）。DOM 数量：检查列表是否渲染了过多 DOM（如未做虚拟列表），导致渲染线程阻塞。事件处理：滑动时是否绑定了高频事件（如 scroll、touchmove）且未做节流 / 防抖，导致 JS 线程繁忙。样式问题：是否使用复杂样式（如阴影、渐变）或强制同步布局（如频繁读取 offsetHeight 后修改样式）。优化措施实现虚拟列表：减少 DOM 数量（见上文）。优化事件：对 scroll/touchmove 事件节流（如 100ms 触发一次），避免高频执行。减少重排 / 重绘：将固定样式抽离为 CSS 类，避免 inline 样式；使用 will-change: transform 让浏览器单独分层渲染。数据处理：若滑动时需加载数据，提前预加载并缓存，避免同步阻塞。五、白屏的检测与解决检测方式前端埋点：在页面关键节点（如 DOMContentLoaded、首屏元素渲染完成）设置时间戳，若超过阈值（如 5s 未渲染）则上报白屏事件。图片监控：在页面顶部放一个 1x1 像素的 “探针图片”，若加载成功则证明页面正常，否则判定为白屏。错误关联：结合 JS 错误日志（如关键脚本加载失败、语法错误）定位白屏原因。解决思路加载问题：优化资源加载（如 CDN 加速、代码分割、懒加载），处理脚本加载失败（如重试机制、备用 CDN）。渲染阻塞：避免 JS 阻塞 HTML 解析（如用 defer/async），减少首屏不必要的 CSS/JS。数据依赖：若白屏因接口延迟，增加骨架屏、加载动画，避免用户感知空白；接口失败时显示错误提示并提供重试。兼容性：修复特定浏览器的渲染 bug（如 CSS 前缀缺失、ES6+ 语法未转译）。六、ECharts 性能问题及优化常见性能问题大数据量渲染卡顿（如万级以上数据点）。频繁更新（如实时数据）导致内存泄漏或 CPU 占用过高。图表容器大小频繁变化时重绘异常。折线图（多日期筛选）的优化与后端方案前端优化：数据采样：根据日期范围动态调整精度（如日级展示 24 点，周级展示 24*7 点，月级按天采样而非小时，避免数据量过大）。节流重绘：筛选日期时，通过防抖（如 300ms 延迟）避免频繁调用 setOption。销毁旧实例：切换筛选条件前，调用 dispose () 销毁旧图表，释放内存。懒加载：非首屏图表延迟初始化，避免阻塞首屏渲染。与后端沟通方案：动态返回精度：后端根据筛选的时间范围（天 / 周 / 月）返回对应粒度的数据（如周级返回按小时聚合的平均值，而非每小时原始数据）。分页 / 分段加载：若需保留细粒度，后端支持按时间段分段返回，前端滚动时再加载后续数据。数据压缩：后端用二进制或精简格式（如仅返回 [x,y] 数组而非完整对象）减少传输量。ECharts 适配方案响应式容器：监听窗口 resize 事件，调用 resize () 方法调整图表大小，结合 CSS 媒体查询适配不同屏幕。移动端优化：简化图表样式（如隐藏次要网格线、缩小字体），触摸交互适配（如支持双击放大、手势缩放）。七、图片优化方向资源优化格式选择：优先使用 WebP/AVIF（比 JPEG 小 30%+），降级兼容旧浏览器；简单图形用 SVG 替代位图。压缩处理：通过工具（如 TinyPNG）或后端服务（如七牛云）压缩图片，平衡质量与体积。合理尺寸：根据展示容器大小提供多分辨率图片（如 srcset 属性），避免大图小用。加载优化懒加载：使用 IntersectionObserver 监听图片进入视口后再加载，减少首屏请求。预加载：对首屏或即将展示的图片（如轮播图下一张）用 link [rel="preload"] 预加载。缓存策略：设置合理的 Cache-Control 头，复用缓存减少重复请求。体验优化占位符：加载前显示低分辨率缩略图或纯色占位，减少布局偏移（CLS）。错误处理：图片加载失败时显示默认图，避免破图影响体验。八、图片加载时间的检测前端检测监听事件：通过 img.onload 记录加载完成时间，减去 img.src 赋值时间，得到加载耗时。Performance API：使用 performance.getEntriesByType ('resource') 获取图片资源的加载详情（如 startTime、responseEnd），计算耗时 = responseEnd - startTime。埋点上报：将检测到的耗时结合图片 URL、用户设备信息上报，分析慢加载图片。工具辅助浏览器 DevTools：Network 面板筛选 img 类型资源，查看各阶段耗时（如 DNS、TCP、下载）。第三方监控：通过 Lighthouse 或监控平台（如 Datadog）批量分析页面图片加载性能。

四非本科，一段二字大外包实习，纯产出没有任何技术含量，从九月中离职到现在网申上百，ssob上五百招呼（一有面试在面试前投不会再投了准备面试），一共七场面试，hr面挂三，两场正在等一面结果，还有一场今天的重头戏KPI面，hr面里面有两个是实习转正，一家前面有个2爷排序挂（不是二爷你投小厂实习转正干啥，到最后你也不会去，小厂也不会捞人，纯害人啊），另一家实习转正hr是个很好的人，一直在跟进度hr口头说过了，资料提交三天后告知人招满了（其实也就是招到更好的人了），还有就是某益hr面估摸不符合价值观以及后面了解到有个9爷就要了10k（大哥，人家996你9爷要10k啊，认真的啊？）还有就是今天的上海金某10分钟KPI面，时间约到下午五点半，这个时间段就很奇葩，成功的能让一个人浪费一天的时间，本来复习的好好的，提前二十分钟通知开始面试，一般我都会留十分钟调摄像头，调耳机（学习头戴面试戴入耳），然后放空脑袋准备面试吟唱，因为提前开始面试了着急忙慌的调各种东西，准备好了呢看到有四个人在会上，以为又是一次深刻的拷打，然后就是自我介绍吟唱3分钟，吟唱完面试官又让我介绍一遍项目，又开始吟唱3分钟，然后就问我用cursor吗，巴拉巴拉说了两分钟，接着面试官就双手一摊好像丢了一张纸，就说“我没问的了，可以结束了”，我：•᷄ࡇ•᷅，演都不演了，但凡你随便问点八股，问点我吟唱了两遍的项目的东西糊弄一下呀，最后再来个反问再糊弄一下，上面不是说加上我一共四个人吗，其他两个hr可能都没反应过来，就说后面再联系（联系个damn，约五点半面试浪费我一天时间，我没给你公司全名打出来算好的了），不想要我或者看不上我简历你就说不符合嘛，或者把时间约早一点刷完KPI得了，你约个五点半还提前面试，让我吟唱十分钟不到结束了??从找实习到秋招现在第一次遇到KPI面态度又烂又加之挂了三个hr面，心态现在直接炸了，想学学前端，学学运维，学学安卓了(´•ω•̥`)，小厂也都不理我，真的好累