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

前端面试笔试题目（一）

news 2025/11/5 17:03:45

以下模拟了大厂前端面试流程，并给出了涵盖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;包括…...

编程日记 2025/2/2 20:45:38

Docker Hello World

Docker Hello World 引言 Docker 是一个开源的应用容器引擎，可以让开发者打包他们的应用以及应用的依赖包到一个可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚拟化。本文将带领您从零开始，学习如何使用 Docker 运行一个简单的 "Hello World"…...

编程日记 2025/2/2 20:42:35

UE 5.3 C++ 对垃圾回收的初步认识

一.UObject的创建 UObject 不支持构造参数。 所有的C UObject都会在引擎启动的时候初始化&#xff0c;然后引擎会调用其默认构造器。如果没有默认的构造器&#xff0c;那么 UObject 将不会编译。 有修改父类参数的需求&#xff0c;就使用指定带参构造 // Sets default value…...

编程日记 2025/2/2 20:40:29

ARM内核：嵌入式时代的核心引擎

引言 在当今智能设备无处不在的时代&#xff0c;ARM&#xff08;Advanced RISC Machines&#xff09;处理器凭借其高性能、低功耗的特性&#xff0c;成为智能手机、物联网设备、汽车电子等领域的核心引擎。作为精简指令集&#xff08;RISC&#xff09;的典范&#xff0c;ARM核…...

编程日记 2025/2/2 20:34:20

需求分析应该从哪些方面来着手做？

需求分析一般可从以下几个方面着手&#xff1a; 业务需求方面 - 与相关方沟通&#xff1a;与业务部门、客户等进行深入交流&#xff0c;通过访谈、问卷调查、会议讨论等方式&#xff0c;明确他们对项目的期望、目标和整体业务需求&#xff0c;了解项目要解决的业务问题及达成的…...

编程日记 2025/2/2 20:33:17

【Unity2D 2022：C#Script】DoTween插件的使用

一、插件介绍 DOTween 是一个快速、高效、完全类型安全的 Unity 面向对象的动画引擎&#xff0c;针对 C# 用户进行了优化&#xff0c;免费和开源&#xff0c;具有大量高级功能 二、插件的下载 1. DoTween官网&#xff1a;DOTween (HOTween v2) 2. DoTween下载&#xff1a; …...

编程日记 2025/2/2 20:30:13

【Docker】ubuntu中 Docker的使用

之前记录了 docker的安装 【环境配置】ubuntu中 Docker的安装&#xff1b; 本篇博客记录Dockerfile的示例&#xff0c;docker 的使用&#xff0c;包括镜像的构建、容器的启动、docker compose的使用等。   当安装好后&#xff0c;可查看docker的基本信息 docker info ## 查…...

编程日记 2025/2/2 20:21:39

【数据结构篇】时间复杂度

一.数据结构前言 1.1 数据结构的概念 数据结构(Data Structure)是计算机存储、组织数据的⽅式&#xff0c;指相互之间存在⼀种或多种特定关系的数 据元素的集合。没有⼀种单⼀的数据结构对所有⽤途都有⽤&#xff0c;所以我们要学各式各样的数据结构&#xff0c; 如&#xff1a…...

编程日记 2025/2/2 20:16:30

linux 环境安装 dlib 的 gpu 版本

默认使用 pip 安装的 dlib 是不使用 gpu 的 在国内社区用百度查如何安装 gpu 版本的 dlib 感觉信息都不太对&#xff0c;都是说要源码编译还有点复杂 还需要自己安装 cuda 相关的包啥的&#xff0c;看着就头大 于是想到这个因该 conda 自己就支持了吧&#xff0c;然后查了一下…...

编程日记 2025/2/2 20:13:25

springboot集成钉钉，发送钉钉日报

目录 1.说明 2.示例 3.总结 1.说明 学习地图 - 钉钉开放平台 在钉钉开放文档中可以查看有关日志相关的api&#xff0c;主要用到以下几个api&#xff1a; ①获取模板详情 ②获取用户发送日志的概要信息 ③获取日志接收人员列表 ④创建日志 发送日志时需要根据模板规定日志…...

编程日记 2025/2/2 20:08:19

【机器学习】自定义数据集 使用scikit-learn中svm的包实现svm分类

一、支持向量机(support vector machines. &#xff0c;SVM)概念 1. SVM 绪论 支持向量机&#xff08;SVM&#xff09;的核心思想是找到一个最优的超平面&#xff0c;将不同类别的数据点分开。SVM 的关键特点包括&#xff1a; ① 分类与回归&#xff1a; SVM 可以用于分类&a…...

编程日记 2025/2/2 20:04:15

快速提升网站收录：利用网站历史数据

本文转自&#xff1a;百万收录网 原文链接&#xff1a;https://www.baiwanshoulu.com/38.html 利用网站历史数据可以有效提升网站的收录速度&#xff0c;以下是一些具体的策略和方法&#xff1a; 一、理解网站历史数据的重要性 网站历史数据记录了网站过去的运营情况、用户行…...

编程日记 2025/2/2 19:55:05

【Git】初识Git Git基本操作详解

文章目录 学习目标Ⅰ. 初始 Git&#x1f4a5;注意事项 Ⅱ. Git 安装Linux-centos安装Git Ⅲ. Git基本操作一、创建git本地仓库 -- git init二、配置 Git -- git config三、认识工作区、暂存区、版本库① 工作区② 暂存区③ 版本库④ 三者的关系 四、添加、提交更改、查看提交日…...

编程日记 2025/2/2 19:54:04

Python NumPy（11）：NumPy 排序、条件筛选函数

1 NumPy 排序、条件筛选函数 NumPy 提供了多种排序的方法。 这些排序函数实现不同的排序算法&#xff0c;每个排序算法的特征在于执行速度&#xff0c;最坏情况性能&#xff0c;所需的工作空间和算法的稳定性。 下表显示了三种排序算法的比较。 种类速度最坏情况工作空间稳定性…...

编程日记 2025/2/2 19:51:00

AJAX综合案例——图书管理

黑马程序员视频地址&#xff1a; AJAX-Day02-10.案例_图书管理AJAX-Day02-10.案例_图书管理_总结_V1.0是黑马程序员前端AJAX入门到实战全套教程&#xff0c;包含学前端框架必会的&#xff08;ajaxnode.jswebpackgit&#xff09;&#xff0c;一套全覆盖的第25集视频&#xff0c…...

编程日记 2025/2/2 19:46:56

JDK自带工具解析与生产问题定位指南（一）

1. 引言 Java开发工具包&#xff08;JDK&#xff09;内置了强大的诊断工具集&#xff0c;用于监控、分析和调试Java应用程序。这些工具涵盖了从进程管理、内存分析到性能监控的各个方面。本文将介绍一些最常用的Java开发工具&#xff0c;包括jps、jmap、jstat、jcmd、jstack、…...

编程日记 2025/2/2 19:45:55

FPGA 使用 CLOCK_DEDICATED_ROUTE 约束

使用 CLOCK_DEDICATED_ROUTE 约束 CLOCK_DEDICATED_ROUTE 约束通常在从一个时钟区域中的时钟缓存驱动到另一个时钟区域中的 MMCM 或 PLL 时使 用。默认情况下&#xff0c; CLOCK_DEDICATED_ROUTE 约束设置为 TRUE &#xff0c;并且缓存 /MMCM 或 PLL 对必须布局在相同…...

编程日记 2025/2/2 19:44:51

《解锁AI黑科技：数据分类聚类与可视化》

在当今数字化时代&#xff0c;数据如潮水般涌来&#xff0c;如何从海量数据中提取有价值的信息&#xff0c;成为了众多领域面临的关键挑战。人工智能&#xff08;AI&#xff09;技术的崛起&#xff0c;为解决这一难题提供了强大的工具。其中&#xff0c;能够实现数据分类与聚类…...

编程日记 2025/2/2 19:41:46

Java小白入门教程：Object

目录 一、定义 二、作用 三、使用场景 四、语法以及示例 1、创建Object类型的对象 2、使用 toString()方法 3、使用 equals()方法 4、使用 hashCode()方法 5、使用 getClass()方法 6、使用 clone()方法 7、使用 finalize()方法 一、定义 在Java中&#xff0c; object…...

编程日记 2025/2/2 19:40:45

记6（人工神经网络

目录 1、M-P神经元2、感知机3、Delta法则4、前馈型神经网络&#xff08;Feedforward Neural Networks&#xff09;5、鸢尾花数据集——单层前馈型神经网络&#xff1a;6、多层神经网络&#xff1a;增加隐含层7、实现异或运算&#xff08;01、10为1,00、11为0&#xff09;8、线性…...

编程日记 2025/2/2 19:37:43

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

编程新知 2025/9/14 16:40:54

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2025/11/3 16:41:29

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/10/22 15:29:45

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

编程新知 2025/11/1 2:17:17

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/8/25 19:12:45

关键领域软件测试的突围之路：如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

编程新知 2025/11/3 21:36:14

安卓基础（aar）

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

编程新知 2025/10/2 5:21:30

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...

编程新知 2025/10/25 12:42:32

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

编程新知 2025/9/30 16:23:57

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2025/10/27 7:19:52