移动门户前端工程师面试题集.docxVIP

第PAGE页共NUMPAGES页

2026年移动门户前端工程师面试题集

一、基础知识（共5题，每题8分，总分40分）

1.题目：简述HTML5中`video`和`audio`标签的主要属性及其用途，并说明如何实现视频的自动播放和循环播放。

答案：`video`和`audio`标签是HTML5新增的多媒体标签，支持原生视频和音频播放。

主要属性：

-`src`：指定媒体文件的路径。

-`controls`：显示播放控件（播放、暂停、音量等）。

-`autoplay`：页面加载后自动播放。

-`loop`：循环播放。

-`muted`：静音播放。

-`preload`：设置预加载行为（`auto`、`metadata`、`none`）。

实现自动播放和循环：

html

videosrc=movie.mp4autoplayloopcontrols/video

解析：自动播放需`autoplay`属性，循环播放需`loop`属性。注意部分浏览器可能限制自动播放（需用户交互触发）。

2.题目：解释CSS中的盒模型（BoxModel）及其组成部分，并说明`box-sizing:border-box`的作用。

答案：盒模型包含：`content`（内容）、`padding`（内边距）、`border`（边框）、`margin`（外边距）。默认情况下，宽高仅指`content`。

`box-sizing:border-box`作用：使宽高包含`padding`和`border`，避免布局计算误差。

css

box-sizing:border-box;/宽高含padding和border/

解析：传统盒模型（`content-box`）易导致嵌套元素错位，`border-box`更符合直觉。

3.题目：比较CSSFlexbox和Grid布局的适用场景，并举例说明如何用Flexbox实现水平垂直居中。

答案：

适用场景：

-Flexbox：一维布局（行或列），适合导航栏、卡片列表等。

-Grid：二维布局（行+列），适合页整体布局。

Flexbox垂直居中：

css

.container{

display:flex;

align-items:center;/垂直居中/

justify-content:center;/水平居中/

}

解析：Flexbox适合组件级布局，Grid适合整体架构，两者可结合使用。

4.题目：解释JavaScript中的闭包（Closure）及其典型应用场景。

答案：闭包是函数及其词法环境的组合，允许函数访问外部作用域变量。

应用场景：

-模块化：封装私有变量（如计数器）。

-事件处理：保留上下文（如点击事件回调）。

javascript

functioncreateCounter(){

letcount=0;

returnfunction(){count++;returncount;};

}

constcounter=createCounter();//每次调用返回递增值

解析：闭包避免全局污染，但需注意内存泄漏问题。

5.题目：简述异步编程的三种模式（回调、Promise、Async/Await）及其演进关系。

答案：

-回调：简单但易形成回调地狱（`setTimeout(fn)()`）。

-Promise：用`then`链式处理，支持`Promise.all`等。

-Async/Await：基于Promise语法糖，代码更同步。

javascript

asyncfunctionfetchData(){

constres=awaitfetch(api.json);

returnres.json();

}

解析：Async/Await是Promise的优化，提升可读性。

二、前端框架（共5题，每题10分，总分50分）

1.题目：比较React和Vue的组件状态管理方式（如State、Props、Lifecycle），并说明ReactHooks的必要性。

答案：

React：

-`State`：组件内部状态（`useState`）。

-`Props`：父传子单向传递。

-`Lifecycle`：`componentDidMount`等（`useEffect`）。

Vue：

-`data`：响应式状态。

-`Props`：同React。

-`Lifecycle`：`mounted`等（`onMounted`）。

ReactHooks必要性：

-解决类组件混用问题。

-代码解耦（如`useContext`替代`HOC`）。

jsx

constCounter=(