Web前端面试问答题有哪些

目录

1. HTML
2. CSS
3. JavaScript
4. 前端框架
5. 性能优化
6. 网络协议
7. 浏览器原理
8. 前端安全
9. 工程化
10. 数据结构与算法
11. 设计模式
12. 其他

HTML

1. HTML5 有哪些新特性？

HTML5 引入了许多新特性，主要包括： - 语义化标签：如 <header>、<footer>、<article>、<section> 等。 - 表单增强：新增了 <input> 类型如 email、date、range 等。 - 多媒体支持：<audio> 和 <video> 标签。 - Canvas 和 SVG：用于绘制图形和动画。 - 本地存储：localStorage 和 sessionStorage。 - Web Workers：允许在后台运行 JavaScript 代码。 - WebSocket：实现全双工通信。 - Geolocation API：获取用户地理位置。

2. 什么是语义化标签？为什么要使用语义化标签？

语义化标签是指使用具有明确含义的 HTML 标签来描述页面的结构和内容。例如，使用 <header> 表示页面的头部，使用 <footer> 表示页面的底部。

优点： - 提高可读性：代码更易于理解和维护。 - SEO 优化：搜索引擎更容易理解页面内容，提高搜索排名。 - 无障碍访问：屏幕阅读器等辅助工具可以更好地解析页面内容。

3. 什么是 DOCTYPE？它的作用是什么？

DOCTYPE 是文档类型声明，用于告诉浏览器当前文档使用的是哪种 HTML 或 XHTML 规范。它位于 HTML 文档的最顶部。

作用： - 触发标准模式：确保浏览器以标准模式渲染页面，避免兼容性问题。 - 验证文档类型：帮助验证工具检查文档是否符合指定的 HTML 或 XHTML 规范。

4. HTML 中的 data-* 属性是什么？

data-* 属性是 HTML5 引入的自定义数据属性，允许开发者在 HTML 元素中存储自定义数据。这些属性可以通过 JavaScript 访问和操作。

示例：

<div id="user" data-user-id="123" data-role="admin"></div>

const user = document.getElementById('user');
console.log(user.dataset.userId); // 输出 "123"
console.log(user.dataset.role); // 输出 "admin"

5. HTML 中的 meta 标签有哪些常见用途？

meta 标签用于提供页面的元数据，常见的用途包括： - 字符编码：<meta charset="UTF-8"> - 页面描述：<meta name="description" content="页面描述"> - 关键词：<meta name="keywords" content="关键词1, 关键词2"> - 视口设置：<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 作者信息：<meta name="author" content="作者名"> - 刷新页面：<meta http-equiv="refresh" content="5;url=http://example.com">

6. HTML 中的 script 标签的 async 和 defer 属性有什么区别？

• async：脚本异步加载，加载完成后立即执行，不保证执行顺序。
• defer：脚本异步加载，但在文档解析完成后按顺序执行。

区别： - async 适用于不依赖其他脚本的独立脚本。 - defer 适用于需要按顺序执行的脚本。

7. HTML 中的 iframe 标签有什么作用？

iframe 标签用于在当前页面中嵌入另一个网页。常见的用途包括： - 嵌入第三方内容：如地图、视频等。 - 实现跨域通信：通过 postMessage API。 - 创建沙盒环境：通过 sandbox 属性限制嵌入页面的行为。

8. HTML 中的 canvas 和 SVG 有什么区别？

• canvas：基于像素的绘图 API，适合处理复杂的图形和动画，但无法直接操作 DOM。
• SVG：基于矢量的图形格式，适合处理简单的图形和图标，可以直接操作 DOM。

区别： - canvas 适合处理大量动态图形，性能较高。 - SVG 适合处理静态图形，支持缩放和交互。

9. HTML 中的 Web Components 是什么？

Web Components 是一组允许开发者创建可重用的自定义 HTML 元素的技术，主要包括： - Custom Elements：允许定义新的 HTML 元素。 - Shadow DOM：提供封装样式和结构的机制。 - HTML Templates：允许定义可复用的 HTML 模板。

优点： - 组件化：提高代码的可重用性和可维护性。 - 封装性：避免样式和脚本的全局污染。

10. HTML 中的 ARIA 是什么？

ARIA（Accessible Rich Internet Applications）是一组用于增强网页可访问性的属性，主要用于辅助技术（如屏幕阅读器）理解网页内容。

常见属性： - role：定义元素的角色，如 button、menu 等。 - aria-label：为元素提供可访问的标签。 - aria-hidden：隐藏元素，使其对辅助技术不可见。

CSS

1. CSS 盒模型是什么？

CSS 盒模型描述了元素在页面中的布局方式，主要包括： - 内容区：元素的实际内容。 - 内边距：内容区与边框之间的空间。 - 边框：围绕内容和内边距的边界。 - 外边距：元素与其他元素之间的空间。

盒模型类型： - 标准盒模型：width 和 height 只包括内容区。 - IE 盒模型：width 和 height 包括内容区、内边距和边框。

2. CSS 中的 position 属性有哪些值？

position 属性用于指定元素的定位方式，常见的值包括： - static：默认值，元素按照正常文档流排列。 - relative：相对定位，元素相对于其正常位置进行偏移。 - absolute：绝对定位，元素相对于最近的定位祖先元素进行偏移。 - fixed：固定定位，元素相对于视口进行偏移。 - sticky：粘性定位，元素在滚动到特定位置时固定。

3. CSS 中的 flexbox 是什么？

flexbox 是一种一维布局模型，用于在容器内灵活地排列子元素。主要属性包括： - display: flex：将容器设置为 flex 容器。 - flex-direction：指定主轴方向（row、column 等）。 - justify-content：指定主轴上的对齐方式。 - align-items：指定交叉轴上的对齐方式。 - flex-grow：指定子元素的放大比例。 - flex-shrink：指定子元素的缩小比例。 - flex-basis：指定子元素的初始大小。

4. CSS 中的 grid 是什么？

grid 是一种二维布局模型，用于在容器内创建复杂的网格布局。主要属性包括： - display: grid：将容器设置为 grid 容器。 - grid-template-columns：定义列的大小和数量。 - grid-template-rows：定义行的大小和数量。 - grid-gap：定义网格之间的间距。 - grid-column 和 grid-row：指定子元素在网格中的位置。

5. CSS 中的 BEM 命名规范是什么？

BEM（Block, Element, Modifier）是一种 CSS 命名规范，用于提高代码的可读性和可维护性。

命名规则： - Block：独立的组件，如 .header。 - Element：块的一部分，如 .header__logo。 - Modifier：块或元素的状态，如 .header--fixed。

优点： - 模块化：提高代码的可重用性。 - 清晰性：明确元素之间的关系和状态。

6. CSS 中的 伪类 和 伪元素 有什么区别？

• 伪类：用于选择元素的特定状态，如 :hover、:focus 等。
• 伪元素：用于创建不在 DOM 中的虚拟元素，如 ::before、::after 等。

区别： - 伪类选择的是元素的特定状态。 - 伪元素创建的是虚拟元素。

7. CSS 中的 z-index 是什么？

z-index 属性用于控制元素的堆叠顺序，值越大，元素越靠前。

注意： - z-index 只对定位元素（position 值为 relative、absolute、fixed 或 sticky）有效。 - 如果两个元素的 z-index 相同，则后出现的元素会覆盖前面的元素。

8. CSS 中的 媒体查询 是什么？

媒体查询 用于根据设备的特性（如屏幕宽度、分辨率等）应用不同的样式。

示例：

@media screen and (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

常见用途： - 响应式设计：根据屏幕大小调整布局。 - 打印样式：为打印设备提供特定的样式。

9. CSS 中的 动画 和 过渡 有什么区别？

• 动画：通过 @keyframes 定义复杂的动画效果，可以控制多个关键帧。
• 过渡：通过 transition 定义简单的状态变化效果，只能控制开始和结束状态。

区别： - 动画适合复杂的、多阶段的效果。 - 过渡适合简单的、单阶段的效果。

10. CSS 中的 预处理器 是什么？

CSS 预处理器是一种脚本语言，扩展了 CSS 的功能，常见的预处理器包括 Sass、Less 和 Stylus。

优点： - 变量：定义可重用的值。 - 嵌套：简化选择器的书写。 - 混合：定义可重用的样式块。 - 函数：实现复杂的计算和逻辑。

JavaScript

1. JavaScript 中的 闭包 是什么？

闭包是指函数能够访问其词法作用域中的变量，即使函数在其词法作用域之外执行。

示例：

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const counter = outer();
console.log(counter()); // 输出 1
console.log(counter()); // 输出 2

优点： - 数据封装：保护变量不被外部访问。 - 函数工厂：创建具有特定行为的函数。

2. JavaScript 中的 原型链 是什么？

原型链是 JavaScript 实现继承的机制，每个对象都有一个原型对象，通过 __proto__ 属性指向其原型对象，直到 null。

示例：

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, ${this.name}`);
};

const person = new Person('Alice');
person.sayHello(); // 输出 "Hello, Alice"

优点： - 共享方法：减少内存占用。 - 动态继承：可以在运行时修改原型链。

3. JavaScript 中的 this 是什么？

this 是函数执行时的上下文对象，其值取决于函数的调用方式。

常见情况： - 全局上下文：this 指向 window（浏览器）或 global（Node.js）。 - 对象方法：this 指向调用该方法的对象。 - 构造函数：this 指向新创建的对象。 - 箭头函数：this 继承自外层函数的 this。

4. JavaScript 中的 Promise 是什么？

Promise 是一种用于处理异步操作的对象，表示一个可能在未来完成或失败的操作。

示例：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Success');
  }, 1000);
});

promise.then((result) => {
  console.log(result); // 输出 "Success"
}).catch((error) => {
  console.error(error);
});

优点： - 链式调用：简化异步操作的处理。 - 错误处理：通过 catch 方法统一处理错误。

5. JavaScript 中的 async/await 是什么？

async/await 是 Promise 的语法糖，用于简化异步代码的书写。

示例：

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchData();

优点： - 同步风格：使异步代码看起来像同步代码。 - 错误处理：通过 try/catch 处理错误。

6. JavaScript 中的 事件循环 是什么？

事件循环是 JavaScript 处理异步操作的机制，主要包括： - 调用栈：用于存储同步任务的执行上下文。 - 任务队列：用于存储异步任务的回调函数。 - 微任务队列：用于存储 Promise 的回调函数。

执行顺序： 1. 执行同步任务。 2. 执行微任务队列中的所有任务。 3. 执行任务队列中的一个任务。 4. 重复上述步骤。

7. JavaScript 中的 模块化 是什么？

模块化是将代码分割成独立的模块，每个模块具有特定的功能，通过 import 和 export 进行依赖管理。

常见模块化方案： - CommonJS：Node.js 使用的模块化方案，使用 require 和 module.exports。 - ES Modules：ES6 引入的模块化方案，使用 import 和 export。

优点： - 代码复用：提高代码的可重用性。 - 依赖管理：明确模块之间的依赖关系。

8. JavaScript 中的 垃圾回收 是什么？

垃圾回收是 JavaScript 自动管理内存的机制，主要包括： - 标记清除：标记不再使用的对象并清除。 - 引用计数：记录对象的引用次数，当引用次数为 0 时清除。

优点： - 自动管理：减少内存泄漏的风险。 - 提高效率：开发者无需手动管理内存。

9. JavaScript 中的 深拷贝 和 浅拷贝 有什么区别？

• 浅拷贝：只复制对象的引用，不复制对象本身。
• 深拷贝：复制对象及其所有嵌套对象。

示例：

const obj = { a: 1, b: { c: 2 } };

// 浅拷贝
const shallowCopy = { ...obj };
shallowCopy.b.c = 3;
console.log(obj.b.c); // 输出 3

// 深拷贝
const deepCopy = JSON.parse(JSON.stringify(obj));
deepCopy.b.c = 4;
console.log(obj.b.c); // 输出 3

区别： - 浅拷贝只复制一层，深拷贝复制所有层。

10. JavaScript 中的 防抖 和 节流 有什么区别？

• 防抖：在事件触发后等待一段时间再执行，如果在这段时间内再次触发事件，则重新计时。
• 节流：在事件触发后立即执行，但在指定的时间间隔内只执行一次。

示例：

// 防抖
function debounce(fn, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, arguments), delay);
  };
}

// 节流
function throttle(fn, delay) {
  let lastTime = 0;
  return function() {
    const now = Date.now();
    if (now - lastTime >= delay) {
      fn.apply(this, arguments);
      lastTime = now;
    }
  };
}

区别： - 防抖适合处理频繁触发的事件，如输入框输入。 - 节流适合处理连续触发的事件，如滚动事件。

前端框架

1. React 中的 虚拟 DOM 是什么？

虚拟 DOM 是 React 用于提高性能的一种机制，通过将真实的 DOM 抽象为 JavaScript 对象，减少直接操作 DOM 的次数。

优点： - 提高性能：减少 DOM 操作的次数。 - 跨平台：可以在不同的平台上使用相同的虚拟 DOM。

2. React 中的 组件生命周期 有哪些？

React 组件的生命周期主要包括以下几个阶段： - 挂载阶段：componentDidMount - 更新阶段：componentDidUpdate - 卸载阶段：componentWillUnmount

注意：React 16.3 引入了新的生命周期方法，如 getDerivedStateFromProps 和 getSnapshotBeforeUpdate。

3. React 中的 Hooks 是什么？

Hooks 是 React 16.8 引入的新特性，允许在函数组件中使用状态和生命周期方法。

常见 Hooks： - useState：用于管理状态。 - useEffect：用于处理副作用。 - useContext：用于访问上下文。 - useReducer：用于管理复杂状态。

优点： - 简化代码：减少类组件的使用。 - 提高可读性：使代码更易于理解和维护。

4. Vue 中的 响应式原理 是什么？

Vue 的响应式原理是通过 Object.defineProperty 或 Proxy 监听对象属性的变化，并在变化时更新视图。

优点： - 自动更新：减少手动操作 DOM 的次数。 - 提高性能：通过虚拟 DOM 减少不必要的更新