GuluWater

面试题汇总

关于面试题

1. HTML 相关问题

1.1. HTML5 新增了哪些标签？

答案： HTML5 引入了一些新的语义标签，帮助开发者更好地组织页面内容。常见的新增标签包括：

<header>：定义文档头部，包含网站的导航、logo、标题等。
<footer>：定义文档或某部分的底部，包含版权信息、联系方式等。
<article>：表示页面中独立的内容块，适合展示文章、博客等。
<section>：用于分组页面的不同部分，可以包含标题和内容。
<nav>：定义导航链接。
<aside>：表示与主要内容关联性较小的内容（侧边栏等）。
<figure> 和 <figcaption>：用于插入图像及其描述。

1.2. 什么是语义化 HTML？

答案： 语义化 HTML 是指使用能表达内容含义的标签而不是使用通用标签（如 <div> 和 <span>）。语义化的 HTML 有助于 SEO 优化、提高可访问性以及更好的代码可维护性。例如，使用 <header>、<article>、<footer> 等标签代替 <div>，使得页面结构更加清晰和有意义。

1.3. 如何实现页面的多语言支持？

答案： 多语言支持可以通过以下几种方法实现：

使用

lang

属性指定页面的语言：

html


复制编辑
<html lang="en">

为不同语言创建不同的页面或内容，根据用户的语言设置加载相应的内容。
使用 JavaScript 和 JSON 文件，动态加载不同语言的文本。

1. HTML5 中的新特性有哪些？

答案： HTML5 引入了许多新的特性和元素，这些改进不仅改善了 Web 应用的功能，还使得页面更加语义化、可访问性更强。常见的新特性包括：

新元素
：
- <header>、<footer>、<article>、<section>、<nav>、<aside>、<figure>、<figcaption> 等，增强了文档的语义化。
表单控件
：
- 新增了 <input> 类型（如 email、date、url、range 等）。
- 新增了 <datalist>、<keygen> 和 <output> 元素。
本地存储
：
- localStorage 和 sessionStorage 提供了浏览器端的本地存储能力。
多媒体支持
：
- <audio> 和 <video> 标签允许直接嵌入音频和视频。
Canvas 和 SVG
：
- <canvas> 标签允许动态渲染图形，支持游戏开发等。
- <svg> 支持矢量图形，适合高质量的图形展示。
拖放API
：
- HTML5 支持拖放功能，用户可以直接拖拽元素到页面上的指定位置。

2. 如何保证页面对屏幕阅读器友好（提高可访问性）？

答案： 确保页面对屏幕阅读器友好可以通过以下几种方式：

使用语义化标签：使用适当的 HTML 元素（如 <header>、<article>、<nav> 等）来增强页面的结构化，使得屏幕阅读器能更好地识别。
为表单元素添加标签
：为每个表单控件提供
```
<label>
```
标签，并且通过
```
for
```
属性绑定到相应的输入框。
```
html复制编辑<label for="name">Name</label>
<input type="text" id="name" name="name">
```
提供可访问的图片替代文本
：通过
```
alt
```
属性为每个
```
<img>
```
标签提供描述性的文本。
```
html


复制编辑
<img src="logo.png" alt="Company Logo">
```
合理使用 ARIA（无障碍富互联网应用）
：ARIA 属性（如
```
aria-label
```
、
```
aria-hidden
```
等）可帮助改善可访问性。
```
html


复制编辑
<button aria-label="Close" onclick="closeWindow()">X</button>
```

3. HTML 中如何实现图片懒加载（Lazy Loading）？

答案： 在 HTML 中，可以通过 loading="lazy" 属性来实现图片的懒加载，即图片只有在用户滚动到该图片的位置时才会加载。

html


复制编辑
<img src="image.jpg" alt="Description" loading="lazy">

这个特性目前在大多数现代浏览器中都被支持，可以有效减少初次加载时的网络请求，提升页面加载性能。

4. 什么是 HTML5 中的 `web worker`？

答案： Web Worker 是 HTML5 提供的一项功能，允许将一些耗时的 JavaScript 代码运行在浏览器的后台线程中，从而避免阻塞 UI 渲染。它可以让 Web 应用执行多任务操作，比如复杂的计算、数据处理等，而不影响页面的响应速度。

javascript复制编辑// 主线程
const worker = new Worker('worker.js');
worker.postMessage('Hello Worker');

// worker.js
self.onmessage = function(event) {
  console.log('Received from main thread:', event.data);
  self.postMessage('Hello from Worker');
};

5. HTML 中的 `<meta>` 标签有何作用？

答案： <meta> 标签在 HTML 文档的 <head> 部分提供了关于页面的元数据。常见用途包括：

设置字符编码

：

html


复制编辑
<meta charset="UTF-8">

页面描述和关键字

（用于 SEO 优化）：

html复制编辑<meta name="description" content="This is a sample webpage.">
<meta name="keywords" content="HTML, CSS, JavaScript">

视口设置（响应式设计）

：

html


复制编辑
<meta name="viewport" content="width=device-width, initial-scale=1.0">

防止网页被缓存

：

html


复制编辑
<meta http-equiv="Cache-Control" content="no-store">

6. **什么是 `data-\*` 属性，如何使用？**

答案： data-* 属性允许在 HTML 元素中存储自定义数据。它们可以存储页面上不需要显示但需要在 JavaScript 中使用的数据。自定义属性名必须以 data- 开头。

html复制编辑<div id="product" data-id="12345" data-name="Laptop">
  <!-- This div stores the product information -->
</div>

<script>
  const product = document.getElementById('product');
  const id = product.dataset.id; // '12345'
  const name = product.dataset.name; // 'Laptop'
</script>

7. 如何在 HTML 中实现表单验证？

答案： HTML5 提供了很多内置的表单验证功能，通过使用不同的 input 类型和属性，能够轻松实现客户端验证。常见的表单验证包括：

必填字段

：通过

required

属性强制用户填写该字段。

html


复制编辑
<input type="text" required>

输入类型验证

：

html复制编辑<input type="email" required>
<input type="url" required>

正则表达式验证

：

html


复制编辑
<input type="text" pattern="[A-Za-z]{3,}">

8. HTML 中的 `iframe` 标签如何使用？

答案： <iframe> 标签用于在当前页面中嵌入一个子页面。常见的用途包括嵌入视频、广告、其他网站等。

html


复制编辑
<iframe src="https://www.example.com" width="600" height="400"></iframe>

注意： 使用 iframe 时要注意安全性，避免通过嵌入不信任的内容导致跨站脚本攻击（XSS）。

9. HTML 中的 `<link>` 和 `<script>` 标签有什么区别？

答案：

<link>
：通常用于引入外部资源，如 CSS 文件。
```
<link>
```
标签是在页面头部加载的。
```
html


复制编辑
<link rel="stylesheet" href="styles.css">
```
<script>
：用于引入 JavaScript 文件。
```
<script>
```
标签通常位于页面底部（为了避免阻塞渲染）或
```
<head>
```
部分。
```
html


复制编辑
<script src="script.js"></script>
```

10. HTML 中的 `optgroup` 标签有何作用？

答案： <optgroup> 标签用于在 <select> 下拉框中创建分组，以便组织选项。它将多个 <option> 元素分为一组，增强可读性和用户体验。

html复制编辑<select>
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="carrot">Carrot</option>
    <option value="spinach">Spinach</option>
  </optgroup>
</select>

2. CSS 相关问题

2.1. 解释 CSS 盒模型？

答案： CSS 盒模型描述了一个元素的布局组成部分，通常由以下部分构成：

Content：内容区域，元素的实际显示内容。
Padding：内边距，位于内容和边框之间。
Border：边框，围绕元素的内边距区域。
Margin：外边距，位于元素的边框之外，用于控制元素之间的间距。

2.2. 什么是 Flexbox？如何实现水平垂直居中？

答案： Flexbox（弹性盒布局）是 CSS3 新增的一种布局方式，可以非常方便地实现元素的对齐和分布。

水平居中：

css复制编辑.container {
  display: flex;
  justify-content: center;
}

垂直居中：

css复制编辑.container {
  display: flex;
  align-items: center;
}

2.3. 如何解决浏览器兼容性问题？

答案：

使用 CSS 前缀（如 -webkit-、-moz-）来确保兼容性。
使用 CSS Reset 或 Normalize.css 来消除浏览器默认样式的差异。
利用 Autoprefixer 自动添加前缀。
采用现代的 HTML5 和 CSS3 特性时，确保使用了 Polyfill 来支持旧版本浏览器。

2.4. 什么是 CSS 动画与过渡？有何区别？

答案：

CSS 动画（@keyframes）：可以在一段时间内改变元素的样式，支持复杂的多阶段动画。

css复制编辑@keyframes move {
  0% { left: 0; }
  100% { left: 100px; }
}
.box {
  animation: move 2s infinite;
}

CSS 过渡（transition）：用于在某个样式变化时提供平滑的过渡效果。

css复制编辑.box {
  transition: all 0.3s ease;
}
.box:hover {
  background-color: red;
}

3. JavaScript 相关问题

3.1. 什么是闭包？举个例子。

答案： 闭包是 JavaScript 中一个函数和其引用的外部变量的组合。闭包可以让函数“记住”并访问外部函数的作用域，即使外部函数已经执行完毕。

javascript复制编辑function outer() {
  let count = 0;
  return function inner() {
    count++;
    console.log(count);
  };
}
const counter = outer();
counter(); // 1
counter(); // 2

3.2. 解释 `this` 的指向问题。

答案： this 的指向是由函数的调用方式决定的：

在普通函数中，this 指向全局对象（浏览器中是 window）。
在对象的方法中，this 指向该对象。
在构造函数中，this 指向新创建的对象。
使用 call、apply 或 bind 时，可以显式指定 this。

3.3. 事件冒泡与事件捕获有什么区别？

答案：

事件冒泡：事件从目标元素向父元素传播，直到根元素。
事件捕获：事件从根元素向目标元素传播。可以通过 addEventListener 的第三个参数来控制是否使用捕获阶段（默认是冒泡阶段）。

4. Vue.js 相关问题

4.1. Vue.js 是如何实现双向数据绑定的？

答案： Vue.js 使用了数据劫持技术，结合发布-订阅模式（Observer + Dep）实现双向数据绑定。Vue 通过 Object.defineProperty 或 Vue 3 中的 Proxy 监听数据的变化，当数据发生变化时，视图会自动更新。

4.2. Vue 中的生命周期钩子函数有哪些？

答案：

beforeCreate：实例初始化之前。
created：实例创建完成后，数据已被设置。
beforeMount：挂载开始之前。
mounted：挂载完成。
beforeUpdate：数据更新之前。
updated：数据更新完成后。
beforeDestroy：实例销毁之前。
destroyed：实例销毁后。

5. React.js 相关问题

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

答案： 虚拟 DOM 是 React 的核心技术之一，它是 JavaScript 对象，表示实际 DOM 的结构。React 会先更新虚拟 DOM，然后与旧的虚拟 DOM 比较，计算出最小的差异，再将更新应用到实际 DOM，从而提高性能。

5.2. React 中的 `useEffect` 是什么？

答案： useEffect 是 React 的一个 Hook，用于在函数组件中执行副作用操作，如数据获取、订阅、DOM 操作等。useEffect 会在每次渲染后执行，并且可以指定依赖数组来控制副作用的执行时机。

javascript复制编辑useEffect(() => {
  console.log('Component mounted or updated');
}, []);

5.3. React 中的 `setState` 是如何工作的？

答案： setState 是 React 中更新组件状态的核心方法。当调用 setState 时，React 会合并新的状态并触发重新渲染。setState 是异步执行的，因此可以传入回调函数来确保在状态更新后执行其他操作。

6. 性能优化相关问题

6.1. 如何优化前端性能？

答案：

图片优化：使用合适格式的图片，如 WebP，减少图片大小。
懒加载：对于非关键资源（如图片、视频）使用懒加载。
代码拆分：通过 Webpack 或其他构建工具进行代码拆分，按需加载。
缓存优化：通过服务端设置合适的缓存头，减少重复请求。
减少 DOM 操作：尽量减少重绘和回流，优化页面的渲染性能。

6.2. 什么是长任务？如何避免它？

答案： 长任务是指需要长时间才能完成的 JavaScript 执行任务，它会导致页面卡顿。为了避免长任务，可以将大任务拆分为多个小任务，利用 setTimeout 或 requestIdleCallback 来在浏览器空闲时执行任务，从而避免长时间占用主线程。

7. 浏览器相关问题

7.1. 什么是 CORS（跨域资源共享）？

答案： CORS 是一种机制，它允许浏览器向跨域的服务器请求资源。通过设置 Access-Control-Allow-Origin 头，服务器

面试题 汇总 ​

1. HTML 相关问题 ​

1.1. HTML5 新增了哪些标签？ ​

1.2. 什么是语义化 HTML？ ​

1.3. 如何实现页面的多语言支持？ ​

1. HTML5 中的新特性有哪些？ ​

2. 如何保证页面对屏幕阅读器友好（提高可访问性）？ ​

3. HTML 中如何实现图片懒加载（Lazy Loading）？ ​

4. 什么是 HTML5 中的 web worker？ ​

5. HTML 中的 <meta> 标签有何作用？ ​

6. 什么是 data-\* 属性，如何使用？ ​

7. 如何在 HTML 中实现表单验证？ ​

8. HTML 中的 iframe 标签如何使用？ ​

9. HTML 中的 <link> 和 <script> 标签有什么区别？ ​

10. HTML 中的 optgroup 标签有何作用？ ​

2. CSS 相关问题 ​

2.1. 解释 CSS 盒模型？ ​

2.2. 什么是 Flexbox？如何实现水平垂直居中？ ​

2.3. 如何解决浏览器兼容性问题？ ​

2.4. 什么是 CSS 动画与过渡？有何区别？ ​

3. JavaScript 相关问题 ​

3.1. 什么是闭包？举个例子。 ​

3.2. 解释 this 的指向问题。 ​

3.3. 事件冒泡与事件捕获有什么区别？ ​

4. Vue.js 相关问题 ​

4.1. Vue.js 是如何实现双向数据绑定的？ ​

4.2. Vue 中的生命周期钩子函数有哪些？ ​

5. React.js 相关问题 ​

5.1. React 中的虚拟 DOM 是什么？ ​

5.2. React 中的 useEffect 是什么？ ​

5.3. React 中的 setState 是如何工作的？ ​

6. 性能优化相关问题 ​

6.1. 如何优化前端性能？ ​

6.2. 什么是长任务？如何避免它？ ​

7. 浏览器相关问题 ​

7.1. 什么是 CORS（跨域资源共享）？ ​

面试题汇总

1. HTML 相关问题

1.1. HTML5 新增了哪些标签？

1.2. 什么是语义化 HTML？

1.3. 如何实现页面的多语言支持？

1. HTML5 中的新特性有哪些？

2. 如何保证页面对屏幕阅读器友好（提高可访问性）？

3. HTML 中如何实现图片懒加载（Lazy Loading）？

4. 什么是 HTML5 中的 `web worker`？

5. HTML 中的 `<meta>` 标签有何作用？

6. **什么是 `data-\*` 属性，如何使用？**

7. 如何在 HTML 中实现表单验证？

8. HTML 中的 `iframe` 标签如何使用？

9. HTML 中的 `<link>` 和 `<script>` 标签有什么区别？

10. HTML 中的 `optgroup` 标签有何作用？

2. CSS 相关问题

2.1. 解释 CSS 盒模型？

2.2. 什么是 Flexbox？如何实现水平垂直居中？

2.3. 如何解决浏览器兼容性问题？

2.4. 什么是 CSS 动画与过渡？有何区别？

3. JavaScript 相关问题

3.1. 什么是闭包？举个例子。

3.2. 解释 `this` 的指向问题。

3.3. 事件冒泡与事件捕获有什么区别？

4. Vue.js 相关问题

4.1. Vue.js 是如何实现双向数据绑定的？

4.2. Vue 中的生命周期钩子函数有哪些？

5. React.js 相关问题

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

5.2. React 中的 `useEffect` 是什么？

5.3. React 中的 `setState` 是如何工作的？

6. 性能优化相关问题

6.1. 如何优化前端性能？

6.2. 什么是长任务？如何避免它？

7. 浏览器相关问题

7.1. 什么是 CORS（跨域资源共享）？