字节跳动前端面试经验分享：重点考察CSS、JS、Vue与网络知识

"该资源主要涉及前端开发面试的相关知识点，包括CSS布局、定位、选择器优先级、JavaScript原型链、MVVM架构、Vue生命周期、组件通信、网络协议(TCP与UDP)、Promise以及算法题。内容以字节跳动前端校招面试为例，强调实战能力和基础理论的结合。" 面试中涉及的前端技术知识点详解： 1. **CSS垂直居中**：常见的实现方式有`display: flex`与`align-items: center`，`vertical-align: middle`配合`line-height`或`table-cell`，`position: absolute`结合`top: 50%`和`transform: translateY(-50%)`，以及`calc()`和`margin`等方法。 2. **CSS position属性**：主要有`static`（默认值，元素按正常文档流排列），`relative`（相对定位，相对于其原来的位置），`absolute`（绝对定位，相对于最近的非`static`定位祖先元素），`fixed`（固定定位，相对于浏览器窗口）和`sticky`（粘性定位，介于相对和固定定位之间）。 3. **CSS选择器优先级**：内联样式（如`style="..."`）> ID选择器（`#id`）> 类选择器（`.class`）、属性选择器（`[attr]`）和伪类（`:pseudo`）> 标签选择器（`element`）和伪元素（`::pseudo`）> 通配符选择器（`*`）和后代选择器（`selector1 selector2`）。相同优先级时，顺序在后的优先级更高。 4. **JavaScript原型链**：JavaScript中的对象可以通过原型链共享属性和方法。每个对象都有`__proto__`属性，指向创建它的构造函数的原型对象。原型链由`__proto__`链接，最终到达`Object.prototype`，再往上是`null`，形成一条链。 5. **new操作符**：`new`用于创建一个新对象，并将新对象的`[[Prototype]]`（即`__proto__`）链接到指定构造函数的原型。同时，`this`关键字在构造函数内部指向新创建的对象。 6. **MVVM与MVC**：MVVM（Model-View-ViewModel）是Vue.js等现代前端框架采用的架构模式，强调数据双向绑定，ViewModel作为桥梁，自动同步Model和View。MVC（Model-View-Controller）更传统，Controller处理用户交互，更新Model，Model变化后通知View更新。 7. **Vue生命周期**：Vue组件从创建到销毁的过程，包括`beforeCreate`、`created`、`beforeMount`、`mounted`、`beforeUpdate`、`updated`、`beforeDestroy`和`destroyed`等阶段。获取DOM信息通常在`mounted`阶段。 8. **Vue组件通信**：Vue提供了多种组件间通信方式，如`props`（父传子）、`$emit`（子传父）、`provide/inject`（跨级通信）、事件总线（Event Bus）以及Vuex（状态管理）。 9. **TCP与UDP**：TCP（Transmission Control Protocol）是面向连接的、可靠的传输协议，保证数据有序、无丢失，但有较高的开销。UDP（User Datagram Protocol）是无连接的、不可靠的传输协议，速度快但不保证数据完整性。 10. **TCP三次握手与四次挥手**：三次握手确保建立可靠连接，四次挥手释放连接。握手过程中确认序号和确认应答序号的交换，防止旧的数据包影响新的连接。 11. **Promise状态**：Promise有三种状态：`pending`（等待中）、`fulfilled`（已完成，又称 resolved）和`rejected`（已失败）。状态一旦改变，就不会再变，保证异步操作的单向数据流。 12. **手写Promise**：基本实现包括构造函数接收一个执行器函数，该函数接收`resolve`和`reject`两个回调，分别用于改变Promise状态。还需处理状态改变后的回调执行，以及错误捕获。 13. **算法题**： - 最长公共前缀：遍历字符串数组，找到第一个不为空的公共前缀作为结果。 - 多层数组嵌套降级：使用递归或迭代（如`Array.prototype.reduce()`）将嵌套数组展开为一维数组。 面试中，字节跳动强调实战能力，面试过程包含大量现场编码，对于基础理论和编程能力有较高要求。面试官友好，允许与面试官讨论问题，营造轻松氛围。