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

前端面试笔试题目（一）

article 2026/5/10 7:22:42

以下模拟了大厂前端面试流程，并给出了涵盖HTML、CSS、JavaScript等基础和进阶知识的前端笔试题目，以帮助你更好地准备面试。

面试流程模拟

1. 自我介绍（5 - 10分钟）：面试官会请你进行简单的自我介绍，包括教育背景、工作经历（实习经历）、项目经验、技术特长等。在自我介绍时，突出与前端开发相关的亮点，如参与过的重要项目、取得的技术成果等。

2. 基础知识考察（15 - 20分钟）：面试官会围绕前端基础技术栈进行提问，包括HTML、CSS、JavaScript的核心概念、特性和应用场景。例如：

• HTML5 新特性有哪些？如何在项目中应用语义化标签？

• CSS 盒模型的理解，如何实现水平垂直居中？

• JavaScript 数据类型有哪些？基本类型和引用类型的区别。

3. 项目经验深挖（20 - 30分钟）：面试官会针对你简历中提及的项目进行深入询问，了解你在项目中的具体职责、遇到的问题及解决方案，考察你的项目实践能力和解决问题的能力。例如：

• 介绍一下你最满意的一个项目，你在其中承担了哪些关键任务？

• 在项目开发过程中，遇到过哪些性能优化的问题？你是如何解决的？

4. 框架与工具考察（15 - 20分钟）：大厂通常会使用流行的前端框架和工具，面试官会考察你对相关框架（如Vue、React、Angular）和构建工具（如Webpack、Gulp）的掌握程度。例如：

• Vue 的响应式原理是什么？如何实现一个自定义指令？

• React 中组件的生命周期有哪些阶段？在不同阶段适合做哪些操作？

• Webpack 的工作原理，如何配置一个基本的Webpack项目？

5. 算法与逻辑思维考察（10 - 15分钟）：通过一些简单的算法题或逻辑题，考察你的编程思维和解决问题的能力。例如：

• 实现一个函数，用于判断一个字符串是否为回文。

• 给定一个数组，找出其中重复出现的元素。

6. 开放性问题（5 - 10分钟）：面试官会提出一些开放性问题，了解你的技术视野、学习能力和团队协作能力。例如：

• 你平时是如何学习前端新技术的？

• 在团队开发中，如何与后端开发人员进行有效的沟通协作？

7. 提问环节（5 - 10分钟）：面试接近尾声时，面试官会给你机会提问，你可以询问关于公司文化、团队架构、工作内容、职业发展等方面的问题。

笔试题目

一、选择题（每题3分，共30分）

1. 以下哪个不是HTML5的语义化标签？（  ）
A. <header>  B. <nav>  C. <article>  D. <span>

2. CSS中设置元素浮动的属性是（  ）
A. display  B. float  C. position  D. clear

3. JavaScript中，以下哪种方式可以获取所有class为“example”的元素？（  ）
A. document.getElementById('example')
B. document.getElementsByClassName('example')
C. document.querySelector('.example')
D. document.querySelectorAll('.example')

4. 以下关于Vue生命周期的说法，错误的是（  ）
A. created钩子函数在组件实例创建完成后立即调用
B. mounted钩子函数在组件挂载到DOM后调用
C. updated钩子函数在组件数据更新时调用，且仅调用一次
D. beforeDestroy钩子函数在组件销毁前调用

5. 在React中，以下哪种方式可以实现组件的状态更新？（  ）
A. 直接修改state对象的属性
B. 使用setState方法
C. 修改props对象的属性
D. 调用render方法

二、简答题（每题10分，共30分）

1. 请简述HTTP和HTTPS的区别。

2. 解释一下JavaScript中的闭包，它有什么用途？请举例说明。

3. 如何优化前端页面的加载速度？请列举至少三种方法。

三、编程题（每题20分，共40分）

1. 使用HTML、CSS和JavaScript实现一个简单的图片轮播效果，要求可以自动播放，并且支持手动点击切换图片。

2. 给定一个数组，数组中包含若干个对象，每个对象都有name和age属性，请编写一个函数，按照age从大到小的顺序对数组进行排序，并返回排序后的数组。示例输入：[{name: 'Alice', age: 25}, {name: 'Bob', age: 30}, {name: 'Charlie', age: 20}]，示例输出：[{name: 'Bob', age: 30}, {name: 'Alice', age: 25}, {name: 'Charlie', age: 20}]。

—————————————————————————

以下继续从基础、进阶、综合应用三个难度层面，为你提供涵盖前端开发不同知识模块的更多题目案例，帮助你全面了解前端面试笔试的出题范围和考察重点。

一、基础题

（一）选择题

1. 在HTML中，用于定义表格标题的标签是（  ）
A. <caption>  B. <head>  C. <title>  D. <thead>

2. CSS属性transform中，scale()函数的作用是（  ）
A. 旋转元素  B. 缩放元素  C. 移动元素  D. 倾斜元素

3. JavaScript中，null和undefined的区别是（  ）
A. null表示一个空对象指针，undefined表示变量声明但未赋值
B. 两者没有区别，可以互换使用
C. null是一个数字类型，undefined是一个字符串类型
D. null表示变量未声明，undefined表示变量声明但未赋值

4. 以下哪个事件在页面DOM加载完成后触发（  ）
A. load  B. DOMContentLoaded  C. resize  D. scroll

5. 关于HTML表单提交，以下说法正确的是（  ）
A. 只能使用GET方法提交表单数据
B. POST方法提交的数据会显示在URL中
C. enctype属性用于指定表单数据的编码方式
D. 表单提交后不能跳转到其他页面

（二）简答题

1. 请简述HTML5中localStorage和sessionStorage的区别及使用场景。

2. 解释CSS中的box-sizing属性，它有哪些取值及各自的作用？

3. 如何在JavaScript中创建一个对象，并为其添加属性和方法？请举例说明。

二、进阶题

（一）选择题

1. 在Vue中，父子组件之间传递数据的方式有（  ）
A. props和$emit  B. v-model  C. ref  D. computed

2. React中，函数组件和类组件的主要区别是（  ）
A. 函数组件不能使用state，类组件可以
B. 类组件性能更好，函数组件性能较差
C. 函数组件没有生命周期，类组件有
D. 函数组件不能接收props，类组件可以

3. Webpack中，loader和plugin的区别是（  ）
A. loader用于处理模块的加载，plugin用于扩展Webpack的功能
B. loader和plugin功能相同，可以互换使用
C. loader是全局的，plugin是局部的
D. loader用于优化代码，plugin用于打包代码

4. 在JavaScript中，Promise的then方法返回的是（  ）
A. 一个新的Promise对象  B. 原始的Promise对象
C. 一个普通的JavaScript对象  D. 一个数组

5. 关于CSS预处理器（如Sass、Less），以下说法错误的是（  ）
A. 可以使用变量、混合（mixin）等特性，提高代码的可维护性
B. 最终会被编译成普通的CSS代码
C. 不能嵌套编写CSS规则
D. 可以使用函数进行计算

（二）简答题

1. 请简述JavaScript中的事件循环机制（Event Loop），它是如何处理异步任务的？

2. 在React中，什么是虚拟DOM（Virtual DOM）？它的优势是什么？

3. 如何在Vue项目中实现路由懒加载？这样做的好处是什么？

三、综合应用题

1. 使用HTML、CSS和JavaScript实现一个简单的购物车功能，要求：

• 页面展示商品列表，每个商品包含图片、名称、价格和数量输入框。

• 可以在数量输入框中修改商品数量，实时计算商品总价和购物车总价。

• 可以将商品从购物车中移除。

2. 假设你正在开发一个电商网站，需要实现商品搜索功能。后端提供了一个API接口，接受一个搜索关键词参数，返回匹配的商品列表数据。请使用Vue或React框架，结合Axios库实现该功能，要求：

• 页面有一个搜索输入框和搜索按钮。

• 点击搜索按钮后，发送HTTP请求到后端API，获取并展示搜索结果。

• 对搜索结果进行分页展示，每页显示10条数据。

—————————————————————————
 

一、选择题

1. 下列关于async/await的描述，错误的是（  ）
A. async函数总是返回一个Promise对象
B. await只能在async函数内部使用
C. await可以等待普通函数的执行结果
D. async/await使异步代码看起来更像同步代码，提高了代码的可读性

2. 在CSS中，要实现元素的模糊效果，应使用以下哪个属性？（  ）
A. opacity  B. filter: blur()  C. visibility  D. transform: blur()

3. 以下哪种情况会触发JavaScript的Error事件？（  ）
A. 变量未声明就使用  B. 函数调用时参数个数不匹配
C. 访问对象不存在的属性  D. 所有上述情况

4. 在HTML中，<input>标签的type属性设置为email时，浏览器会（  ）
A. 自动弹出邮件客户端  B. 对输入内容进行基本的邮箱格式验证
C. 显示一个邮件发送按钮  D. 没有任何特殊效果

5. 在Vue中，watch选项用于（  ）
A. 监听数据的变化并执行相应的回调函数
B. 计算属性的实时更新
C. 定义全局过滤器
D. 注册自定义指令

二、简答题

1. 解释JavaScript中的this关键字，在不同的调用场景下（函数调用、方法调用、构造函数调用、箭头函数），this的指向分别是什么？

2. 什么是CSS的BFC（块级格式化上下文）？如何触发BFC？BFC有哪些应用场景？

3. 在前端开发中，跨域请求是一个常见的问题。请简述跨域产生的原因，并列举至少两种解决跨域问题的方法。

三、编程题

1. 编写一个JavaScript函数，实现数组去重功能。要求：函数接收一个数组作为参数，返回去重后的新数组。不能使用Set数据结构，只能使用基本的JavaScript语法实现。例如输入[1, 2, 2, 3, 4, 4, 5]，输出[1, 2, 3, 4, 5]。

2. 使用React实现一个简单的计数器组件。要求：

• 组件包含一个显示当前计数的数字区域。

• 有两个按钮，一个用于增加计数，另一个用于减少计数。

• 每次点击按钮，计数数字实时更新，并在控制台打印当前的计数值。

3. 假设你有一个包含多个城市天气数据的JSON数组，每个对象包含城市名称（city）、温度（temperature）和天气状况（weather）等属性。使用HTML、CSS和JavaScript实现一个天气展示页面，要求：

• 页面从JSON数据中获取天气信息，并以列表形式展示每个城市的天气。

• 提供一个搜索框，用户输入城市名称后，实时过滤并展示匹配的城市天气信息。

• 点击某个城市的天气信息时，弹出一个提示框，显示该城市的详细天气信息。

 

 

相关文章：

前端面试笔试题目（一）

以下模拟了大厂前端面试流程&#xff0c;并给出了涵盖HTML、CSS、JavaScript等基础和进阶知识的前端笔试题目&#xff0c;以帮助你更好地准备面试。 面试流程模拟 1. 自我介绍&#xff08;5 - 10分钟&#xff09;&#xff1a;面试官会请你进行简单的自我介绍&#xff0c;包括…...

编程日记 2026/2/17 0:06:29

笔记本搭配显示器

笔记本&#xff1a;2022款拯救者Y9000P&#xff0c;显卡RTX3060&#xff0c;分辨率2560*1600&#xff0c;刷新率&#xff1a;165Hz&#xff0c;无DP1.4口 显示器&#xff1a;2024款R27Q&#xff0c;27存&#xff0c;分辨率2560*1600&#xff0c;刷新率&#xff1a;165Hz &…...

编程日记 2026/5/8 13:28:26

设计转换Apache Hive的HQL语句为Snowflake SQL语句的Python程序方法

首先&#xff0c;根据以下各类HQL语句的基本实例和官方文档记录的这些命令语句各种参数设置&#xff0c;得到各种HQL语句的完整实例&#xff0c;然后在Snowflake的官方文档找到它们对应的Snowflake SQL语句&#xff0c;建立起对应的关系表。在这个过程中要注意HQL语句和Snowfla…...

编程日记 2025/11/2 15:20:08

DeepSeek R1 linux云部署

云平台&#xff1a;AutoDL 模型加载工具&#xff1a;Ollama 参考&#xff1a;https://github.com/ollama/ollama/blob/main/docs/linux.md 下载Ollama 服务器上下载ollama比较慢&#xff0c;因此我使用浏览器先下载到本地电脑上。 https://ollama.com/download/ollama-linux…...

编程日记 2026/5/7 6:23:15

【multi-agent-system】ubuntu24.04 安装uv python包管理器及安装依赖

uv包管理器是跨平台的 参考sudo apt-get update sudo apt-get install -y build-essential我的开发环境是ubuntu24.04 (base) root@k8s-master-pfsrv:/home/zhangbin/perfwork/01_ai/08_multi-agent-system# uv venv 找不到命令 “uv”，但可以通过以下软件...

编程日记 2026/5/5 13:58:07

UE5.3 C++ CDO的初步理解

一.UObject UObject是所有对象的基类&#xff0c;往上还有UObjectBaseUtility。 注释&#xff1a;所有虚幻引擎对象的基类。对象的类型由基于 UClass 类来定义。 这为创建和使用UObject的对象提供了 函数&#xff0c;并且提供了应在子类中重写的虚函数。 /** * The base cla…...

编程日记 2026/5/7 14:28:11

数学平均数应用

给定一个长度为 n 的数组 a。在一次操作中&#xff0c;你可以从索引 2 到 n−1中选择一个索引i&#xff0c;然后执行以下两个操作之一&#xff1a; 将 a[i−1] 减少 1&#xff0c;同时将 a[i1] 增加 1。 将 a[i1] 减少 1&#xff0c;同时将 a[i−1] 增加 1。 在每次操作后&…...

编程日记 2026/2/17 4:00:14

在排序数组中查找元素的第一个和最后一个位置(力扣)

一.题目介绍 二.题目解析 使用二分进行查找 2.1处理边界情况 如果数组为空&#xff0c;直接返回 [-1, -1]&#xff0c;因为无法找到目标值。 int[] ret new int[2]; ret[0] ret[1] -1; if (nums.length 0) return ret; 2.2查找左端点&#xff08;目标值开始位置&#…...

编程日记 2026/5/6 17:11:36

Native Memory Tracking 与 RSS的差异问题

一 问题现象 前一段时间用nmt查看jvm进程的栈区占用的内存大小。测试代码如下 public class ThreadOOM {public static void main(String[] args) {int i 1;while (i < 3000) {Thread thread new TestThread();thread.start();System.out.println("thread : "…...

编程日记 2026/5/7 12:07:27

完美世界前端面试题及参考答案

如何设置事件捕获和事件冒泡？ 在 JavaScript 中，可以通过addEventListener方法来设置事件捕获和事件冒泡。该方法接收三个参数，第一个参数是事件类型，如click、mousedown等；第二个参数是事件处理函数；第三个参数是一个布尔值，用于指定是否使用事件捕获机制。当这个布尔值…...

编程日记 2026/2/17 12:25:20

知识库管理如何推动企业数字化转型与创新发展的深层次探索

内容概要 在当今数字化转型的大背景下&#xff0c;知识库管理日益显现出其作为企业创新发展的核心驱动力的潜力。这种管理方式不仅仅是对信息的存储与检索&#xff0c;更是一种赋能&#xff0c;以提升决策效率和员工创造力。企业能够通过系统地整合和管理各类知识资源&#xf…...

编程日记 2026/5/8 4:38:51

《DeepSeek 网页/API 性能异常（DeepSeek Web/API Degraded Performance）：网络安全日志》

DeepSeek 网页/API 性能异常&#xff08;DeepSeek Web/API Degraded Performance&#xff09;订阅 已识别 - 已识别问题&#xff0c;并且正在实施修复。 1月 29&#xff0c; 2025 - 20&#xff1a;57 CST 更新 - 我们将继续监控任何其他问题。 1月 28&#xff0c; 2025 - 22&am…...

编程日记 2026/5/7 5:47:58

【性能优化专题系列】利用CompletableFuture优化多接口调用场景下的性能

背景说明 在实际的软件开发中&#xff0c;我们经常会遇到需要批量调用接口的场景。例如&#xff0c;电商系统在生成商品详情页时&#xff0c;需要同时调用多个服务接口来获取商品的基本信息、库存信息、价格信息、用户评价等。 传统的依次调用方式存在性能问题 面对上述场景…...

编程日记 2026/2/17 19:52:23

DeepSeek-R1本地部署笔记

文章目录 效果概要下载 ollama终端下载模型【可选】浏览器插件 UIQ: 内存占用高&#xff0c;显存占用不高&#xff0c;正常吗 效果 我的配置如下 E5 2666 V3 AMD 590Gme 可以说是慢的一批了&#xff0c;内存和显卡都太垃圾了&#xff0c;回去用我的新设备再试试 概要 安装…...

编程日记 2026/5/10 1:46:02

鸿蒙开发在onPageShow中数据加载不完整的问题分析与解决

API Version 12 1、onPageShow()作什么的 首先说明下几个前端接口的区别&#xff1a; ArkUI-X的aboutToAppear()接口是一个生命周期接口&#xff0c;用于在页面即将显示之前调用。 在ArkUI-X中&#xff0c;aboutToAppear()接口是一个重要的生命周期接口&#xff0c;它会在页…...

编程日记 2026/3/28 10:50:45

Kadane 算法

Kadane 算法 Kadane 算法用于解决最大子数组和问题，即在一个整数数组中找到具有最大和的连续子数组。此算法基于动态规划思想，在一次遍历过程中完成计算。 动态规划思路 核心在于维护两个变量：currentMax 表示当前子数组的最大和；globalMax 保存迄今为止发现的最大子数组…...

编程日记 2026/5/5 18:49:43

在Ubuntu子系统中基于Nginx部署Typecho

下载部署程序 typecho上传文件到子系统 创建文件夹typecho 在目录/var/www/html中创建一个目录typecho cd /var/www/html mkdir typecho将文件typecho.zip上传至新建的目录下&#xff0c;并解压文件 unzip typecho.zip授权文件夹 sudo chown -R www-data:www-data /var/www…...

编程日记 2026/2/18 13:22:39

C++中常用的十大排序方法之1——冒泡排序

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【&#x1f60a;///计算机爱好者&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日分享关于C中常用的排序方法之——冒泡排序的相关…...

编程日记 2026/5/7 15:56:34

不只是mini-react第二节：实现最简fiber

省流|总结 首先&#xff0c;我们编写JSX文件&#xff0c;并通过Babel等转换工具将其转化为createElement()函数的调用&#xff0c;最终生成虚拟 DOM&#xff08;Vdom&#xff09;格式。举个例子&#xff1a; // 原始 JSX const App <div>hi-mini-react</div>;//…...

编程日记 2026/4/1 19:09:12

python 使用Whisper模型进行语音翻译

目录 一、Whisper 是什么？ 二、Whisper 的基本命令行用法 三、代码实践 四、是否保留Token标记 五、翻译长度问题 六、性能分析 一、Whisper 是什么？ Whisper 是由 OpenAI 开源的一个自动语音识别（Automatic Speech Recognition, ASR）系统。它的主要特点是： 多语言…...

编程日记 2026/2/7 11:41:36

priority_queue的创建_结构体类型（重载小于运算符）c++

当优先级队列里面存的是一个自定义&#xff08;结构体&#xff09;类型&#xff0c;我们有两种方式&#xff0c;一个是用内置类型的方式&#xff0c;在priority_queue<>里写三个参数&#xff0c;比如int, vector<int>, less<int>&#xff0c;把int改成结构体…...

编程日记 2026/4/2 2:53:41

数据结构实战之线性表（一）

一.线性表的定义和特点 线性表的定义 线性表是一种数据结构&#xff0c;它包含了一系列具有相同特性的数据元素&#xff0c;数据元素之间存在着顺序关系。例如&#xff0c;26个英文字母的字符表 ( (A, B, C, ....., Z) ) 就是一个线性表&#xff0c;其中每个字母就是一个数据…...

编程日记 2026/5/7 17:40:14

Python学习之旅：进阶阶段（七）数据结构-计数器（collections.Counter）

在 Python 编程的进阶学习中，数据处理是一项重要的任务。collections.Counter作为 Python 标准库collections模块中的一员，为我们提供了一种高效且便捷的方式来统计数据出现的次数。接下来，就让我们一起深入了解这个强大的计数器。 一、什么是计数器 collections.Counter本…...

编程日记 2026/4/28 12:41:44

Spring Boot项目如何使用MyBatis实现分页查询及其相关原理

写在前面&#xff1a;大家好&#xff01;我是晴空๓。如果博客中有不足或者的错误的地方欢迎在评论区或者私信我指正&#xff0c;感谢大家的不吝赐教。我的唯一博客更新地址是&#xff1a;https://ac-fun.blog.csdn.net/。非常感谢大家的支持。一起加油&#xff0c;冲鸭&#x…...

编程日记 2026/5/7 16:24:14

【项目初始化】

项目初始化 使用脚手架创建项目Vite创建项目推荐拓展 使用脚手架创建项目 Vite Vite 是一个现代的前端构建工具&#xff0c;它提供了极速的更新和开发体验&#xff0c;支持多种前端框架&#xff0c;如 Vue、React 等创建项目 pnpm create vuelatest推荐拓展...

编程日记 2026/5/8 12:00:02

LeetCode热题100（八）—— 438.找到字符串中所有字母异位词

LeetCode热题100&#xff08;八&#xff09;—— 438.找到字符串中所有字母异位词 题目描述代码实现思路解析 你好&#xff0c;我是杨十一&#xff0c;一名热爱健身的程序员在Coding的征程中&#xff0c;不断探索与成长LeetCode热题100——刷题记录&#xff08;不定期更新&…...

编程日记 2026/5/7 14:54:12

26.Word：创新产品展示说明会【9】

目录 NO1.2.3​ NO4.5.6.7 NO1.2.3 另存为/F12&#xff1a;考生文件夹点亮显示和隐藏标记选中→插入→表格→文字转化成表格→✔制表符→确定布局→自动调整→设计→随便一种保存至“表格”部件库&#xff1a;选中表格→插入→文档部件→使用“表格”部件库&#xff1a;插入→…...

编程日记 2026/5/7 13:32:58

python 之 zip 和 * 解包操作

文章目录 1. zip 函数语法&#xff1a;示例&#xff1a;特点&#xff1a;应用场景&#xff1a; 2. * 操作符语法&#xff1a;示例&#xff1a;应用场景&#xff1a; 3. zip 和 * 的结合使用示例&#xff1a;转置二维列表 4. zip 和 * 的其他用法示例 1&#xff1a;合并多个列表…...

编程日记 2026/4/30 11:41:11

反向代理模块jmh

1 概念 1.1 反向代理概念 反向代理是指以代理服务器来接收客户端的请求&#xff0c;然后将请求转发给内部网络上的服务器&#xff0c;将从服务器上得到的结果返回给客户端&#xff0c;此时代理服务器对外表现为一个反向代理服务器。 对于客户端来说&#xff0c;反向代理就相当…...

编程日记 2026/5/7 13:26:02

AI应用部署——streamlit

如何把项目部署到一个具有公网ip地址的服务器上&#xff0c;让他人看到&#xff1f; 可以利用 streamlit 的社区云免费部署 1、生成requirements.txt文件 终端输入pip freeze > requirements.txt即可 requirements.txt里既包括自己安装过的库&#xff0c;也包括这些库的…...

编程日记 2026/4/3 1:25:48