前端面试笔试题目（一）

以下模拟了大厂前端面试流程，并给出了涵盖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库实现该功能，要求：