字节跳动前端一面面试真题与核心知识点解析

第三阶段：特殊处理

// 优化点 1. 预加载扫描器（Preload Scanner） - 在构建 DOM 树的同时，提前加载资源 2. 渲染阻塞 -CSS 阻塞渲染（CSSOM 未构建完成） -JS 阻塞解析（async/defer 优化） 3. 关键渲染路径 - 首屏渲染优化 - 避免长时间 JS 执行 

💡 面试官考察点：

这个问题不是让你背流程，而是看你对 Web 技术栈的整体理解 能讲出细节（如 TLS 握手、渲染树构建） → 加分 能讲出优化点 → 加分

🔄 异步代码输出·事件循环

问题：异步代码输出 + JS 事件循环

✅ 完整解析：

1. 典型考题

async function async1(){ console.log('async1 start');await async2(); console.log('async1 end');}
async function async2(){ console.log('async2');}
console.log('script start');
setTimeout(()=>{ console.log('setTimeout');},0);
async1();
new Promise((resolve)=>{ console.log('promise1');resolve();}).then(()=>{ console.log('promise2');});
console.log('script end');
// 输出顺序：// script start// async1 start// async2// promise1// script end// async1 end// promise2// setTimeout

2. 关键点解析

// 为什么 await 后面的代码在 promise2 之前？-await async2() 相当于 Promise.resolve(async2()).then(()=>{ console.log('async1 end')})- 但这里有一个微任务队列的微妙顺序 // 更精确的理解async function test(){ console.log('1');await 1;// 相当于 Promise.resolve(1).then() console.log('2');}// 等价于function test(){ console.log('1');return Promise.resolve(1).then(()=>{ console.log('2');});}

3. 事件循环机制

// 完整流程 1. 执行当前宏任务（同步代码） 2. 执行所有微任务（清空微任务队列） 3. 尝试渲染（requestAnimationFrame） 4. 取下一个宏任务 // 宏任务与微任务宏任务队列:[setTimeout, setInterval,I/O,UI 渲染]微任务队列:[Promise.then, MutationObserver, queueMicrotask]// 特殊说明 - 微任务中产生的微任务，会在当前宏任务结束前执行（不是下一轮） - requestAnimationFrame 在渲染前执行 - requestIdleCallback 在空闲时执行 

🎨 CSS 垂直居中·全方案总结

问题：CSS 垂直居中 + position 垂直居中具体做法

✅ 完整方案：

1. Flexbox 方案（推荐）

.container{
display: flex;
align-items: center;/* 垂直居中 */
justify-content: center;/* 水平居中（可选） */
height: 300px;
}

2. Grid 方案

.container{
display: grid;
place-items: center;/* 同时垂直水平居中 */
height: 300px;
}

3. Position + Transform（最常考）

.container{
position: relative;
height: 300px;
}
.child{
position: absolute;
top: 50%;
transform:translateY(-50%);/* 向上移动自身高度的一半 *//* 水平居中 */
left: 50%;
transform:translate(-50%, -50%);
}

4. Position + Margin（需知宽高）

.child{
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 100px;
margin-top: -50px;/* 高度的一半 */
margin-left: -100px;/* 宽度的一半 */
}

5. Line-height（单行文本）

.container{
height: 300px;
line-height: 300px;/* 与高度相等 */
text-align: center;
}

6. Table-cell

.container{
display: table-cell;
vertical-align: middle;
text-align: center;
height: 300px;
}

7. 伪元素法

.container::before{
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.child{
display: inline-block;
vertical-align: middle;
}

💡 面试官追问：

position 垂直居中为什么用 translateY(-50%) 而不是 margin-top？

- translateY(-50%) 相对于元素自身高度，不需要知道具体数值 - margin-top 相对于父容器宽度（怪异），且需要知道高度 - translate 触发 GPU 加速，性能更好 

⚛️ Vue 响应式原理·Vue2 vs Vue3

问题：vue 响应式原理（vue2.3）

✅ 完整对比：

Vue2 响应式（Object.defineProperty）

// 核心实现function defineReactive(obj, key, val){// 递归处理嵌套对象observe(val);const dep =new Dep();// 依赖收集器 Object.defineProperty(obj, key,{enumerable:true,configurable:true,get(){// 依赖收集if(Dep.target){ dep.depend();}return val;},set(newVal){if(newVal === val)return; val = newVal;// 对新值进行响应式处理observe(newVal);// 触发更新 dep.notify();}});}// 数组处理（需要 hack）const arrayMethods = Object.create(Array.prototype);['push','pop','shift','unshift','splice','sort','reverse'].forEach(method=>{const original = arrayMethods[method]; arrayMethods[method]=function(...args){const result =original.apply(this, args);const ob =this.__ob__;// 触发更新 ob.dep.notify();return result;};});

Vue2 的局限性

// 1. 无法检测属性新增/删除 Vue.set(obj,'newProp', value);// 必须用 Vue.set Vue.delete(obj,'prop');// 必须用 Vue.delete// 2. 无法直接监听数组索引变化this.arr[0]=1;// 不会触发更新this.arr.splice(0,1,1);// 必须用 splice// 3. 初始化时递归遍历所有属性，性能开销

Vue3 响应式（Proxy）

function reactive(target){return new Proxy(target,{get(target, key, receiver){// 依赖收集track(target, key);const value = Reflect.get(target, key, receiver);// 懒响应式：只有访问时才处理嵌套对象if(typeof value ==='object'&& value !==null){return reactive(value);}return value;},set(target, key, value, receiver){const oldValue = target[key];const result = Reflect.set(target, key, value, receiver);if(oldValue !== value){// 触发更新trigger(target, key);}return result;},deleteProperty(target, key){const hadKey = Reflect.has(target, key);const result = Reflect.deleteProperty(target, key);if(hadKey){trigger(target, key);}return result;}});}

Vue3 的优势

// 1. 可以监听新增/删除属性const obj =reactive({}); obj.newProp ='value';// ✅ 响应式// 2. 可以监听数组索引变化const arr =reactive([1,2,3]); arr[0]=10;// ✅ 触发更新// 3. 懒响应式，性能更好// 只有访问嵌套对象时才进行响应式处理// 4. 支持 Map、Set 等const map =reactive(newMap()); map.set('key','value');// ✅ 响应式

🏗️ 设计模式·前端常见模式

问题：工作中遇到的设计模式

✅ 前端常用设计模式：

1. 单例模式（Singleton）

// 场景：全局状态管理、全局弹窗class Store{constructor(){if(Store.instance){return Store.instance;}this.state ={}; Store.instance =this;}}// Vuex/Pinia 本质就是单例const store =createPinia();

2. 观察者模式（Observer）

// 场景：事件总线、Vue 响应式class EventBus{constructor(){this.events ={};}on(event, callback){if(!this.events[event]){this.events[event]=[];}this.events[event].push(callback);}emit(event, data){if(this.events[event]){this.events[event].forEach(cb=>cb(data));}}}// Vue 的$on/$emit 就是观察者模式

3. 工厂模式（Factory）

// 场景：创建不同类型的组件class ButtonFactory{createButton(type){switch(type){case'primary':return new PrimaryButton();case'danger':return new DangerButton();default:return new DefaultButton();}}}

4. 策略模式（Strategy）

// 场景：表单验证、动画算法const validators ={required:(value)=>!!value,email:(value)=>/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),minLength:(value, length)=> value.length >= length };function validate(value, rules){for(const rule of rules){const[name,...args]= rule.split(':');if(!validators[name](value,...args)){return false;}}return true;}

5. 装饰器模式（Decorator）

// 场景：高阶组件、AOPfunction withLogging(Component){return(props)=>{useEffect(()=>{ console.log('组件渲染', Component.name);});return<Component {...props}/>;};}// 使用const LoggedButton =withLogging(Button);

6. 代理模式（Proxy）

// 场景：图片懒加载、缓存代理const imageProxy=(src)=>{const img =new Image();const proxy =new Proxy(img,{set(target, key, value){if(key ==='src'){// 显示占位图 target.src ='placeholder.jpg';// 真正加载setTimeout(()=>{ target.src = value;},100);}return true;}}); proxy.src = src;return proxy;};

🎯 CSS 选择器优先级

问题：选择器优先级

✅ 完整规则：

1. 优先级计算（权重）

/* 权重计算规则 */!important > 内联样式 > ID 选择器 > 类选择器/属性/伪类 > 元素/伪元素 > 通配符 /* 具体数值（256 进制） */ - 内联样式：1000 - ID 选择器：0100 - 类/属性/伪类：0010 - 元素/伪元素：0001 - 通配符(*)：0000 - 继承：无权重 /* 示例 */ #nav .list li a:hover /* 权重：0100 + 0010 + 0001 + 0001 + 0010 = 0122 */

2. 特殊情况

/* !important 最高优先级 */.color{color: blue !important;/* 最高 */}/* 相同权重，后面的覆盖前面的 */.title{color: red;}.title{color: blue;}/* 生效 *//* 继承的样式优先级最低 */.parent{color: red;}.child{/* 继承的 color 优先级为 0，会被任何直接样式覆盖 */}

3. 实用技巧

/* 增加优先级的方法 */- 重复选择器：.title.title{color: red;}/* 权重加倍 */ - 添加父选择器：.container .title - 使用 id：不要滥用 - !important：最后手段 

🔧 Git 代码冲突解决

问题：git 代码提交冲突怎么解决

✅ 完整流程：

1. 冲突产生的原因

# 两人修改同一文件的同一区域 A 修改了 main.js 的第 10 行并 push B 也修改了 main.js 的第 10 行，然后 pull 时产生冲突 

2. 解决步骤

# 1. 拉取最新代码git pull origin main # 2. 看到冲突提示# Automatic merge failed; fix conflicts and then commit the result.# 3. 查看冲突文件git status # both modified: src/main.js# 4. 打开冲突文件<<<<<<< HEAD 当前分支的修改 ======= 合并进来的修改 >>>>>>> feature-branch # 5. 手动解决冲突# 选择保留哪个，或者合并两者# 删除冲突标记 <<< === >>># 6. 标记为已解决gitadd src/main.js # 7. 完成合并git commit -m "解决冲突"# 8. 推送git push 

3. 更优雅的解决方式

# 使用 merge 工具git mergetool # 使用 rebase 避免多余合并记录git pull --rebase # 然后逐个解决冲突gitadd.git rebase --continue # 如果解决过程中想放弃git merge --abort # 或git rebase --abort 

4. 预防冲突的策略

// 1. 频繁pull git pull --rebase 每天上班第一件事 // 2. 小粒度提交 不要攒一周的代码才提交 // 3. 明确分工 避免多人同时修改同一文件 // 4. 代码审查 PR/MR 时及早发现潜在冲突 

🖱️ 拖拽功能实现

问题：项目中的拖拽功能实现

✅ 完整实现：

1. 原生拖拽 API

// HTML5 Drag and Drop<div draggable="true" ondragstart="dragStart(event)"> 可拖拽元素 </div>

function dragStart(e){ e.dataTransfer.setData('text/plain', e.target.id); e.dataTransfer.effectAllowed ='move';}
function drop(e){ e.preventDefault();const data = e.dataTransfer.getData('text/plain');const element = document.getElementById(data); e.target.appendChild(element);}

2. 鼠标事件模拟（更常用）

class Draggable{constructor(element){this.element = element;this.isDragging =false;this.startX =0;this.startY =0;this.initialLeft =0;this.initialTop =0;this.bindEvents();}bindEvents(){this.element.addEventListener('mousedown',this.onMouseDown.bind(this)); document.addEventListener('mousemove',this.onMouseMove.bind(this)); document.addEventListener('mouseup',this.onMouseUp.bind(this));}onMouseDown(e){this.isDragging =true;// 记录初始位置this.startX = e.clientX;this.startY = e.clientY;// 获取元素当前位置const rect =this.element.getBoundingClientRect();this.initialLeft = rect.left;this.initialTop = rect.top;this.element.style.position ='absolute';this.element.style.zIndex ='1000';this.element.style.cursor ='grabbing';// 阻止默认事件（避免选中文本） e.preventDefault();}onMouseMove(e){if(!this.isDragging)return;// 计算移动距离const dx = e.clientX -this.startX;const dy = e.clientY -this.startY;// 设置新位置this.element.style.left =this.initialLeft + dx +'px';this.element.style.top =this.initialTop + dy +'px';// 可选：添加边界限制this.applyBoundary();}onMouseUp(){this.isDragging =false;this.element.style.cursor ='grab';}applyBoundary(){const left =parseInt(this.element.style.left);const top =parseInt(this.element.style.top);const parent =this.element.parentElement;if(parent){const maxLeft = parent.clientWidth -this.element.offsetWidth;const maxTop = parent.clientHeight -this.element.offsetHeight;this.element.style.left = Math.max(0, Math.min(left, maxLeft))+'px';this.element.style.top = Math.max(0, Math.min(top, maxTop))+'px';}}}

🖼️ 图片懒加载

问题：图片懒加载（什么情况下加载，什么情况下不加载）

✅ 参考实现：

1. Intersection Observer（推荐）

class LazyLoader{constructor(){this.images = document.querySelectorAll('img[data-src]');this.observer =null;this.init();}init(){// 创建观察者this.observer =new IntersectionObserver((entries)=>{ entries.forEach(entry=>{// 当图片进入视口时加载if(entry.isIntersecting){const img = entry.target;this.loadImage(img);// 加载后停止观察this.observer.unobserve(img);}});},{root:null,// 视口rootMargin:'50px',// 提前 50px 加载threshold:0.01// 出现 1% 时触发});// 开始观察this.images.forEach(img=>{this.observer.observe(img);});}loadImage(img){const src = img.dataset.src;if(src){ img.src = src; img.removeAttribute('data-src');// 添加加载完成类 img.addEventListener('load',()=>{ img.classList.add('loaded');});}}}// 使用const lazyLoader =newLazyLoader();

2. 什么情况下加载？

// 加载条件：1. 图片进入视口（或即将进入） 2. 浏览器空闲时（预加载） 3. 网络状态良好（4G/WiFi） 4. 用户即将滚动到该位置（预测） // 不加载条件：1. 图片远离视口 2. 网络状态差（2G/弱网） 3. 节省流量模式开启 4.图片被 display:none 隐藏 

3. 优化版本（考虑网络状态）

class SmartLazyLoaderextends LazyLoader{constructor(){super();this.connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;this.checkNetwork();}checkNetwork(){if(this.connection){// 监听网络变化this.connection.addEventListener('change',this.onNetworkChange.bind(this));// 判断是否应该加载if(this.shouldLoad()){this.startObserving();}else{this.pauseObserving();}}}shouldLoad(){if(!this.connection)returntrue;// 2G 网络不预加载if(this.connection.effectiveType.includes('2g')){returnfalse;}// 流量敏感if(this.connection.saveData){returnfalse;}returntrue;}onNetworkChange(){if(this.shouldLoad()){this.startObserving();}else{this.pauseObserving();}}}

🏗️ 实现 new 操作符

问题：实现 new 操作符

✅ 参考实现：

function myNew(constructor,...args){// 1. 创建一个空对象，原型指向构造函数的 prototypeconst obj = Object.create(constructor.prototype);// 2. 将构造函数的 this 指向这个对象，并执行构造函数const result =constructor.apply(obj, args);// 3. 判断返回值// 如果构造函数返回对象，则返回该对象；否则返回创建的对象return(typeof result ==='object'&& result !==null)||typeof result ==='function'? result : obj;}// 测试function Person(name, age){this.name = name;this.age = age;// 如果没有 return，默认返回 this}
const p1 =myNew(Person,'Tom',18); console.log(p1);// Person { name: 'Tom', age: 18 } console.log(p1 instanceofPerson);// true// 测试构造函数返回对象的情况function ReturnsObject(name){this.name = name;return{custom:'object'};}
const p2 =myNew(ReturnsObject,'Jerry'); console.log(p2);// { custom: 'object' }，不是 ReturnsObject 的实例

关键点解析：

// 1. Object.create 相当于const obj ={}; obj.__proto__ = constructor.prototype;// 2. 处理返回值 - 如果构造函数返回原始类型（string/number/boolean 等），忽略，返回 obj - 如果构造函数返回对象/函数，返回该对象 -null 是特殊情况（typeofnull==='object'），返回 obj 

🌳 列表转树·数据变形

问题：列表到树的数据变形

✅ 参考实现：

1. 题目理解

// 输入const list =[{id:1,name:'节点 1',parentId:null},{id:2,name:'节点 2',parentId:1},{id:3,name:'节点 3',parentId:1},{id:4,name:'节点 4',parentId:2},{id:5,name:'节点 5',parentId:3}];// 输出const tree =[{id:1,name:'节点 1',children:[{id:2,name:'节点 2',children:[{id:4,name:'节点 4',children:[]}]},{id:3,name:'节点 3',children:[{id:5,name:'节点 5',children:[]}]}]}];

2. 一次遍历 + Map

function listToTree(list){const map =newMap();const roots =[];// 第一次遍历：建立 id -> node 映射 list.forEach(item=>{ map.set(item.id,{...item,children:[]});});// 第二次遍历：建立父子关系 list.forEach(item=>{const node = map.get(item.id);if(item.parentId ===null|| item.parentId ===undefined){// 根节点 roots.push(node);}else{// 子节点，找到父节点并添加const parent = map.get(item.parentId);if(parent){ parent.children.push(node);}else{// 处理父节点不存在的情况（数据错误） roots.push(node);}}});return roots;}

3. 递归版本（适用于小数据）

function listToTreeRecursive(list, parentId =null){return list.filter(item=> item.parentId === parentId).map(item=>({...item,children:listToTreeRecursive(list, item.id)}));}

4. 进阶要求：排序、过滤

function listToTreeAdvanced(list, options ={}){const{ idKey ='id', parentKey ='parentId', childrenKey ='children', sortKey =null, sortOrder ='asc', filter =null}= options;const map =newMap();const roots =[];// 过滤const filteredList = filter ? list.filter(filter): list;// 建立映射 filteredList.forEach(item=>{ map.set(item[idKey],{...item,[childrenKey]:[]});});// 建立关系 filteredList.forEach(item=>{const node = map.get(item[idKey]);const parentId = item[parentKey];if(parentId ===null|| parentId ===undefined){ roots.push(node);}else{const parent = map.get(parentId);if(parent){ parent[childrenKey].push(node);}}});// 排序if(sortKey){constsortFn=(a, b)=>{if(sortOrder ==='asc'){return a[sortKey]> b[sortKey]?1:-1;}else{return a[sortKey]< b[sortKey]?1:-1;}};constsortTree=(nodes)=>{ nodes.sort(sortFn); nodes.forEach(node=>{if(node[childrenKey].length){sortTree(node[childrenKey]);}});};sortTree(roots);}return roots;}

5. 应用场景

// 1. 组织架构图// 2. 权限菜单树// 3. 评论楼中楼// 4. 商品分类// 5. 地区选择器

🎁 附：字节一面复习清单