前端面试八股文2024

### 2024 前端面试常见问题与解答 #### HTML 和 CSS 的基础知识 HTML 和 CSS 是构建网页的基础。常见的面试问题可能涉及语义化标签的选择、CSS 中盒模型的理解以及如何实现响应式设计。 - **什么是语义化的 HTML？** 使用具有特定含义的标记来描述页面结构，而不是仅依赖于 div 或 span 这样的通用容器。例如 `<header>` 表示页眉区域；`<article>` 定义独立的内容片段[^1]。 - **解释一下 CSS 盒模型的概念及其组成部分是什么?** 每个元素可以看作是一个矩形盒子，它由四部分组成：margin（外边距）、border（边框）、padding（内边距）和 content area（内容区）。这些属性决定了元素在布局中的位置及大小关系。 #### JavaScript 核心概念 JavaScript 对象操作、闭包特性、事件委托机制等都是高频考点之一。 - **请说明 this 关键字的作用范围有哪些情况下的指向不同？** `this` 取决于函数调用的方式，在全局上下文中等于 window/globalThis;作为对象方法被调用时，则该对象即为 this 所指代的对象；箭头函数内部不存在自己的 this 绑定而是继承自外部作用域等等。 - **谈谈你对闭包(Closure)的理解并给出实际应用场景的例子吗？** 当某个函数能够记住并访问它的词法作用域即使这个函数是在其定义环境之外执行的时候就形成了闭包现象。比如计数器就是一个典型的应用场景，通过返回一个嵌套的小函数保持对外层变量状态的记忆能力而不受外界干扰。 ```javascript function createCounter() { let count = 0; return function () { // 返回的是一个小函数 count += 1; console.log(count); } } const counter = createCounter(); counter(); // 输出: 1 counter(); // 输出: 2 ``` #### 浏览器工作原理及相关优化措施 了解浏览器加载资源的过程对于性能调优至关重要，掌握 HTTP 协议版本差异也有助于解决跨域资源共享等问题。 - **简述下浏览器渲染过程的主要阶段都有哪些呢？** 大致分为以下几个步骤：解析 HTML 构建 DOM 树 -> 解析样式表生成 Render Tree (包含视觉信息)-> Layout 计算各节点几何尺寸-> Paint 将像素绘制到屏幕上-> Composite 合成图层显示给用户查看。 - **HTTP/2 相较于之前的协议有什么改进之处了吗？** 改进了头部压缩算法减少传输开销；支持多路复用允许多个请求共享同一个 TCP 链接从而降低延迟时间提高效率；服务器推送主动向客户端发送额外的数据而无需等待显式的索取行为发生。 #### Vue.js / React 等框架相关知识点 随着单页应用(SPA)日益普及，Vue.js 和 React 成为了非常受欢迎的技术栈选项。 - **React 生命周期中组件挂载完成后的钩子叫什么名字呀？** componentDidMount 方法会在首次 render 渲染之后立即触发一次，常用来发起网络请求获取初始数据或者订阅某些消息通知以便及时更新界面展示的信息。 - **Vue 实现双向绑定的核心原理你知道吗？** 利用了 Object.defineProperty API 来监听 data 属性的变化，并且配合编译模板过程中收集到的相关指令表达式形成观察者模式 Observer Pattern ，当检测到变化就会自动刷新视图上的对应部分。