前端面试题

前端面试常见知识点汇总

最新推荐文章于 2025-10-15 21:08:12 发布

原创

最新推荐文章于 2025-10-15 21:08:12 发布 · 937 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端

CSS 常见问题解答

1. CSS盒模型

CSS盒模型由内容区域（content）、内边距（padding）、边框（border）和外边距（margin）组成，分为两种类型：

标准盒模型：元素宽度 = content宽度
替代盒模型（通过 box-sizing: border-box 设置）：元素宽度 = content + padding + border

2. CSS选择器的优先级

优先级从高到低：

!important（覆盖所有规则）
内联样式（如 <div style="color:red">）
ID 选择器（如 #header）
类/伪类/属性选择器（如 .btn, :hover, [type="text"]）
元素/伪元素选择器（如 div, ::before）
通配符/继承样式（如 *）
计算规则：(a, b, c) 形式，其中：

a = ID 选择器数量
b = 类/伪类选择器数量
c = 元素选择器数量
例如：#nav .item 优先级为 (1,1,0)

3. 隐藏元素的方法

方法	特点
`display: none`	元素不占空间，无法交互，DOM 中移除渲染
`visibility: hidden`	元素占空间，不可见但保留布局，无法交互
`opacity: 0`	元素占空间，完全透明，可交互（如点击事件）
`position: absolute; left: -9999px`	移出视口，可访问性差，但保留交互性

4. px 和 rem 的区别

px：绝对单位，1px 对应屏幕物理像素点，固定大小不受父元素影响。
rem：相对单位，基于根元素（<html>）的字体大小（默认 1rem = 16px）。
优势：响应式设计中，通过修改根字体大小可全局调整布局（如 html { font-size: 62.5%; } 使 1rem ≈ 10px）。

5. 重绘和重排的区别

重排（Reflow）：
布局变化（如修改宽度、位置、字体大小），浏览器重新计算元素几何属性，触发整个渲染树更新。
常见触发操作：width, height, margin, display, offsetTop 等。
重绘（Repaint）：
外观变化但不影响布局（如修改颜色、背景），浏览器仅重绘受影响区域。
性能影响：重排一定触发重绘，重绘开销较小。优化建议：减少 DOM 操作，使用 transform 代替位置修改。

6. 元素水平垂直居中

Flexbox 方案（推荐）：

.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
}

Grid 方案：

.parent {
  display: grid;
  place-items: center; /* 同时居中 */
}

绝对定位方案：

.parent { position: relative; }
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 兼容不同尺寸元素 */
}

7. CSS 属性继承性

可继承属性：
文本相关（如 font-family, color, line-height, text-align）和部分列表属性（如 list-style）。
不可继承属性：
布局相关（如 width, height, margin, padding, border）和显示属性（如 display, background）。
强制继承：对不可继承属性使用 inherit 值（如 border: inherit）。

8. CSS 预处理器使用

预处理器（如 Sass, Less）通过变量、嵌套、混合宏（mixin）等功能提升开发效率：

// Sass 示例
$primary-color: #3498db;
@mixin center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  @include center-flex;
  background: lighten($primary-color, 20%);
}

优势：代码复用、模块化、函数运算（如颜色处理），最终编译为标准 CSS。

js常见问题

1. JavaScript 有哪三部分组成？

JavaScript 主要由以下三部分组成：

ECMAScript：定义了语言的核心语法、数据类型、语句和基本对象（如 Array, Object）。
DOM (Document Object Model)：用于操作HTML和XML文档的接口，允许JavaScript访问和修改页面内容。
BOM (Browser Object Model)：提供与浏览器交互的接口，包括 window、location、navigator 等对象，用于控制浏览器窗口、历史记录等。

2. JavaScript 有哪些内置对象？

JavaScript 的内置对象包括：

基本对象：Object、Function、Array、String、Number、Boolean、Symbol（ES6 新增）。
其他对象：Date（日期处理）、Math（数学运算）、RegExp（正则表达式）、JSON（JSON 解析）、Error（错误处理），以及全局对象如 window（浏览器环境）或 global（Node.js 环境）。

3. 操作数据的方法有哪些？

操作数据的方法主要包括：

数组方法：如 push()、pop()、shift()、unshift()、slice()、splice()、map()、filter()、reduce()。
字符串方法：如 charAt()、substring()、replace()、split()、toUpperCase()。
对象方法：如 Object.keys()、Object.values()、Object.assign()（ES6）。
其他：使用循环（如 for、forEach）或高阶函数处理数据。示例代码：

const arr = [1, 2, 3];
arr.push(4); // 添加元素
console.log(arr); // 输出 [1, 2, 3, 4]

4. JavaScript 对数据类型的检测方式有哪些？

检测数据类型的方式包括：

typeof 操作符：返回基本类型的字符串表示，如 typeof "hello" 返回 "string"，但对 null 返回 "object"（历史遗留问题）。
instanceof 操作符：检测对象是否属于某个构造函数，如 [] instanceof Array 返回 true。
Object.prototype.toString.call()：最准确的方式，返回 [object Type] 格式，如 Object.prototype.toString.call([]) 返回 "[object Array]"。
Array.isArray()：专门检测数组类型，ES6 新增。

5. 闭包是什么，有什么特点？

闭包（Closure）是指一个函数能访问并记住其外部作用域变量的能力。特点包括：

封装性：可以创建私有变量，避免全局污染。
内存驻留：外部变量不会被垃圾回收，可能导致内存泄漏。
延迟执行：常用于回调函数、模块化设计。示例：

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}
const counter = outer();
console.log(counter()); // 输出 1

6. 前端内存泄漏怎么理解？

前端内存泄漏指浏览器中不再使用的内存没有被释放，导致应用变慢或崩溃。常见原因：

未清理的全局变量或事件监听器。
闭包引用外部变量。
DOM 元素引用未被删除（如移除元素后仍有变量引用它）。解决方法：使用工具（如 Chrome DevTools Memory 面板）检测，手动解除引用、移除事件监听器。

7. 事件委托是什么？

事件委托是一种优化事件处理的技术，利用事件冒泡将事件监听器绑定到父元素，而非每个子元素。优点：

减少内存占用（只需一个监听器）。
动态元素无需重新绑定。示例：点击列表项时输出内容。

document.getElementById('parent').addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    console.log(e.target.textContent);
  }
});

8. 基础数据类型和引用数据的区别？

基础数据类型：包括 String、Number、Boolean、null、undefined、Symbol（ES6）。值直接存储在栈内存中，赋值时复制值。
引用数据类型：包括 Object、Array、Function。值存储在堆内存中，变量存储引用地址；赋值时复制地址，多个变量可能共享同一数据。示例：

let a = 1; // 基础类型，a 存储值
let b = a; // b 复制值，a 和 b 独立
a = 2;
console.log(b); // 输出 1

let obj1 = { key: 'value' }; // 引用类型
let obj2 = obj1; // obj2 复制引用地址
obj1.key = 'new';
console.log(obj2.key); // 输出 'new'，共享数据

9. 原型链是什么？

原型链是 JavaScript 实现继承的机制。每个对象都有一个原型对象（通过 __proto__ 访问），原型对象也有原型，形成链式结构。当访问对象属性时，如果自身不存在，会沿原型链向上查找，直到 Object.prototype（原型链顶端）。构造函数通过 prototype 属性设置原型。示例：

function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function() {
  console.log('Hello, ' + this.name);
};
const person = new Person('Alice');
person.sayHello(); // 输出 "Hello, Alice"，方法来自原型