腾讯音乐 前端实习一面

总时长1小时左右1️⃣ 自我介绍2️⃣ 算法题2.1 零钱兑换2.2 Promis.all3️⃣ 为什么选择前端方法，为什么选择vue技术栈4️⃣ es6的新特性有哪些，你最常用的是哪些4.1 解构赋值与深拷贝的区别5️⃣ 浏览器缓存5.1 有想过自己动手怎么来维护http缓存吗6️⃣ 智慧大屏如何做响应式，遇到的问题7️⃣ vue2和vue3的区别7.1 手写proxy8️⃣ webpack打包优化的方法9️⃣ 封装富文本编辑器考虑的点1️⃣0️⃣ 虚拟滚动10.1 原理10.2 开始索引、结束索引如何计算10.3 如果数据项不等高如何处理10.4 数据项不等高，并且每一项还可以展开和折叠，如何处理1️⃣1️⃣ markdown数据如何渲染成html1️⃣2️⃣ markdown数据中带数学公式如何渲染12.1 遇到过什么问题，如何定位分析解决1️⃣3️⃣ 全链路的性能优化可以怎么一步步分析1️⃣4️⃣ 关于git是如何协作使用的14.1 发生冲突如何解决14.2 线上发生问题，如何解决1️⃣5️⃣ http和https的区别15.1 为什么https更加安全15.2 https的加密过程1️⃣6️⃣ 反问

前言大家好，我是田螺。分享一道网上很火的腾讯面试题:亿级用户排行榜怎么设计呢？换种说法，王者荣耀亿级排行榜，如何设计？本文田螺哥从面试的角度，跟大家一起探讨一下，如何回答更好呢？数据库的order by为什么不行？为什么Redis是排行榜的“扛把子”？Redis扛亿级数据可能存在哪些问题以及对应解决方案实现方案：分治巨人的肩膀，前人踩过的坑1. 数据库的order by很多小伙伴，一提到排行榜，就想到数据库的order by。比如微信运动的步数排行： select * from user_info order by step desc  这个实现没有问题的，如果表的数据量少的话，反而推荐这样实...

让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）批量分析页面图片加载性能。

1.挑一个项目介绍2.设计百度搜索结果页的前端架构，需支持高并发访问、个性化推荐(如根据用户历史调整结果排序)、多终端适配，简述核心技术选型与架构分层。3.V8 引擎的垃圾回收机制中，新生代与老生代的回收算法有何差异?百度贴吧的长帖详情页(含大量图片、评论)如何排查并解决内存泄漏问题?4.Webpack 的代码分割(Code Splitting)有哪些实现方式?百度地图Web 端如何通过代码分割优化首屏加载体积，减少初始化时间?5.百度直播的实时弹幕功能，如何基于 WebSocket 设计一套可靠的消息推送方案，确保高并发下消息不丢失、不重复，且延迟低于100ms?6.React18 的 Concurrent Mode 与 Suspense 如何配合使用?百度智能云的数据分析看板(含大量图表渲染)如何利用这两个特性优化用户交互体验?7.浏览器的回流(Reflow)与重绘(Repaint)有何区别?百度搜索结躍为之页的“无限滚动加载”功能，如何避免频繁操作导致的回流问戾能运年?8.百度翻译的“实时翻译”功能(输入文字实时显示译文)，如何设计前端状态管理方案，支持多语言切换、翻译历史记录、离线翻译缓存?9.HTTPS 的握手过程中，证书验证的具体流程是什么?百度金融的支付页面为何必须使用 HTTPS，且禁用 HTTP 降级?前端如何检测当前页面是否为 HTTPS 环境?10.百度百科的 “目录跳转”与“锚点定位”功能，如何实现平滑滚动且精准定位到对应章节?若页面存在固定导航栏，如何避免定位偏移?