1. 1. 笔试问题
  2. 2. 面试问题
美图面试总结
面经

笔试问题

Web 中常见图片格式的优缺点

  1. JPEG/JPG

  • 优点：

    • ✅ 有损压缩算法，文件体积小

    • ✅ 最适合 照片类图像（自然场景、渐变色）

    • ✅ 广泛兼容所有浏览器和设备

  • 缺点：

    • ❌ 不支持透明通道（Alpha 通道）

    • ❌ 压缩过度会产生 块状伪影

    • ❌ 不支持动画

  • 适用场景：产品展示图、用户头像、摄影作品

  1. PNG

  • 优点：

    • ✅ 支持 无损压缩（保留原始画质）

    • ✅ 完美支持 透明/半透明通道

    • ✅ 适合带有文字、线条的图形（如 Logo）

  • 缺点：

    • ❌ 文件体积通常比 JPEG 大 5-10 倍

    • ❌ 不适合复杂照片类内容

    • ❌ 不支持动画

  • 适用场景：透明背景图标、UI 界面元素、需要保留细节的图形

  1. GIF

  • 优点：

    • ✅ 支持 简单动画（帧动画）

    • ✅ 支持透明背景（但只有 1-bit 透明度）

    • ✅ 全浏览器兼容

  • 缺点：

    • ❌ 最大仅支持 256 色（不适合彩色图像）

    • ❌ 文件体积大（尤其动画）

    • ❌ 画质较低

  • 适用场景：简单动图（如表情包）、低色彩图形

  1. WebP

  • 优点：

    • ✅ 现代高效格式（Google 开发）

    • ✅ 同时支持有损/无损压缩

    • ✅ 支持透明通道和动画

    • ✅ 体积比 JPEG 小 25-35%，比 PNG 小 26%

  • 缺点：

    • ❌ Safari 15 之前版本不完全支持

    • ❌ 旧版浏览器需要兼容方案

  • 适用场景：替代 JPEG/PNG/GIF 的通用方案（需处理兼容性）

  1. SVG

  • 优点：

    • ✅ 矢量图形格式，无限缩放不失真

    • ✅ 文件体积极小（纯 XML 代码）

    • ✅ 支持 CSS 样式/动画/交互

    • ✅ 可通过代码生成或编辑

  • 缺点：

    • ❌ 不适合复杂位图（如照片）

    • ❌ 兼容性要求（部分旧浏览器限制）

  • 适用场景：图标、Logo、图表、响应式图形

  1. AVIF

  • 优点：

    • ✅ 下一代格式（基于 AV1 编码）

    • ✅ 压缩率比 WebP 高 20-50%

    • ✅ 支持 HDR、广色域、透明通道

    • ✅ 支持有损/无损压缩和动画

  • 缺点：

    • ❌ 浏览器支持度低（Chrome 85+，Firefox 93+）

    • ❌ 编码/解码需要较高性能

  • 适用场景：未来替代方案，需要极致优化的场景

如何实现一个 PickFuncKey<T>，其功能为输出泛型 T 的所有的键值类型为函数的所有键

1
2
3
4
5
6
7
8
9
10
11
12
type PickFunKey<T> = keyof {
  [K in keyof T as T[K] extends Function ? K : never]: T[K]
}

const a: PickFunKey<{
  a: string
  b: number
  c: Function
  d: Symbol
  e: string[]
  f: () => void
}> // 'c'|'f'

如何在 Chrome 下显示小于 12px 的文字

  • zoom

    1
    2
    3
    4
    5
    .text {
      font-size: 12px;
      display: inline-block;
      zoom: 0.8;
    }

  • -webkit-transform:scale()

    1
    2
    3
    4
    5
    .text {
      font-size: 12px;
      display: inline-block;
      -webkit-transform: scale(0.8);
    }

SCSS mixin、if-else 使用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@mixin theme($color) {
  @if ($color == light) {
    background: #fff;
  } @else if($color == dark) {
    background: #000;
  }
}

.theme-light {
  @include theme(light);
}

.theme-dark {
  @include theme(dark);
}

面试问题

Vue3对比Vue2有怎样的性能提升

  • 数据监听机制

    Vue2通过Object.defineProperty()进行数据劫持，需要遍历所有属性，有一定性能开销。Vue3使用Proxy代理数据，直接监听对象，减少遍历属性时间，性能更好。

  • 编译优化

    Vue3对编译过程进行了优化，静态节点提升，缓存事件处理函数等，启动速度比Vue2快10-100倍。

  • 包体积

    Vue3移除了一些不常用的API，并优化了Tree-Shaking，使打包体积相比Vue2小10%左右。

  • 内存占用

    Vue3中移除了一些内存占用高的功能，同时优化了部分内存分配，降低内存消耗。（例如事件总线的 on/ off/$once 全局事件 API，避免因未及时取消监听导致的事件回调闭包堆积，建议使用第三方库mitt等；Filters 过滤器）

  • SSR优化

    Vue3使用异步SSR，大大减少主线程执行代码量，提升服务器端渲染性能。

  • Diff算法优化

    Vue2使用了比较经典的双指针（双端比较）的Diff算法。Vue3对Diff算法进行了优化，采用了更加高效的单端比较的Diff算法。

封装一个组件，需要考虑些什么

  1. 明确组件的职责，保持功能单一

    首先，我会想这个组件到底要解决什么问题，确保它只专注一个核心功能。比如做一个弹窗组件，它的任务就是展示内容和处理关闭逻辑，不要在里面塞进数据请求或者其他无关的逻辑。这样以后维护的时候，改动起来不会牵一发而动全身。

  2. 设计好组件的‘接口’——Props和事件

    然后就是怎么跟其他组件‘沟通’。比如父组件传数据进来用Props，这时候得考虑参数的类型、默认值、是不是必填。比如说，弹窗的标题可能需要是字符串，内容可能支持文本或HTML，这时候Props要写好校验规则。另外，子组件通过事件告诉父组件发生了什么事情，比如点了确定按钮要触发一个@confirm事件，让父组件去处理具体逻辑。

  3. 用插槽（Slots）提升灵活性

    如果组件有些地方需要让使用者自定义内容，就得用插槽了。比如做一个卡片组件，头部和内容区域可能每个人用的样式不一样，这时候可以用具名插槽。允许用户通过插槽自定义某一列的显示方式，这样组件就更通用了。

  4. 管理样式，避免‘打架’

    样式方面，我会用scoped属性把CSS限制在当前组件内，防止影响其他地方。但有时候需要覆盖子组件样式，比如用第三方库的时候，这时候可以用::v-deep来穿透作用域。另外，如果组件需要换肤功能，可能会用CSS变量或者预留class供外部覆盖。

  5. 写好文档和示例

    组件封装完，别人怎么用？我会在组件里写清楚Props、事件、插槽的说明，甚至加个example.vue的示例文件。如果封装了一个复杂的上传组件，但没写文档，结果大家用的时候都得去翻源码，效率很低。所以每个组件必须配示例和参数说明。

总的来说，封装组件就像做一个‘黑盒子’——对外简单易用（提供清晰的接口），对内高内聚低耦合（功能独立、结构清晰）。还要考虑灵活性、可维护性，甚至团队协作的习惯。

Vite有什么缺点

Vite开发环境依赖esbuild进行预构建，生产环境则依赖rollup进行打包，所以使用vite可能会带来开发环境与生产环境打包结果不一致的问题。

Previous post
Next post