当前位置：首页 > article >正文

【每日前端面试题-01】

article 2025/2/26 20:00:51

html/css

如何实现一个自适应的网页布局，能适配不同屏幕尺寸和分辨率？请描述几种常见的技术手段和思路。
- 使用媒体查询（Media Queries）：通过在 CSS 中定义不同屏幕尺寸下的样式规则，例如：
```
/* 当屏幕宽度小于600px时，应用以下样式 */
@media (max - width: 600px) {
    body {
        font - size: 14px;
    }
}
```
- 弹性盒模型（Flexbox）：可以方便地实现元素的排列和对齐，并且能够自适应容器大小。例如，设置一个容器为弹性盒，并让子元素自动分配空间：
```
.container {
	    display: flex;
	    justify - content: space - between;
	}
```
- 网格布局（Grid Layout）：更适合复杂的二维布局，能够精确控制元素在网格中的位置和大小，并且具备良好的响应式特性。
```
.container {
    display: grid;
    grid - template - columns: repeat(auto - fit, minmax(200px, 1fr));
}
```
- 使用相对单位：如百分比（%）、em、rem 等。百分比可以基于父元素的尺寸进行相对设置，em 和 rem 则基于字体大小进行缩放，有助于实现自适应。例如，设置元素宽度为父元素的 50%：
```
.element {
    width: 50%;
}
```
讲一讲 CSS 的盒模型，标准盒模型和 IE 盒模型有什么区别？在实际开发中如何进行兼容处理？
- 标准盒模型：元素的宽度（width）和高度（height）仅包含内容区域，不包括边框（border）和内边距（padding）。总宽度 = width + border - left + border - right + padding - left + padding - right。
- IE 盒模型：元素的宽度（width）和高度（height）包含内容区域、边框和内边距。总宽度 = width（包含 border 和 padding）。
- 兼容处理：在 CSS 中，可以通过box - sizing属性来指定盒模型。box - sizing: content - box表示标准盒模型（默认值），box - sizing: border - box表示 IE 盒模型。为了兼容不同浏览器并确保布局一致性，可以在全局样式中设置：
```
* {
    box - sizing: border - box;
}
```

JavaScript

解释一下 JavaScript 的事件循环机制，它是如何处理异步操作的？
- JavaScript 是单线程语言，事件循环机制是其实现异步操作的关键。事件循环基于任务队列（task queue）和调用栈（call stack）工作。
- 当 JavaScript 代码执行时，同步任务会依次进入调用栈并执行。当遇到异步任务（如定时器setTimeout、setInterval，Promise 等）时，这些异步任务会被交给对应的 Web API（如浏览器提供的定时器模块、Promise 处理模块等）处理。
- 当异步任务完成（例如定时器时间到，Promise 状态改变），相关的回调函数会被放入任务队列中。
- 调用栈中的同步任务执行完毕后，事件循环会检查任务队列。如果任务队列中有任务，就将其取出放入调用栈中执行。这个过程不断重复，从而实现了异步操作的顺序执行，避免了阻塞主线程，保证了页面的响应性。
- 描述 JavaScript 中闭包的概念、作用及可能带来的问题。
  - 概念：闭包是指有权访问另一个函数作用域中变量的函数。当一个函数内部定义了另一个函数，并且内部函数引用了外部函数的变量，那么内部函数和它所引用的变量就构成了闭包。
  - 作用：
    数据封装和私有化：通过闭包可以将一些变量和函数封装在一个作用域内，外部无法直接访问，实现类似面向对象编程中的私有成员。例如：
```
function outer() {
    let privateVariable = 10;
    function inner() {
        console.log(privateVariable);
    }
    return inner;
}
let closureFunction = outer();
closureFunction(); // 输出10，外部无法直接访问privateVariable
```
  - 保持变量状态：闭包可以保持外部函数中变量的状态，即使外部函数已经执行完毕。例如，在一个计数器函数中：
```
function counter() {
    let count = 0;
    return function() {
        return ++count;
    };
}
let myCounter = counter();
console.log(myCounter()); // 输出1
console.log(myCounter()); // 输出2
```
  - 可能带来的问题：
    - 内存泄漏：由于闭包会保持对外部函数变量的引用，如果闭包使用不当，导致这些变量无法被垃圾回收机制回收，就会造成内存泄漏。例如，在一个循环中创建大量闭包，并且这些闭包都引用了循环中的变量，可能会导致内存占用不断增加。
    - 变量混淆：因为闭包可以访问多个作用域的变量，可能会出现变量名冲突或混淆的情况，导致代码难以理解和维护。
在 Vue 或 React 项目中，如何进行性能优化？比如对于大型列表的渲染，有哪些优化策略？
- 使用虚拟列表（Virtual List）：对于大型列表，只渲染当前可见区域的列表项，而不是全部渲染。可以使用vue - virtual - scroll - list等库来实现。
- 减少不必要的响应式数据：避免将一些不需要响应式更新的数据定义为响应式变量，使用Object.freeze来冻结数据，提高性能。
- 优化组件渲染：通过shouldComponentUpdate或computed属性来控制组件的重新渲染，避免不必要的更新。
- 代码拆分（Code Splitting）：将大的 JavaScript 文件拆分成多个小文件，按需加载，减少初始加载时间。可以使用 Webpack 的dynamic import()语法实现。
React 项目：
- 使用 React.memo 和 useMemo/useCallback：React.memo用于函数组件的浅比较，避免不必要的渲染。useMemo和useCallback用于缓存值和函数，防止在组件重新渲染时不必要的计算和函数创建。
- 虚拟列表（Virtualized List）：类似 Vue 的虚拟列表，使用react - virtualized或react - window等库来高效渲染大型列表。
- 优化渲染逻辑：合理使用shouldComponentUpdate（类组件）或React.memo（函数组件），减少不必要的重绘。
- 懒加载（Lazy Loading）：通过React.lazy和Suspense实现组件的懒加载，提高页面加载速度。
谈谈你对 Vue 的响应式原理或 React 的调和算法的理解。
- Vue 的响应式原理：Vue 通过Object.defineProperty()方法来劫持对象属性的访问和修改操作。在数据初始化时，Vue 会遍历数据对象的属性，使用Object.defineProperty()将其转换为响应式数据。当数据被访问时，会触发getter方法，用于依赖收集（收集哪些地方使用了该数据）；当数据被修改时，会触发setter方法，通知相关的依赖（如使用该数据的组件）进行更新。Vue 还使用了发布 - 订阅模式，将数据的变化和视图的更新解耦。
- React 的调和算法：React 的调和算法主要用于决定在状态更新后，如何高效地更新 DOM。它通过对比前后两次虚拟 DOM 树的差异，找出最小的变化集，然后只更新实际 DOM 中发生变化的部分，而不是重新渲染整个页面。React 在调和过程中采用了一些启发式算法，如逐层比较、同级比较等，以减少比较的次数和复杂度。例如，对于同一层级的节点，React 会尽量复用旧节点，只有当节点类型或属性发生变化时才进行替换或更新，从而提高了更新效率。

项目经验

请分享一个你认为最能体现你技术水平的前端项目，你在其中承担了什么角色，遇到了哪些技术挑战，是如何解决的？
- 项目描述：我参与的一个电商平台项目，负责前端页面的开发与优化。该平台具有复杂的商品展示、购物车、订单流程等功能，且需要支持多端适配。
- 承担角色：作为前端核心开发人员，负责主导前端架构设计、组件开发以及性能优化工作。
- 技术挑战及解决方法：
  - 性能问题：首页商品列表数据量大，导致页面加载缓慢。通过使用虚拟列表技术，只渲染可见区域的商品项，大大减少了 DOM 元素数量，提高了页面渲染速度。同时，对图片进行优化，采用 WebP 格式并设置合适的图片尺寸，进一步降低了页面加载时间。
  - 多端适配：为了确保在 PC、平板、手机等不同设备上的良好体验，采用了响应式设计，结合媒体查询和弹性布局技术，使页面能够自适应不同屏幕尺寸。对于一些特定设备的兼容性问题，如某些手机浏览器对 CSS 属性的支持差异，通过使用 CSS 前缀和 polyfill 库进行兼容处理。
  - 购物车实时同步：实现购物车在不同页面和设备之间的实时同步是一个挑战。通过使用 WebSocket 技术，建立前端与后端的实时通信通道，当购物车数据发生变化时（如添加商品、修改数量、删除商品），前端立即将变化发送到后端，并通过 WebSocket 通知其他设备上的同一用户，实现购物车数据的实时更新。
在过往项目中，你有没有通过前端技术优化，显著提升了项目的性能或用户体验？具体是怎么做的？
- 在一个企业内部管理系统项目中，通过以下前端技术优化提升了性能和用户体验：
  1. 代码拆分与懒加载：项目中的 JavaScript 代码体积较大，导致初始加载时间长。使用 Webpack 的代码拆分功能，将业务代码按路由和功能模块拆分成多个小文件，在页面加载时，只加载当前页面所需的代码，其他代码在需要时通过懒加载的方式加载。例如，对于一些不常用的报表页面，其相关的 JavaScript 代码在用户点击进入报表页面时才进行加载，大大减少了首页的加载时间。
  2. 缓存优化：对于一些频繁访问且数据更新不频繁的接口数据，在前端实现了本地缓存。使用localStorage和sessionStorage存储接口返回的数据，在下次请求相同数据时，先检查缓存中是否存在，如果存在且未过期，则直接使用缓存数据，避免了重复的网络请求，提高了页面响应速度。同时，设置了合理的缓存过期时间，以确保数据的及时性。
  3. 动画与交互优化：为了提升用户体验，对页面中的一些交互元素添加了动画效果。例如，在表单提交时，通过 CSS 动画显示一个加载指示器，让用户知道操作正在进行中，避免了用户重复点击提交按钮。在页面切换时，使用了过渡动画，使页面切换更加流畅自然，提升了用户的操作感受。

团队协作

在与后端开发人员、设计师等其他团队成员协作时，你遇到过哪些沟通或协作上的问题？是如何解决的？
- 与后端开发人员协作问题及解决方法：
  - 接口定义不一致：在前后端联调过程中，发现接口返回的数据格式与前端预期不一致。通过组织前后端开发人员共同参与接口设计会议，明确接口的输入输出参数、数据格式以及错误处理机制。在接口开发完成后，使用接口文档工具（如 Swagger）进行接口文档的编写和维护，确保双方对接口定义的理解一致。
  - 开发进度不一致：后端接口开发进度滞后，影响前端开发进度。建立了每日站会制度，前后端开发人员每天早上花 15 - 30 分钟沟通各自的开发进度、遇到的问题以及需要对方协助的事项。通过及时沟通，提前发现进度风险，并对开发计划进行调整。例如，前端可以先使用模拟数据进行开发，待后端接口完成后再进行联调替换。
- 与设计师协作问题及解决方法：
  - 视觉还原差异：前端开发实现的页面效果与设计师提供的设计稿存在一定差异。在项目开始前，与设计师沟通确定视觉设计规范，包括字体、颜色、间距、按钮样式等，并将这些规范整理成文档供前端开发人员参考。在开发过程中，前端开发人员及时与设计师沟通，对于不确定的视觉效果，通过截图或实时演示的方式进行确认。同时，使用一些工具（如 Sketch Measure、PxCook 等）来精确获取设计稿中的尺寸和样式信息，提高视觉还原度。
  - 设计变更沟通不及时：在项目开发过程中，设计师对部分页面设计进行了变更，但未及时通知前端开发人员。建立了设计变更管理流程，设计师在进行设计变更时，需填写变更申请表，说明变更原因、变更内容以及影响范围，并及时通知前端开发人员。同时，在项目管理工具（如 Trello、Jira）中创建相关任务，跟踪设计变更的实施情况，确保前端开发能够及时响应设计变更。
请描述一次在项目中需要协调多个前端开发人员共同完成任务的经历，你是如何进行任务分配和进度管理的？
- 在一个大型电商促销活动页面开发项目中，需要协调 5 名前端开发人员共同完成任务。
- 任务分配：
  1. 首先，对整个项目进行任务拆解，将页面划分为多个功能模块，如首页轮播图、商品分类导航、商品列表、促销活动专区、购物车模块等。
  2. 根据每个开发人员的技术专长和经验进行任务分配。例如，将对动画效果要求较高的首页轮播图模块分配给擅长 CSS 动画的开发人员；将涉及复杂业务逻辑的购物车模块分配给经验丰富、对业务理解深入的开发人员。同时，确保每个开发人员的任务量相对均衡，避免出现任务过重或过轻的情况。
  3. 为每个任务制定详细的任务说明，包括功能需求、技术要求、时间节点以及与其他模块的接口约定等，并将任务分配情况在项目管理工具中进行明确记录，方便大家查看和跟踪。
进度管理：
- 建立每日站会制度，每天早上组织前端开发团队进行站会，每个开发人员汇报前一天的工作进展、遇到的问题以及当天的工作计划。通过站会，及时了解项目整体进度，发现并解决开发过程中遇到的问题。
- 使用项目管理工具（如 Trello）对任务进度进行可视化管理。将每个任务创建为一个卡片，根据任务的完成状态（如待开发、开发中、已完成、待测试等）移动卡片在看板上的位置。通过看板，团队成员可以直观地看到项目的整体进度和每个任务的状态。
- 定期进行代码审查，每完成一个功能模块或一定阶段的开发任务，组织团队成员进行代码审查。通过代码审查，不仅可以保证代码质量，还可以及时发现代码中存在的问题和潜在的风险，避免问题积累到后期难以解决。同时，代码审查也是一个技术交流和分享的过程，有助于提升团队整体技术水平。
- 根据项目进度和实际情况，灵活调整任务计划。如果某个任务因为一些原因（如技术难题、需求变更等）导致进度滞后，及时组织团队成员进行讨论，分析原因，调整后续任务的优先级和时间安排，确保项目能够按时交付。

性能优化

一个页面加载时间过长，你会从哪些方面去分析和优化？
- 网络请求方面：
  1. 使用浏览器的开发者工具（如 Chrome DevTools）的 Network 面板，分析页面加载过程中的网络请求。查看哪些请求耗时较长，是否存在不必要的请求（如重复请求、未使用的资源请求等）。对于不必要的请求，进行代码审查，找出并删除相关代码。
  2. 检查资源加载顺序，确保关键资源（如 CSS、JavaScript 文件，首屏图片等）优先加载。可以通过将 CSS 文件放在标签内尽早加载，避免页面出现无样式闪烁（FOUC）现象；对于非关键的 JavaScript 文件，使用async或defer属性进行异步加载，防止阻塞页面渲染。
  3. 优化图片资源，采用合适的图片格式（如 WebP 格式，其在保证图片质量的同时，文件体积更小），并根据实际显示尺寸对图片进行裁剪和压缩，减少图片加载时间。
- 代码优化方面：
  1. 分析 JavaScript 代码，检查是否存在复杂的计算或死循环导致主线程阻塞。对于耗时较长的计算任务，可以考虑使用 Web Workers 将其放到后台线程执行，避免影响页面的响应性。
  2. 进行代码拆分，将大的 JavaScript 文件拆分成多个小文件，按需加载。例如，使用 Webpack 的dynamic import()语法实现路由组件的懒加载，减少初始加载的代码量。
  3. 优化 CSS 代码，减少不必要的选择器嵌套和复杂的样式规则，提高 CSS 解析速度。同时，合并重复的 CSS 样式，减小 CSS 文件体积。
- 服务器方面：
  1. 检查服务器响应时间，是否存在服务器性能瓶颈。可以通过监控服务器的 CPU、内存、磁盘 I/O 等指标来判断。如果服务器性能不足，可以考虑升级服务器硬件或进行服务器端代码优化。
  2. 启用服务器端缓存，如 HTTP 缓存（设置合适的Cache - Control和Expires头信息），对于不经常更新的静态资源（如 CSS、JavaScript 文件、图片等），浏览器可以直接从缓存中读取，减少服务器请求次数。
- 页面渲染方面：
  - 分析页面的 DOM 结构，是否存在过多的嵌套或不必要的 DOM 元素。简化 DOM