【前端面经】字节跳动一面

写在前面：面经只是记录博主遇到的题目。每题的答案在编写文档的时候已经有问过deepseek，它只是一种比较普世的答案，要学得深入还是靠自己

Q：三栏布局的实现方式（圣杯模型）如何实现
A：

    /* 整个 */.container {display: grid;grid-template-columns: 200px 1fr 200px;}

或

    /* 整个 */.container {display: flex;}.left,.right {width: 200px;}/* 中间那个 */.main {flex: 1;}

Q：盒子模型

<html>
<div id="content-box" class="box">content-box</div>
<div id="border-box" class="box">border-box</div>
<style>.box {width: 100px;height: 100px;padding: 20px;margin: 10px;border: 5px solid red;background: blue;color: #fff;}#content-box {box-sizing: content-box;}#border-box {box-sizing: border-box;}
</style>
</html>

中，两种box-sizing蓝色区域大小分别是多少
A：
content-box：默认模式，宽高100只包含内容。150盒子含有20 margin，蓝色是140×140
border-box：宽高100包含内容、padding、border。100盒子含有20 margin，蓝色是90×90

Q：js 事件循环机制

setTimeout(() => console.log(1))new Promise(function (resolve) {console.log(2)for (let i = 0; i < 10000; i++) {if (i == 9999) resolve()}console.log(3)}).then(() => console.log(4))console.log(5)

以上代码输出顺序是？
A：
调用栈 console.log(2)，for是同步代码console.log(3)，console.log(5)
微任务队列 then(() => console.log(4))
宏任务队列 setTimeout(() => console.log(1))
结果为：2 3 5 4 1

Q：Vue响应式如何实现
A：
V2: Object.defineProperty，对象属性劫持
V3: Proxy，代理整个对象

Q：js有什么基本类型
A：
基本类型：Number，String，Boolean，Undefined，Null，Symbol，BigInt。
引用类型：Object，Array，Function等。

Q：如何判断两个对象是否完全相等
A：

JSON.stringify(obj1) === JSON.stringify(obj2)

Q：如何遍历对象的键值对
A：

// 法一
const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {console.log(key, obj[key]);
}
// 法二
const obj = { a: 1, b: 2, c: 3 };
const keys = Object.keys(obj);
keys.forEach((key) => {console.log(key, obj[key]);
})
// 法三
const obj = { a: 1, b: 2, c: 3 };
const keys = Reflect.ownKeys(obj);
keys.forEach((key) => {console.log(key, obj[key]);
})

Q：Vue3使用Proxy，那么Proxy有什么缺点
A：浏览器兼容不好，性能开销大，调试复杂性，代码更复杂，内存占用，===比较失败

Q：vue中，如果大量后端数据异步回来，如何处理
A：web workers处理密集型计算

// 主线程
const worker = new Worker('data-processor.js');
worker.postMessage(largeData);
worker.onmessage = (e) => {const processedData = e.data;// 更新UI
};// data-processor.js
self.onmessage = (e) => {const result = heavyComputation(e.data);self.postMessage(result);
};

Q：手撕代码，js写出promise底层实现
A：

function MyPromise(executor) {// 初始化状态和结果和回调函数数组this._state = 'pending';this._value = undefined;this._callbacks = [];// 定义函数const resolve = (value) => {if (this._state === 'pending') {this._state = 'fulfilled';this._value = value;this._callbacks.forEach((callback) => {callback.onFulfilled(value);});}};// 定义函数const reject = (reason) => {if (this._state === 'pending') {this._state = 'rejected';this._value = reason;this._callbacks.forEach((callback) => {callback.onRejected(reason);});}};// 执行executor，传入两个函数try {executor(resolve, reject);} catch (error) {reject(error);}
}MyPromise.prototype.then = function (onFulfilled, onRejected) {if (this._state === 'fulfilled') {onFulfilled(this._value);} else if (this._state === 'rejected') {onRejected(this._value);} else if (this._state === 'pending') {this._callbacks.push({onFulfilled,onRejected,});}
};const promise = new MyPromise((resolve, reject) => {setTimeout(() => {resolve('Hello, World!');}, 1000);
});promise.then((value) => {console.log(value); // Output: Hello, World!},(error) => {console.error(error);}
);

Q：平时开发，CSR和SSR用哪种
A：
Vue支持CSR也支持SSR
CSR：在浏览器中动态生成HTML，开发简单，直接用vue-cli，SEO不友好
常用：纯Vue，React，Angular，静态站点生成，后台管理系统

SSR：SEO友好，服务器压力大，开发复杂度高，需要处理node.js环境
常用：Nuxt.js，Next.js

Q：手撕代码，有序数组[1, 2, 3, 29]和[2, 3 ,6 ,9]合并成一个有序数组（规定不能用内置）
A：

function mergeSortedArrays(arr1, arr2) {let i = 0; // 第一个数组的指针let j = 0; // 第二个数组的指针const result = [];// 使用双指针遍历两个数组while (i < arr1.length && j < arr2.length) {if (arr1[i] <= arr2[j]) {result.push(arr1[i]);i++;} else {result.push(arr2[j]);j++;}}// 将剩余元素添加到结果数组// 使用扩展运算符和slice来添加剩余元素return [...result, ...arr1.slice(i), ...arr2.slice(j)];
}// 测试代码
const array1 = [2, 5, 6, 9];
const array2 = [1, 2, 3, 29];
const mergedArray = mergeSortedArrays(array1, array2);console.log('数组1:', array1);
console.log('数组2:', array2);
console.log('合并后的有序数组:', mergedArray);