Web前端面试题集锦及详细答案（基础+进阶）

Web前端面试题集锦及详细答案（基础+进阶）前言：本题集汇总企业高频Web前端面试真题，涵盖HTML、CSS、JavaScript、页面布局、兼容性、项目实操等核心考点，题型贴合实际面试场景，答案精简专业、适配求职备考使用。一、HTML高频面试题1.简述HTML5的新增特性，以及与HTML4的核心区别参考答案：HTML5是对HTML4的升级优化，核心区别在于语义化、功能性和兼容性，摒弃了大量冗余废弃标签，新增实用功能，主要特性如下：（1）新增语义化标签：引入<header>、<nav>、<section>、<article>、<footer>等标签，替代传统无意义的<div>布局，让页面结构清晰，便于搜索引擎抓取和开发者维护；（2）新增多媒体标签：原生支持<audio>音频、<video>视频标签，无需依赖第三方插件即可实现媒体播放；（3）新增表单功能：新增email、number、tel、date等表单输入类型，以及required、placeholder、maxlength等属性，原生实现表单基础校验；（4）新增画布与存储功能：提供Canvas画布绘图、本地存储localStorage、会话存储sessionStorage，替代传统cookie的部分功能，存储容量更大、使用更便捷；（5）废弃冗余标签：取消<font>、<center>、<strike>等样式类标签，实现结构与样式彻底分离。2.什么是语义化标签？使用语义化标签的好处参考答案：语义化标签是指标签本身具备明确的页面含义，能够直观体现标签内容的作用和位置，而非单纯用于布局。核心好处：（1）结构清晰：代码可读性高，开发者可快速看懂页面模块结构，便于团队协作和后期维护；（2）利于SEO：搜索引擎爬虫可精准识别页面各个模块的作用，提升网页收录和搜索排名；（3）适配设备：适配屏幕阅读器等辅助设备，方便特殊人群浏览网页，提升页面兼容性；（4）规范统一：规避大量无意义div嵌套，代码层级更规整。3.简述行内元素、块级元素、行内块元素的区别参考答案：（1）块级元素：独占一行，默认宽度铺满父容器，可设置宽、高、内外边距、边框。常见标签：<div>、<p>、<h1-h6>、<ul>、<ol>；（2）行内元素：多个元素横向排列，不独占一行，无法设置宽高，上下内外边距无效，仅自适应文本内容大小。常见标签：<a>、<span>、<i>、<b>；（3）行内块元素：兼具两者特性，横向排列、不独占一行，同时可以自由设置宽高、边距、边框。常见标签：<img>、<input>、<button>。二、CSS高频面试题1.CSS选择器有哪些？优先级如何计算？参考答案：常用选择器：通用选择器、标签选择器、类选择器、ID选择器、行内样式选择器、后代选择器、子代选择器、伪类选择器、伪元素选择器。优先级从高到低：!important（最高）>行内样式>ID选择器>类选择器、伪类选择器>标签选择器>通用选择器（最低）优先级规则：优先级不可叠加进位，同级选择器后写覆盖先写；!important优先级最高，不推荐滥用，会导致样式难以维护。2.简述CSS盒子模型，以及标准盒模型与怪异盒模型的区别参考答案：CSS盒子模型是页面元素布局的基础，所有HTML元素都可以看作一个盒子，由内容区（content）、内边距（padding）、边框（border）、外边距（margin）四部分组成。核心区别：（1）标准盒模型（box-sizing:content-box）：元素设置的宽高仅为内容区大小，padding和border会向外撑开盒子，元素实际宽度=内容宽度+左右padding+左右border；（2）怪异盒模型（box-sizing:border-box）：元素设置的宽高为盒子整体总宽度，padding和border会向内压缩内容区，不会撑开盒子，实际宽度等于设置的width值。日常开发中统一使用border-box，布局更精准，避免尺寸错乱。3.如何实现元素水平居中、垂直居中？列举常用方法参考答案：一、水平居中1.块级元素：设置margin:0auto;（最常用，需固定宽度）；2.行内/行内块元素：给父元素设置text-align:center;。二、垂直居中1.flex布局（万能常用）：父元素设置display:flex;justify-content:center;align-items:center;，可实现水平垂直一键居中，适配所有元素；2.定位居中：父元素相对定位，子元素绝对定位，设置top:50%;left:50%;transform:translate(-50%,-50%);，无需固定宽高，适配性强；3.单行文本：设置line-height等于元素高度。4.简述Flex弹性布局的常用属性及作用参考答案：Flex是一维弹性布局，主要用于快速实现弹性排列、居中、自适应布局，分为容器属性和子项属性。容器常用属性：display:flex;开启弹性布局；flex-direction：设置主轴方向（横向/纵向）；justify-content：主轴对齐方式（居中、两端对齐、均分）；align-items：侧轴对齐方式；flex-wrap：设置子项是否自动换行。子项常用属性：flex：设置子项伸缩比例；align-self：单独设置单个子项的侧轴对齐方式。5.什么是BFC？BFC的作用和触发条件参考答案：BFC即块级格式化上下文，是浏览器的一块独立渲染区域，区域内部元素的布局不会影响外部元素，外部也不会干扰内部。常见触发条件：元素设置浮动、绝对定位、overflow不为visible、display为flex/inline-block等。核心作用：（1）清除浮动带来的高度塌陷问题；（2）解决上下元素外边距重叠问题；（3）实现自适应两栏、三栏布局。三、JavaScript高频面试题1.简述var、let、const的区别参考答案：（1）变量提升：var存在变量提升，声明前可访问，值为undefined；let、const不存在变量提升，声明前访问会报错；（2）作用域：var仅支持全局作用域、函数作用域，无块级作用域；let、const支持块级作用域（大括号内生效）；（3）重复声明：var允许重复声明变量；let、const禁止重复声明；（4）赋值规则：var、let可修改变量值；const声明常量，一旦赋值不可修改（引用类型可修改内部属性）；开发规范：优先使用const，可变变量使用let，废弃var。2.什么是数据类型？JS中有哪些基础数据类型参考答案：JS数据类型分为基本数据类型和引用数据类型。基本数据类型（7种）：String、Number、Boolean、Null、Undefined、Symbol、BigInt，存储在栈内存，赋值为值传递；引用数据类型：Object（包含数组、对象、函数），存储在堆内存，变量存储内存地址，赋值为地址传递。3.简述深拷贝和浅拷贝的区别，以及常用实现方式参考答案：（1）浅拷贝：只拷贝对象第一层属性，如果属性是引用类型，仅拷贝内存地址，新旧对象的引用属性会相互影响；常用方式：Object.assign()、扩展运算符...、数组slice()；（2）深拷贝：完全拷贝对象所有层级属性，开辟全新内存空间，新旧对象完全独立，修改互不影响；常用方式：JSON.parse(JSON.stringify())（简易版，忽略函数、undefined）、递归遍历拷贝（完整版）。4.简述JS中的闭包，以及闭包的优缺点参考答案：闭包定义：函数嵌套函数，内层函数访问外层函数的变量，外层函数执行结束后，内层函数依然可以持有外层变量，形成闭包。优点：（1）保留函数变量的作用域，变量不会被销毁；（2）可以实现私有变量，避免全局变量污染。缺点：（1）变量长期占用内存，无法及时释放，容易造成内存堆积；（2）使用不当会导致内存泄漏。5.简述同步和异步的区别，常见异步场景有哪些参考答案：（1）同步：代码自上而下依次执行，上一段代码执行完毕，才会执行下一段，程序会阻塞等待；（2）异步：代码执行不会阻塞后续代码，耗时任务放入后台执行，完成后再执行回调，提升程序运行效率。常见异步场景：定时器、网络请求、文件读写、事件监听、Promise、async/await。四、页面兼容与性能优化面试题1.简述前端页面常见的兼容问题及解决方案参考答案：（1）浏览器默认边距不同：不同浏览器标签默认margin、padding不一致，解决方案：全局清零样式*{margin:0;padding:0;}；（2）图片下方留白：img行内块特性导致，解决方案：设置img{display:block;}；（3）IE浏览器兼容问题：不支持flex、部分H5属性，解决方案：添加浏览器前缀、使用兼容插件；（4）移动端适配问题：屏幕尺寸适配错乱，解决方案：使用rem、vw/vh单位、flex布局适配。2.简述前端页面性能优化的常用方式参考答案：1.代码优化精简代码、删除冗余代码、压缩HTML/CSS/JS、合并重复样式和函数；2.资源优化图片压缩、使用webp格式图片、懒加载图片和视频、合并静态资源请求；3.渲染优化减少DOM操作、避免频繁重排重绘、使用flex代替浮动、合理使用缓存；4.加载优化开启浏览器缓存、CDN加速、异步加载JS、延迟加载非首屏资源。五、实操综合面试题1.请简述从输入网址到页面渲染完成的完整流程参考答案：（1）DNS解析：将域名解析为服务器IP地址；（2）建立TCP连接：通过三次握手与服务器建立稳定连接；（3）发送HTTP请求：浏览器向服务器发送资源请求；（4）服务器响应：服务器接收请求，返回HTML、CSS、JS等资源文件；（5）解析渲染页面：浏览器解析HTML生成DOM树、解析CSS生成CSSOM树，结合生成渲染树，完成页面布局、绘制、合成；（6）执行JS代码：解析执行页面脚本，实现页面交互效果；（7）关闭TCP连接：四次挥手断开连接。2.什么是重