9.18美团金融前端一面(base 北京)

答案概述：以下是对美团金融前端一面中各问题的详细解答，涵盖自我介绍、实习经历、性能优化、懒加载、移动端适配、JavaScript 基础及算法等多个方面。

• 自我介绍：需简洁清晰，涵盖教育背景、实习或项目经历、掌握的技术栈（如 HTML/CSS/JavaScript、前端框架 Vue/React、性能优化工具等）及个人优势（如学习能力、问题解决能力）。

• 实习中比较有意义的点：可结合具体项目，例如通过优化某功能提升用户体验，或解决复杂技术问题（如兼容性、性能瓶颈），重点突出技术实现与成果。

• 性能优化做了什么：

  代码层面：减少 HTTP 请求（合并文件、使用雪碧图）、压缩资源（CSS/JS 压缩）、使用 CDN 加速。

  渲染优化：减少重绘与回流（如避免频繁操作 DOM）、使用虚拟 DOM（如 React/Vue 的 diff 算法）。

  缓存策略：利用浏览器缓存（强缓存/协商缓存）、Service Worker 离线缓存。

• 懒加载怎么做的：

  通过监听滚动事件或使用 IntersectionObserver API 检测元素是否进入可视区域。

  当元素进入视口时，动态加载资源（如图片的 src 替换为真实地址）。

• 懒加载只做可视区域的吗：是，仅加载可视区域内的资源，减少初始加载压力。

• 滚动时图片加载过程与内存问题：

  滚动时触发加载，可能存在短暂空白或加载动画。

  图片内存占用取决于格式（如 WebP 优于 JPEG）与尺寸，需合理压缩以优化内存。

• 使用懒加载的效果：

  减少首屏加载时间，提升页面响应速度。

  降低服务器带宽占用，尤其适用于图片密集型页面。

• 效果怎么测的，快了多少：

  使用性能工具（如 Lighthouse、Chrome DevTools 的 Performance 面板）对比优化前后的首屏加载时间、FCP（首次内容绘制）等指标。

  量化结果示例：首屏加载时间从 3s 缩短至 1.2s。

• performance面板有哪些指标：

  FCP（First Contentful Paint）：首次绘制内容的时间。

  LCP（Largest Contentful Paint）：最大内容元素渲染时间。

  TTI（Time to Interactive）：页面可交互时间。

  CLS（Cumulative Layout Shift）：布局偏移量，衡量视觉稳定性。

• 性能优化还做了什么：

  代码分割（Code Splitting）：按需加载路由或组件。

  预加载（Prefetch/Preload）：提前加载关键资源。

  使用 Web Workers 处理耗时任务，避免阻塞主线程。

• 怎么实现的：

  代码分割：通过动态 import() 或 Webpack 的 SplitChunksPlugin 实现。

  预加载：在 HTML 中使用 <link rel="preload"> 标签。

• 是否只考虑可视区域，如一页计算10条只渲染10条：

  通常结合缓冲区域（如额外渲染 2-3 条），避免快速滚动时出现空白，提升用户体验。

• 移动端适配，rem、em和px区别：

  px：绝对单位，固定像素值，不随设备变化。

  em：相对单位，相对于当前元素的字体大小。

  rem：相对单位，相对于根元素（<html>）的字体大小，常用于移动端适配。

• rem根据根元素，根元素是什么：根元素为 <html>，其 font-size 决定 1rem 的实际值。

• 1rem等于多少：默认 1rem = 16px（浏览器默认字体大小），可通过设置 <html font-size: 10px;> 改为 1rem = 10px。

• 定价页字体是怎么适配的：

  使用 rem 单位，结合媒体查询或 JavaScript 动态计算根元素字体大小，实现不同屏幕尺寸下的字体缩放。

• 100px乘100px的盒子水平垂直居中：

  Flex 布局：父容器设置 display: flex; justify-content: center; align-items: center;。

  绝对定位：子元素设置 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);，其中 -50% 表示自身宽度/高度的一半。

• 箭头函数和function区别：

  语法：箭头函数更简洁（如 () => {}），普通函数需使用 function 关键字。

  this 指向：箭头函数无自身 this，继承外层作用域的 this；普通函数的 this 由调用方式决定。

  构造函数：箭头函数不能作为构造函数使用（无 prototype 属性）。

• this指向问题：

  默认绑定：非严格模式下 this 指向全局对象（如 window），严格模式下为 undefined。

  隐式绑定：函数作为对象方法调用时，this 指向该对象。

  显式绑定：通过 call/apply/bind 强制指定 this。

  新构造函数绑定：new 调用时 this 指向新创建的对象。

  箭头函数：继承外层 this。

• Promise有哪些api，有哪些状态，是宏任务还是微任务：

  API：Promise.resolve()、Promise.reject()、Promise.all()、Promise.race()、.then()、.catch()、.finally()。

  状态：pending（初始）、fulfilled（成功）、rejected（失败）。

  任务类型：Promise 回调（如 .then()）属于微任务；IntersectionObserver 的回调也是微任务。

• 宏任务和微任务都有哪些：

  宏任务：setTimeout、setInterval、I/O 操作、UI 渲染、事件回调（如 click）。

  微任务：Promise 回调、MutationObserver、IntersectionObserver。

• 数组去重方法：

  Set：[...new Set(array)]。

  filter：array.filter((item, index) => array.indexOf(item) === index)。

  reduce：array.reduce((acc, cur) => acc.includes(cur) ? acc : [...acc, cur], [])。

• 反问环节：可询问团队技术栈、项目方向、面试流程或职业发展路径，展现主动性与兴趣。