2023前端面试精华： promise、CSS解析与JS规范详解

本文档是一份针对前端面试题目的详细整理，包含了2021年的最新内容，主要涵盖四个核心主题：Promise对象的用法、浏览器解析CSS选择器的机制、JavaScript的基本编程规范，以及`display:none`与`visibility: hidden`这两个CSS属性的区别。 ### 1. Promise对象的用法 Promise是JavaScript中的一个重要概念，用于处理异步操作。它提供了一种解决回调地狱的方式，使得代码更易于理解和维护。Promise对象有两个核心方法：`resolve`和`reject`。当异步操作成功时，调用`resolve`并传入结果，失败时调用`reject`并传入错误。`then`方法用于处理成功的回调，`catch`方法处理失败的情况。手写一个简单的Promise实例展示了如何创建和使用Promise： ```javascript function myPromise(condition) { return new Promise((resolve, reject) => { if (condition) { resolve('Success'); } else { reject('Error'); } }); } myPromise(true).then(value => { console.log('Success:', value); }, error => { console.error('Failure:', error); }); ``` ### 2. 浏览器解析CSS选择器 CSS选择器解析遵循从右到左的顺序，这种策略可以提高性能，因为可以在早期阶段筛选掉大量不匹配的节点。选择器的解析首先查找最右节点，然后向上遍历到根元素或满足条件的节点，形成Render Tree。这个过程涉及到DOM树和样式规则的匹配，是浏览器渲染的重要步骤。 ### 3. JavaScript基本编程规范 这些规范旨在提升代码的可读性和一致性： - **变量声明**：避免同一行声明多个变量，提倡清晰地分块。 - **比较运算符**：推荐使用`===`和`!==`进行精确类型检查。 - **数组创建**：优先使用对象字面量而非`new Array()`。 - **避免全局变量**：减少命名冲突和污染。 - **Switch语句**：确保每个情况都有默认分支。 - **函数返回**：保持一致性，要么始终返回值，要么不返回。 - **控制结构**：对于`for`、`if`，始终使用花括号包裹代码块，以确保块级作用域。 ### 4. display:none与visibility: hidden的区别 `display: none`隐藏元素，不仅不显示在页面上，还会从文档流中移除，这意味着它占用的空间被其他元素替换，涉及回流和重绘。而`visibility: hidden`虽然也隐藏元素，但元素仍保留其在文档流中的位置，因此不会触发回流，只是视觉上不可见。在考虑性能优化时，`display: none`更适合于完全不需要占用渲染资源的情况，而`visibility: hidden`则在需要元素的某些行为时更为合适。