字节跳动音视频前端一面面经与性能优化深度解析

二、ESM 兼容性问题

问题：有没有遇到过哪个包不支持 ESM 的，你是怎么处理的

在工程化实践中，经常会遇到一些老包只提供 CommonJS 版本，导致 Tree Shaking 失效或 Next.js 报错。

// 问题示例：some-old-package 只提供 CommonJS
const { debounce } = require('some-old-package')

// ❌

// 解决方案 1：next-transpile-modules（Next.js 专用）
// next.config.js
const withTM = require('next-transpile-modules')(['some-old-package', 'another-cjs-pkg'])
module.exports = withTM({ /* 其他配置 */ })

// 解决方案 2：webpack 配置（通用）
module.exports = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.js$/,
      include: /node_modules\/(some-old-package|another-pkg)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
          plugins: ['@babel/plugin-transform-modules-commonjs']
        }
      }
    })
    return config
  }
}

// 解决方案 3：动态导入（运行时降级）
const somePackage = await import('some-old-package').then(m => m.default || m)

// 解决方案 4：patch-package 直接修改
// 创建补丁文件 patches/some-old-package+1.2.3.patch
// 手动修改导出方式为 ESM

// 解决方案 5：找替代品
// 如果以上都不行，考虑换一个支持 ESM 的库

实际案例：曾遇到 marked 库某个版本 ESM 导出有问题，最终锁定到兼容版本并配置 transpile 解决。

三、代码分割思路

问题：你进行代码分割的思路是什么

代码分割的核心是'按需加载'，让用户只下载当前页面所需的代码。

// 1. 路由级别分割（最常用）
// React
const Home = lazy(() => import('./pages/Home'))
const About = lazy(() => import('./pages/About'))

// Vue
const routes = [{
  path: '/',
  component: () => import('@/pages/Home.vue')
}]

// 2. 组件级别分割
const Editor = dynamic(() => import('@/components/Editor'), {
  loading: () => <Loading />,
  ssr: false // 不需要服务端渲染的组件
})

// 3. 三方库分割（webpack 配置）
splitChunks: {
  chunks: 'all',
  cacheGroups: {
    vendor: {
      test: /[\\/]node_modules[\/]/,
      name: 'vendors',
      priority: 10
    },
    ui: {
      test: /[\\/]node_modules[\/](antd|element-ui)[\/]/,
      name: 'ui-libs',
      priority: 20
    }
  }
}

// 4. 动态导入（条件性加载）
if(userHasPermission('edit')){
  import('./editor.js').then(module=>{ module.initEditor()})
}

// 5. 预加载策略
// <link rel="prefetch" href="next-page.js">
// 或使用 IntersectionObserver 预加载
observer.observe(linkElement)
// 当链接进入视口时预加载

// 6. 监控分析
// 使用 webpack-bundle-analyzer 定期检查

分割思路总结：先路由后组件，三方库单独打包，动态功能按需加载，空闲时间预加载。

四、不定高虚拟列表

问题：不定高的虚拟列表的实现原理是什么

虚拟列表的核心是只渲染可视区域内的元素。不定高比定高复杂，因为无法预知每个元素的高度。

// 核心数据结构：维护每个元素的位置信息
class VirtualList {
  constructor() {
    this.positions = [] // [{ top, bottom, height }]
    this.totalHeight = 0
  }

  // 1. 初始化：使用预估高度
  initPositions(items, estimatedHeight = 100) {
    let top = 0
    this.positions = items.map((_, index) => {
      const height = estimatedHeight
      const position = { index, height, top, bottom: top + height }
      top += height
      return position
    })
    this.totalHeight = top
  }

  // 2. 动态更新：渲染后测量真实高度
  updateHeight(index, realHeight) {
    const pos = this.positions[index]
    const diff = realHeight - pos.height
    if(diff !== 0){
      pos.height = realHeight
      pos.bottom += diff // 更新后续所有元素的位置
      for(let i = index +1; i <this.positions.length; i++){
        this.positions[i].top += diff
        this.positions[i].bottom += diff
      }
      this.totalHeight += diff
    }
  }

  // 3. 二分查找：快速定位起始索引
  getStartIndex(scrollTop) {
    let left = 0
    let right = this.positions.length - 1
    while(left <= right){
      const mid = Math.floor((left + right)/2)
      const pos = this.positions[mid]
      if(pos.bottom < scrollTop){ left = mid +1 }
      else if(pos.top > scrollTop){ right = mid -1 }
      else{ return mid }
    }
    return left
  }

  // 4. 获取可见项
  getVisibleItems(scrollTop, containerHeight){
    const start = this.getStartIndex(scrollTop)
    const end = this.getStartIndex(scrollTop + containerHeight)
    return this.positions.slice(start, end +1).map(pos=>({...pos}))
  }
}

// React Hook 版本简化
function useVirtualList(items, itemHeight = 100){
  const [positions, setPositions] = useState([])
  useEffect(()=>{
    // 初始化位置
    let top = 0
    const newPositions = items.map((_, i)=>{
      const pos = { top, height: itemHeight, bottom: top + itemHeight }
      top += itemHeight
      return pos
    })
    setPositions(newPositions)
  },[items])

  const updateItemHeight = (index, height)=>{
    setPositions(prev=>{
      const newPositions = [...prev]
      const diff = height - newPositions[index].height
      newPositions[index].height = height
      newPositions[index].bottom += diff
      for(let i = index + 1; i < newPositions.length; i++){
        newPositions[i].top += diff
        newPositions[i].bottom += diff
      }
      return newPositions
    })
  }
  return{ positions, updateItemHeight }
}

五、Next.js 渲染模式

问题：NextJS 有哪些渲染模式，分别介绍一下

Next.js 提供了多种渲染模式，适应不同场景需求：

// SSR - Server-Side Rendering
export async function getServerSideProps(context){
  // 每次请求执行
  const data = await fetch(`/api/user/${context.params.id}`)
  return { props: { data } }
}

// SSG - Static Site Generation
export async function getStaticProps(){
  // 构建时执行
  const posts = await fetchPosts()
  return { props: { posts } }
}

// ISR - Incremental Static Regeneration
export async function getStaticProps(){
  const data = await fetchData()
  return { props: { data }, revalidate: 60 } // 每 60 秒重新生成
}

// 动态路由的静态生成
export async function getStaticPaths(){
  const posts = await fetchPostIds()
  const paths = posts.map(p => ({ params: { id: p.id } }))
  return { paths, fallback: 'blocking' } // fallback 处理未生成的路径
}

// CSR - Client-Side Rendering
function Page(){
  const [data, setData] = useState(null)
  useEffect(()=>{
    fetchData().then(setData)
  }, [])
  return <div>{data}</div>
}

六、应用渲染模式选择

问题：你们的应用用的是哪种

根据业务场景混合使用：

// 1. 官网/营销页：SSG
// 原因：内容相对固定，需要极致速度和 SEO
export function getStaticProps(){...}

// 2. 博客/文档：SSG + ISR
// 原因：内容更新不频繁，但需要实时发布
export function getStaticProps({revalidate:3600}){...}

// 3. 用户个人中心：CSR
// 原因：强交互，需要登录态
// 直接客户端渲染

// 4. 详情页：SSR 或 ISR
// 如果内容动态变化快：SSR
// 如果内容变化慢：ISR
export function getServerSideProps(){...}

// 5. 混合示例
// pages/index.js - SSG
export function getStaticProps(){...}

// pages/product/[id].js - ISR
export function getStaticPaths(){...}
export function getStaticProps({revalidate:60}){...}

// pages/user/profile.js - CSR
// 不导出任一函数，默认 CSR

选择标准：

• SEO 要求高 → 用 SSG/SSR
• 数据实时性要求高 → 用 SSR
• 速度要求高、数据变化慢 → 用 SSG
• 需要登录态 → 用 CSR
• 数据变化快但能接受延迟 → 用 ISR

七、Next.js 图片优化组件

问题：NextJS 中有一个内置的图片优化组件，它做了哪些优化

import Image from 'next/image'
<Image src="/hero.jpg" alt="Hero" width={1200} height={600} priority quality={75} placeholder="blur" blurDataURL="data:image/jpeg;base64,/9j/..."/>

// 1. 响应式图片
// 自动生成多尺寸，设置 srcset
// 输出：<img srcset="/_next/image?w=640 640w,/_next/image?w=750 750w,/_next/image?w=828 828w" />

// 2. 格式优化
// 根据浏览器支持自动选择 WebP/AVIF
// Chrome 收到 WebP，Safari 收到 JPEG

// 3. 懒加载
// 默认启用 IntersectionObserver
// 进入视口才加载

// 4. 预加载关键图片
// priority 属性会添加到预加载清单
// <link rel="preload" as="image" href="/hero.jpg">

// 5. 防止布局偏移
// 必须指定宽高，自动计算 aspect-ratio
<div style="aspect-ratio: 1200/600"><img ...></div>

// 6. 占位图 placeholder="blur"
// 显示模糊占位 blurDataURL
// 自定义 base64 占位图

// 7. 图片域名配置
// next.config.js
module.exports = {
  images: {
    domains: ['example.com','cdn.example.com'],
    formats: ['image/webp','image/avif']
  }
}

// 8. 优化效果
// 体积：JPEG 200KB → WebP 60KB（-70%）
// 加载：原本需要手动处理的工作自动完成

八、图片显示优化

问题：让你优化图片显示你怎么优化

// 1. 格式选择
// WebP > AVIF > JPEG/PNG
// WebP 比 JPEG 小 25-35%，比 PNG 小 80%

// 2. 响应式图片
<img src="image-800.jpg" 
     srcset=" image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w " 
     sizes=" (max-width: 500px) 400px,(max-width: 900px) 800px, 1200px " 
>

// 3. 懒加载
<img loading="lazy" src="image.jpg">

// 4. 渐进式加载
function ProgressiveImage({ src, placeholder }){
  const [currentSrc, setCurrentSrc] = useState(placeholder)
  useEffect(()=>{
    const img = new Image()
    img.src = src
    img.onload=()=>setCurrentSrc(src)
  },[src])
  return(
    <img src={currentSrc} style={{filter: currentSrc === placeholder ?'blur(10px)':'none'}}/>
  )
}

// 5. 使用 CDN
// 加上图片处理参数 https://cdn.example.com/image.jpg?w=800&q=75&format=webp

// 6. 缓存策略
// 强缓存 + hash 文件名 Cache-Control: max-age=31536000
// image-8f3c9d.jpg

// 7. 预加载关键图片
<link rel="preload" as="image" href="hero.jpg">

// 8. 使用 Intersection Observer
const observer = new IntersectionObserver((entries)=>{
  entries.forEach(entry=>{
    if(entry.isIntersecting){
      const img = entry.target
      img.src = img.dataset.src
      observer.unobserve(img)
    }
  })
})

九、WebP 兼容性降级

问题：webp 格式的图片有兼容性问题吗，怎么做降级处理

// 1. picture 标签（最推荐）
<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jp2" type="image/jp2">
  <img src="image.jpg" alt="fallback">
</picture>

// 2. 特性检测
function supportsWebP(){
  const canvas = document.createElement('canvas')
  if(canvas.toDataURL){
    return canvas.toDataURL('image/webp').indexOf('image/webp')===0
  }
  return false
}
// 使用
const src = supportsWebP()?'image.webp':'image.jpg'

// 3. 服务端检测
app.get('/image',(req, res)=>{
  const accept = req.headers['accept']
  if(accept && accept.includes('image/webp')){
    res.setHeader('Content-Type','image/webp')
    res.sendFile('image.webp')
  }else{
    res.sendFile('image.jpg')
  }
})

// 4. Modernizr
if(Modernizr.webp){
  // 使用 WebP
}else{
  // 使用降级格式
}

// 5. Next.js 自动处理
<Image src="/image.jpg"/>
// 自动检测 Accept 头，返回对应格式

// 6. 批量转换工具
// 构建时生成 webp 版本
const imagemin = require('imagemin')
const imageminWebp = require('imagemin-webp')
await imagemin(['images/*.{jpg,png}'],{
  destination:'public/images',
  plugins:[imageminWebp({quality:75})]
})

// 7. 动态加载
const webpSupported = await checkWebPSupport()
const imageUrl = webpSupported ?'/img.webp':'/img.jpg'

📚 知识点速查表

字节的这场面试，从性能优化到工程化再到框架原理，考察非常全面。音视频业务对性能的极致追求，决定了这些问题都是真实工作中每天要面对的。能把这些讲清楚，说明你已经具备了应对复杂业务场景的能力。