字节跳动前端一面面经：核心原理与性能排查实战

适用场景方面，Vue 适合快速开发和中小型项目，React 则更适合大型应用及跨端开发（如 React Native）。

2. Vue 双向绑定原理

v-model 本质是语法糖，它结合了 :value 属性和 @input 事件。其底层依赖于数据劫持配合发布订阅模式。

// v-model 是语法糖
<input v-model="message">
// 等价于
<input :value="message" @input="message = $event.target.value">

// 原理：数据劫持 + 发布订阅
class Vue {
  constructor(options){
    this.$data = options.data
    this.observe(this.$data)
    this.compile(options.el)
  }
  // 1. 数据劫持
  observe(data){ 
    Object.keys(data).forEach(key=>{
      let value = data[key]
      const dep = new Dep()
      Object.defineProperty(data, key,{
        get(){
          if(Dep.target){ dep.addSub(Dep.target) } // 依赖收集
          return value 
        },
        set(newVal){
          if(newVal !== value){ 
            value = newVal 
            dep.notify() // 触发更新
          }
        }
      })
    })
  }
  // 2. 模板编译
  compile(el){ /* 解析指令，绑定更新函数 */ }
}

class Dep {
  constructor(){this.subs =[]}
  addSub(sub){this.subs.push(sub)}
  notify(){this.subs.forEach(sub=> sub.update())}
}

class Watcher {
  constructor(vm, key, cb){
    this.vm = vm
    this.key = key
    this.cb = cb
    Dep.target = this
    this.vm[this.key] // 触发 get，收集依赖
    Dep.target = null
  }
  update(){this.cb.call(this.vm,this.vm[this.key])}
}

3. 自定义 Hooks 的实现思路

自定义 Hooks 的核心在于封装可复用的逻辑状态。遵循以 use 开头的命名规范，内部可以调用其他 Hooks，每次调用都是独立的。

// 基础思路
function useCustomHook(initialValue){
  const[state, setState]=useState(initialValue)
  useEffect(()=>{
    // 副作用逻辑
    return ()=>{// 清理逻辑}
  },[state])
  constupdateState=(newValue)=>{setState(newValue)}
  return[state, updateState]
}

// 实际例子：useLocalStorage
function useLocalStorage(key, initialValue){
  const[storedValue, setStoredValue]=useState(()=>{
    try{
      const item = window.localStorage.getItem(key)
      return item ?JSON.parse(item): initialValue 
    }catch(error){return initialValue }
  })
  constsetValue=(value)=>{
    try{
      const valueToStore = value instanceofFunction?value(storedValue): value
      setStoredValue(valueToStore)
      window.localStorage.setItem(key,JSON.stringify(valueToStore))
    }catch(error){ console.log(error)}
  }
  return[storedValue, setValue]
}

// 使用
function MyComponent(){
  const{ data, loading }=useFetch('/api/user')
  const[theme, setTheme]=useLocalStorage('theme','light')
}

4. 虚拟 DOM 的作用

虚拟 DOM 是用 JS 对象描述真实 DOM 的结构。虽然直接操作 DOM 在某些简单场景下更快，但在复杂 UI 更新中，虚拟 DOM 结合 diff 算法能显著减少不必要的 DOM 操作。

// 虚拟 DOM (VNode)
{
  type:'div',
  props:{class:'container'},
  children:[
    {type:'p',props:{},children:['Hello']}
  ]
}

核心收益包括批量操作 DOM 提升性能、支持跨平台渲染以及降低开发者心智负担。

5. Fiber 架构的作用

Fiber 是 React 16 引入的新架构，旨在解决旧版递归遍历导致的阻塞问题。它将渲染工作拆分成小单元，支持时间切片和优先级调度。

// Fiber 节点结构（简化）
{
  tag:1,// 组件类型
  key:null,
  elementType:'div',
  stateNode:DOM 节点,
  return: Fiber 父节点,
  child: Fiber 子节点,
  sibling: Fiber 兄弟节点,
  pendingProps:{},
  memoizedProps:{},
  memoizedState:{},
  effectTag:'UPDATE',
  nextEffect:null
}

渲染分为两个阶段：render 阶段（可中断，收集变化）和 commit 阶段（不可中断，提交到 DOM）。

6. RN 跨端开发注意事项

React Native 允许用 JS 编写移动端应用，但需注意与 Web 环境的差异。

• 样式系统不一致：Web 支持 CSS 所有属性，RN 仅支持部分。例如阴影需单独配置 shadowColor。
• 导航系统复杂：需集成 react-navigation，嵌套导航器的状态管理较为繁琐。
• 性能问题：长列表务必使用 FlatList，大量图片需缓存，动画推荐使用 Animated 或 react-native-reanimated。
• 调试困难：原生崩溃需查看 Xcode/Android Studio 日志，桥接层问题定位难度大。
• 热更新限制：iOS 禁止代码热更新，只能更新 JS bundle 和资源。

7. ES6 新特性

面试常考的关键特性包括变量声明（let/const）、箭头函数、解构赋值、展开运算、模板字符串、类、模块、Promise、迭代器及 Set/Map 数据结构。

8. Promise 异常处理

处理异步错误有多种方式，建议根据场景选择。

// 1. catch 捕获
fetch('/api/data').then(response=> response.json()).catch(error=> console.error('请求失败:', error))

// 2. try/catch（async/await）
async function fetchData(){
  try{
    const response =await fetch('/api/data')
    const data =await response.json()
    console.log(data)
  }catch(error){ console.error('请求失败:', error)}
}

// 3. finally（无论成功失败都执行）
fetch('/api/data').finally(()=>{ console.log('请求完成'); hideLoading()})

// 4. 全局未捕获 Promise 异常
window.addEventListener('unhandledrejection',(event)=>{ console.error('未处理的 Promise 拒绝:', event.reason)})

9. import 与 require 的区别

这是 ES6 模块与 CommonJS 规范的对比。

注意混合使用时，require 不能用于 import 模块，import 也不能用于条件语句顶层。

10. finally 的作用

finally 块无论 Promise 成功还是失败都会执行，常用于资源清理。

// 清理资源
let loading =true
fetchData().then(data=>render(data)).catch(error=>showError(error)).finally(()=>{ loading =false; hideLoadingSpinner()})

// 释放连接
openDatabase().then(conn=>{ dbConnection = conn }).finally(()=>{if(dbConnection){ dbConnection.close()}})

11. 资源缓存策略

强缓存不发送请求，协商缓存发送请求由服务器判断。

• 强缓存：Cache-Control: max-age，适用于静态资源（带 hash 的文件）。
• 协商缓存：Last-Modified/ETag，适用于 HTML 文件或可能变化的资源。

流程上，浏览器首次请求获取标记，后续请求携带标记，服务器比对后返回 304 或 200。

12. 资源更新问题

如何让用户加载新的 JS 资源？

1. 文件指纹：打包时生成带 hash 的文件名，内容变 hash 变，HTML 引用随之更新（推荐）。
2. 版本号查询参数：?v=2.1.0，发版时修改版本号。
3. Service Worker 控制：通过 caches.open 管理版本。
4. 最佳实践：HTML 用协商缓存，JS/CSS/图片用强缓存 + 文件名 hash。

13. 列表滚动卡顿排查

使用 Chrome DevTools Performance 面板录制，观察 FPS、长任务及重排重绘情况。

虚拟滚动是实现长列表性能优化的关键手段，通过只渲染可视区域 DOM 大幅减少节点数量。

// 虚拟滚动实现示例
function VirtualList({ items, itemHeight, containerHeight }){
  const[scrollTop, setScrollTop]=useState(0)
  const startIndex = Math.floor(scrollTop / itemHeight)
  const endIndex = Math.min( Math.floor((scrollTop + containerHeight)/ itemHeight), items.length -1)
  const visibleItems = items.slice(startIndex, endIndex +1)
  const offsetY = startIndex * itemHeight
  return(
    <div style={{height: containerHeight,overflow:'auto'}} onScroll={(e)=>setScrollTop(e.target.scrollTop)}>
      <div style={{height: items.length * itemHeight,position:'relative'}}>
        <div style={{transform:`translateY(${offsetY}px)`}}>{visibleItems.map(item=>(<div style={{height: itemHeight }}>{item}</div>))}</div>
      </div>
    </div>
  )
}

此外，开启 GPU 加速（transform: translateZ(0)）和使用 requestAnimationFrame 节流也能有效缓解卡顿。

知识点速查表

这场面试从框架原理到实战排查的全链路考察，重点在于你是否真的'用过'并且'懂原理'。每一个问题都在问：你能解决实际问题吗？