前端八股文面经大全：字节跳动音视频前端一面·上（2026-03-03）·面经深度解析

前言

大家好，我是木斯佳。

相信很多人都感受到了，在AI浪潮的席卷之下，前端领域的门槛在变高，纯粹的“增删改查”岗位正在肉眼可见地减少。曾经热闹非凡的面经分享，如今也沉寂了许多。但我们都知道，市场的潮水退去，留下的才是真正在踏实准备、努力沉淀的人。学习的需求，从未消失，只是变得更加务实和深入。

这个专栏的初衷很简单：拒绝过时的、流水线式的PDF引流贴，专注于收集和整理当下最新、最真实的前端面试资料。我会在每一份面经和八股文的基础上，尝试从面试官的角度去拆解问题背后的逻辑，而不仅仅是提供一份静态的背诵答案。无论你是校招还是社招，目标是中大厂还是新兴团队，只要是真实发生、有价值的面试经历，我都会在这个专栏里为你沉淀下来。

温馨提示：市面上的面经鱼龙混杂，甄别真伪、把握时效，是我们对抗内卷最有效的武器。

面经原文内容

📍面试公司：字节跳动

🕐面试时间：3月3日

💻面试岗位：音视频前端（春招）

❓面试问题：

1. 自我介绍
2. 用了哪些方法使FCP渲染耗时缩短近1s
3. 有没有遇到过哪个包不支持ESM的，你是怎么处理的
4. 你进行代码分割的思路是什么
5. 不定高的虚拟列表的实现原理是什么
6. NextJS有哪些渲染模式，分别介绍一下
7. 你们的应用用的是哪种
8. NextJS中有一个内置的图片优化组件，它做了哪些优化
9. 让你优化图片显示你怎么优化
10. webp格式的图片有兼容性问题吗，怎么做降级处理

来源：牛客网 Ryan188

木木有话说:整个面试的题目质量挺高的，果然做音视频对底层原理、性能优化相关的要求比做业务开发的高多了，所以我拆成了上下两篇分享给大家。定睛一看，up再看目前是在快手实习，行吧，专业对口了。

📝 字节跳动音视频前端一面·深度解析

🎯 面试整体画像

💡 面经关键点解读

面试官的潜台词：音视频业务对性能要求极高，所以FCP优化要问到具体数值；项目中遇到过的工程化问题能看出你的实战深度；虚拟列表是长列表场景的必备技能；Next.js是字节很多中台项目的首选框架；图片优化直接影响用户体验。这些问题环环相扣，考察的是一个前端工程师的全链路优化能力。

🔍 逐题深度解析

一、FCP优化

问题：用了哪些方法使FCP渲染耗时缩短近1s

FCP（First Contentful Paint）是衡量首屏加载体验的核心指标。

// 1. 关键CSS内联// 将首屏所需CSS直接内联到HTML，避免网络请求<style>.header {height: 60px; background: #fff;}.hero {height: 400px; background:url('hero-small.jpg');}/* 只包含首屏样式，约2KB */</style>// 2. 预加载关键资源// 告诉浏览器优先下载关键资源<link rel="preload" href="critical.js"as="script"><link rel="preload" href="hero.webp"as="image"><link rel="preconnect" href="https://fonts.googleapis.com">// 3. 图片优化// 使用WebP格式+响应式图片<picture><source srcset="hero-320.webp 320w, hero-640.webp 640w" type="image/webp"><img src="hero-640.jpg" srcset="hero-320.jpg 320w, hero-640.jpg 640w" loading="eager"></picture>// 4. 字体优化 @font-face { font-family:'CustomFont';src:url('font.woff2')format('woff2'); font-display: swap;// 文本立即用降级字体显示，加载后替换}// 5. 骨架屏<div class="skeleton"><div class="skeleton-header"></div><div class="skeleton-content"></div></div>// 6. 移除阻塞渲染的JS<script src="analytics.js"async defer></script>// 7. 服务端渲染/静态生成// Next.js的SSG/SSR直接返回HTML

二、ESM兼容性问题

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

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

// 问题示例：some-old-package只提供CommonJSconst{ debounce }=require('some-old-package')// ❌// 解决方案1：next-transpile-modules（Next.js专用）// next.config.jsconst 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 =awaitimport('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. 路由级别分割（最常用）// Reactconst Home =lazy(()=>import('./pages/Home'))const About =lazy(()=>import('./pages/About'))// Vueconst 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定期检查

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

四、不定高虚拟列表

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

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

// 核心数据结构：维护每个元素的位置信息classVirtualList{constructor(){this.positions =[]// [{ top, bottom, height }]this.totalHeight =0}// 1. 初始化：使用预估高度initPositions(items, estimatedHeight =100){let top =0this.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 =0let right =this.positions.length -1while(left <= right){const mid = Math.floor((left + right)/2)const pos =this.positions[mid]if(pos.bottom < scrollTop){ left = mid +1}elseif(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)returnthis.positions.slice(start, end +1).map(pos=>({...pos,// 对应的数据项}))}}// React Hook版本简化functionuseVirtualList(items, itemHeight =100){const[positions, setPositions]=useState([])useEffect(()=>{// 初始化位置let top =0const newPositions = items.map((_, i)=>{const pos ={ top,height: itemHeight,bottom: top + itemHeight } top += itemHeight return pos })setPositions(newPositions)},[items])constupdateItemHeight=(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 RenderingexportasyncfunctiongetServerSideProps(context){// 每次请求执行const data =awaitfetch(`/api/user/${context.params.id}`)return{props:{ data }}}// SSG - Static Site GenerationexportasyncfunctiongetStaticProps(){// 构建时执行const posts =awaitfetchPosts()return{props:{ posts }}}// ISR - Incremental Static RegenerationexportasyncfunctiongetStaticProps(){const data =awaitfetchData()return{props:{ data },revalidate:60// 每60秒重新生成}}// 动态路由的静态生成exportasyncfunctiongetStaticPaths(){const posts =awaitfetchPostIds()const paths = posts.map(p=>({params:{id: p.id }}))return{ paths,fallback:'blocking'}// fallback处理未生成的路径}// CSR - Client-Side RenderingfunctionPage(){const[data, setData]=useState(null)useEffect(()=>{fetchData().then(setData)},[])return<div>{data}</div>}

六、应用渲染模式选择

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

根据业务场景混合使用：

// 1. 官网/营销页：SSG// 原因：内容相对固定，需要极致速度和SEOexportgetStaticProps(){...}// 2. 博客/文档：SSG + ISR// 原因：内容更新不频繁，但需要实时发布exportgetStaticProps({revalidate:3600}){...}// 3. 用户个人中心：CSR// 原因：强交互，需要登录态// 直接客户端渲染// 4. 详情页：SSR 或 ISR// 如果内容动态变化快：SSR// 如果内容变化慢：ISRexportgetServerSideProps(){...}// 5. 混合示例// pages/index.js - SSGexportgetStaticProps(){...}// pages/product/[id].js - ISRexportgetStaticPaths(){...}exportgetStaticProps({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. 渐进式加载functionProgressiveImage({ src, placeholder }){const[currentSrc, setCurrentSrc]=useState(placeholder)useEffect(()=>{const img =newImage() 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 Observerconst observer =newIntersectionObserver((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. 特性检测functionsupportsWebP(){const canvas = document.createElement('canvas')if(canvas.toDataURL){return canvas.toDataURL('image/webp').indexOf('image/webp')===0}returnfalse}// 使用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. Modernizrif(Modernizr.webp){// 使用WebP}else{// 使用降级格式}// 5. Next.js自动处理<Image src="/image.jpg"/>// 自动检测Accept头，返回对应格式// 6. 批量转换工具// 构建时生成webp版本const imagemin =require('imagemin')const imageminWebp =require('imagemin-webp')awaitimagemin(['images/*.{jpg,png}'],{destination:'public/images',plugins:[imageminWebp({quality:75})]})// 7. 动态加载const webpSupported =awaitcheckWebPSupport()const imageUrl = webpSupported ?'/img.webp':'/img.jpg'

📚 知识点速查表

📌 最后一句：

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