目录前言一、HTML 基础面试题1. 简述 HTML、CSS、JavaScript 三者的作用与关系标准答案2. 什么是语义化标签有哪些常用语义化标签语义化的好处标准答案3. H5 新增哪些常用特性标准答案二、CSS 基础面试题1. 标准盒模型与 IE 怪异盒模型区别box-sizing 作用标准答案代码示例2. 什么是 BFC触发条件与应用场景标准答案3. 简述 flex 弹性布局常用属性及作用标准答案代码示例4. 行内元素、块级元素、行内块元素区别标准答案三、JavaScript 基础面试题1. JS 有哪些数据类型如何精准判断数据类型标准答案代码示例2. var、let、const 区别标准答案3. 箭头函数与普通函数区别标准答案代码示例4. 什么是闭包闭包作用与内存泄漏问题标准答案代码示例5. 手写防抖和节流初级必考题标准答案代码示例6. 简述 JS 事件循环机制标准答案四、ES6 核心面试题1. Promise 是什么三种状态标准答案2. async/await 作用及原理标准答案代码示例3. Set 和 Map 数据结构作用标准答案代码示例五、Vue2 基础初级面试题1. v-if 和 v-show 区别标准答案2. Vue 生命周期常用钩子及作用标准答案3. Vue 组件通信常用方式初级必考标准答案六、浏览器与网络基础1. 从输入网址到页面展示全过程标准答案2. 本地存储 localStorage、sessionStorage、Cookie 区别标准答案七、前端工程化基础1. 简述 Webpack 的作用标准答案2. 什么是跨域跨域常见解决方案标准答案前言本文专为应届生、0-1 年工作经验初级前端整理涵盖 HTML、CSS、JavaScript、ES6、前端工程化、Vue 基础、浏览器基础七大模块。每道题目附带标准满分答案、原理解析、可运行代码示例格式完全适配 CSDN 博客排版可直接收藏背诵、面试刷题、新人自测、面试官出题使用。全篇坚持干货无废话、知识点权威、讲解通俗易懂、代码可直接复制运行覆盖初级前端面试 90% 以上高频必考考点。一、HTML 基础面试题1. 简述 HTML、CSS、JavaScript 三者的作用与关系标准答案HTML超文本标记语言负责页面结构搭建相当于网页的骨架CSS层叠样式表负责页面样式与布局美化相当于网页的皮肤JavaScript脚本语言负责页面交互、逻辑处理、动态渲染相当于网页的灵魂。三者协同工作HTML 搭结构 → CSS 做样式 → JS 实现交互共同构成完整可交互网页。2. 什么是语义化标签有哪些常用语义化标签语义化的好处标准答案语义化标签标签本身自带含义不依赖样式即可表达页面结构含义。常用语义化标签header、nav、main、section、article、aside、footer好处代码结构清晰可读性强便于团队维护搜索引擎爬虫更好抓取利于 SEO 优化适配屏幕阅读器提升无障碍访问体验。3. H5 新增哪些常用特性标准答案语义化标签、本地存储localStorage/sessionStorage画布 Canvas、视频音频标签 video/audio拖拽 API、地理定位、WebSocket、表单新属性required、placeholder二、CSS 基础面试题1. 标准盒模型与 IE 怪异盒模型区别box-sizing 作用标准答案标准盒模型content-boxwidth/height 仅包含内容区padding、border 会额外撑大元素尺寸。IE 怪异盒模型border-boxwidth/height 包含content padding border不会被内边距和边框撑大。box-sizing 用于切换盒模型开发中推荐统一设置border-box。代码示例css/* 全局统一怪异盒模型开发标配 */ * { margin: 0; padding: 0; box-sizing: border-box; }2. 什么是 BFC触发条件与应用场景标准答案BFC块级格式化上下文是 CSS 的独立渲染区域内部元素布局不会影响外部。常见触发条件元素设置 float 非 noneposition 为 absolute /fixedoverflow 非 visibledisplay 为 flex、grid、inline-block应用场景解决父元素高度塌陷子元素浮动解决 margin 上下重叠问题实现自适应两栏布局3. 简述 flex 弹性布局常用属性及作用标准答案容器属性display:flex开启弹性布局justify-content水平对齐align-items垂直对齐flex-direction设置主轴方向。子项属性flex分配剩余空间align-self单独设置子项垂直对齐。代码示例css.box { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ width: 300px; height: 300px; background: #eee; }4. 行内元素、块级元素、行内块元素区别标准答案块级元素独占一行可设置宽高、内外边距如 div、p、h1、section行内元素同行排列不能设置宽高仅水平边距生效如 span、a、label行内块元素同行排列可设置宽高如 img、input、display:inline-block三、JavaScript 基础面试题1. JS 有哪些数据类型如何精准判断数据类型标准答案基本数据类型String、Number、Boolean、Null、Undefined、Symbol、BigInt引用数据类型Object、Array、Function、Date 等类型判断方式typeof适合判断基本类型无法区分数组、null、对象instanceof判断引用类型原型关系Object.prototype.toString.call()最精准可判断所有类型代码示例javascript运行console.log(Object.prototype.toString.call([])); // [object Array] console.log(Object.prototype.toString.call(null)); // [object Null] console.log(Object.prototype.toString.call({})); // [object Object]2. var、let、const 区别标准答案变量提升var 有提升let/const 无变量提升存在暂时性死区作用域var 函数级作用域let/const 块级作用域{} 内有效重复声明var 允许重复声明let/const 不允许赋值修改let 可修改const 声明后不可重新赋值引用类型可改属性3. 箭头函数与普通函数区别标准答案箭头函数没有自己的 this继承外层作用域 this普通函数 this 由调用方式决定箭头函数不能作为构造函数不能 new箭头函数没有 arguments可用剩余参数替代箭头函数不能使用 yield不适合做 Generator 函数代码示例javascript运行// 普通函数 function fn1() { console.log(this); } // 箭头函数 const fn2 () { console.log(this); };4. 什么是闭包闭包作用与内存泄漏问题标准答案闭包内层函数引用外层函数变量内层函数在外部执行形成闭包。作用私有化变量、延长变量生命周期、模块化封装弊端变量常驻内存容易造成内存泄漏解决方案使用完毕手动置为 null切断引用代码示例javascript运行function outer() { let num 10; // 内层函数形成闭包 return function inner() { console.log(num); } } const res outer(); res(); // 105. 手写防抖和节流初级必考题标准答案防抖触发事件后延迟执行期间再次触发重新计时适合输入框搜索节流固定时间内只执行一次适合滚动、窗口 resize代码示例javascript运行// 防抖 function debounce(fn, delay 300) { let timer null; return function(...args) { clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); }, delay); } } // 节流 function throttle(fn, interval 300) { let lastTime 0; return function(...args) { const now Date.now(); if (now - lastTime interval) { fn.apply(this, args); lastTime now; } } }6. 简述 JS 事件循环机制标准答案JS 是单线程分为同步任务、异步任务同步任务进入主线程立即执行异步任务进入任务队列分为微任务、宏任务执行顺序执行同步 → 清空所有微任务 → 执行一个宏任务 → 循环往复。微任务Promise.then、async/await、queueMicrotask宏任务setTimeout、setInterval、AJAX、DOM 事件四、ES6 核心面试题1. Promise 是什么三种状态标准答案Promise 是解决异步回调地狱的异步编程方案。三种状态pending 进行中fulfilled 成功rejected 失败状态一旦改变无法逆转。2. async/await 作用及原理标准答案async/await 是 Promise 的语法糖以同步写法处理异步逻辑代码更简洁易读。async 修饰函数返回 Promiseawait 等待 Promise 执行完成只能在 async 函数内部使用。代码示例javascript运行function request() { return new Promise(resolve { setTimeout(() resolve(请求成功), 1000); }) } async function getData() { const res await request(); console.log(res); } getData();3. Set 和 Map 数据结构作用标准答案Set元素唯一不重复可用于数组去重Map键可以是任意类型对象 / 数组键值对存储遍历更方便代码示例javascript运行// 数组去重 const arr [1,2,2,3,3,4]; const newArr [...new Set(arr)]; console.log(newArr); // [1,2,3,4]五、Vue2 基础初级面试题1. v-if 和 v-show 区别标准答案原理v-if 是销毁 / 重建 DOMv-show 是通过display 控制显示隐藏性能频繁切换用 v-show一次性条件判断用 v-ifv-if 支持 template 标签v-show 不支持2. Vue 生命周期常用钩子及作用标准答案created实例创建完成可访问数据无法操作 DOMmountedDOM 挂载完成可发起网络请求、操作 DOMupdated数据更新后视图重新渲染完成destroyed实例销毁清除定时器、解绑事件3. Vue 组件通信常用方式初级必考标准答案父子通信父传子 props子传父 $emit兄弟通信EventBus 事件总线跨层级provide/inject、Vuex六、浏览器与网络基础1. 从输入网址到页面展示全过程标准答案DNS 域名解析域名解析为服务器 IPTCP 三次握手建立连接发送 HTTP 请求服务器返回响应HTML/CSS/JS 资源浏览器解析 HTML 生成 DOM 树解析 CSS 生成 CSSOM 树生成渲染树 → 布局 → 绘制 → 页面展示2. 本地存储 localStorage、sessionStorage、Cookie 区别标准答案存储周期Cookie 可设置过期时间localStorage 永久存储sessionStorage 会话关闭失效存储大小Cookie 4KB 左右WebStorage 5MB 左右请求携带Cookie 每次请求自动携带localStorage/sessionStorage 不参与网络请求操作易用性WebStorage API 更简洁Cookie 需手动封装七、前端工程化基础1. 简述 Webpack 的作用标准答案Webpack 是前端模块打包工具可将 JS、CSS、图片、字体等所有资源视为模块打包压缩、编译 ES6、处理兼容性、代码分割、自动化构建提升开发与部署效率。2. 什么是跨域跨域常见解决方案标准答案跨域协议、域名、端口任一不同即为跨域浏览器同源策略限制。常用解决方式后端设置 CORS 跨域前端配置代理VueCLI / Vite 代理JSONP仅支持 GET 请求老式方案
2026 最新前端开发工程师初级面试题（含标准答案 + 代码示例）
目录前言一、HTML 基础面试题1. 简述 HTML、CSS、JavaScript 三者的作用与关系标准答案2. 什么是语义化标签有哪些常用语义化标签语义化的好处标准答案3. H5 新增哪些常用特性标准答案二、CSS 基础面试题1. 标准盒模型与 IE 怪异盒模型区别box-sizing 作用标准答案代码示例2. 什么是 BFC触发条件与应用场景标准答案3. 简述 flex 弹性布局常用属性及作用标准答案代码示例4. 行内元素、块级元素、行内块元素区别标准答案三、JavaScript 基础面试题1. JS 有哪些数据类型如何精准判断数据类型标准答案代码示例2. var、let、const 区别标准答案3. 箭头函数与普通函数区别标准答案代码示例4. 什么是闭包闭包作用与内存泄漏问题标准答案代码示例5. 手写防抖和节流初级必考题标准答案代码示例6. 简述 JS 事件循环机制标准答案四、ES6 核心面试题1. Promise 是什么三种状态标准答案2. async/await 作用及原理标准答案代码示例3. Set 和 Map 数据结构作用标准答案代码示例五、Vue2 基础初级面试题1. v-if 和 v-show 区别标准答案2. Vue 生命周期常用钩子及作用标准答案3. Vue 组件通信常用方式初级必考标准答案六、浏览器与网络基础1. 从输入网址到页面展示全过程标准答案2. 本地存储 localStorage、sessionStorage、Cookie 区别标准答案七、前端工程化基础1. 简述 Webpack 的作用标准答案2. 什么是跨域跨域常见解决方案标准答案前言本文专为应届生、0-1 年工作经验初级前端整理涵盖 HTML、CSS、JavaScript、ES6、前端工程化、Vue 基础、浏览器基础七大模块。每道题目附带标准满分答案、原理解析、可运行代码示例格式完全适配 CSDN 博客排版可直接收藏背诵、面试刷题、新人自测、面试官出题使用。全篇坚持干货无废话、知识点权威、讲解通俗易懂、代码可直接复制运行覆盖初级前端面试 90% 以上高频必考考点。一、HTML 基础面试题1. 简述 HTML、CSS、JavaScript 三者的作用与关系标准答案HTML超文本标记语言负责页面结构搭建相当于网页的骨架CSS层叠样式表负责页面样式与布局美化相当于网页的皮肤JavaScript脚本语言负责页面交互、逻辑处理、动态渲染相当于网页的灵魂。三者协同工作HTML 搭结构 → CSS 做样式 → JS 实现交互共同构成完整可交互网页。2. 什么是语义化标签有哪些常用语义化标签语义化的好处标准答案语义化标签标签本身自带含义不依赖样式即可表达页面结构含义。常用语义化标签header、nav、main、section、article、aside、footer好处代码结构清晰可读性强便于团队维护搜索引擎爬虫更好抓取利于 SEO 优化适配屏幕阅读器提升无障碍访问体验。3. H5 新增哪些常用特性标准答案语义化标签、本地存储localStorage/sessionStorage画布 Canvas、视频音频标签 video/audio拖拽 API、地理定位、WebSocket、表单新属性required、placeholder二、CSS 基础面试题1. 标准盒模型与 IE 怪异盒模型区别box-sizing 作用标准答案标准盒模型content-boxwidth/height 仅包含内容区padding、border 会额外撑大元素尺寸。IE 怪异盒模型border-boxwidth/height 包含content padding border不会被内边距和边框撑大。box-sizing 用于切换盒模型开发中推荐统一设置border-box。代码示例css/* 全局统一怪异盒模型开发标配 */ * { margin: 0; padding: 0; box-sizing: border-box; }2. 什么是 BFC触发条件与应用场景标准答案BFC块级格式化上下文是 CSS 的独立渲染区域内部元素布局不会影响外部。常见触发条件元素设置 float 非 noneposition 为 absolute /fixedoverflow 非 visibledisplay 为 flex、grid、inline-block应用场景解决父元素高度塌陷子元素浮动解决 margin 上下重叠问题实现自适应两栏布局3. 简述 flex 弹性布局常用属性及作用标准答案容器属性display:flex开启弹性布局justify-content水平对齐align-items垂直对齐flex-direction设置主轴方向。子项属性flex分配剩余空间align-self单独设置子项垂直对齐。代码示例css.box { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ width: 300px; height: 300px; background: #eee; }4. 行内元素、块级元素、行内块元素区别标准答案块级元素独占一行可设置宽高、内外边距如 div、p、h1、section行内元素同行排列不能设置宽高仅水平边距生效如 span、a、label行内块元素同行排列可设置宽高如 img、input、display:inline-block三、JavaScript 基础面试题1. JS 有哪些数据类型如何精准判断数据类型标准答案基本数据类型String、Number、Boolean、Null、Undefined、Symbol、BigInt引用数据类型Object、Array、Function、Date 等类型判断方式typeof适合判断基本类型无法区分数组、null、对象instanceof判断引用类型原型关系Object.prototype.toString.call()最精准可判断所有类型代码示例javascript运行console.log(Object.prototype.toString.call([])); // [object Array] console.log(Object.prototype.toString.call(null)); // [object Null] console.log(Object.prototype.toString.call({})); // [object Object]2. var、let、const 区别标准答案变量提升var 有提升let/const 无变量提升存在暂时性死区作用域var 函数级作用域let/const 块级作用域{} 内有效重复声明var 允许重复声明let/const 不允许赋值修改let 可修改const 声明后不可重新赋值引用类型可改属性3. 箭头函数与普通函数区别标准答案箭头函数没有自己的 this继承外层作用域 this普通函数 this 由调用方式决定箭头函数不能作为构造函数不能 new箭头函数没有 arguments可用剩余参数替代箭头函数不能使用 yield不适合做 Generator 函数代码示例javascript运行// 普通函数 function fn1() { console.log(this); } // 箭头函数 const fn2 () { console.log(this); };4. 什么是闭包闭包作用与内存泄漏问题标准答案闭包内层函数引用外层函数变量内层函数在外部执行形成闭包。作用私有化变量、延长变量生命周期、模块化封装弊端变量常驻内存容易造成内存泄漏解决方案使用完毕手动置为 null切断引用代码示例javascript运行function outer() { let num 10; // 内层函数形成闭包 return function inner() { console.log(num); } } const res outer(); res(); // 105. 手写防抖和节流初级必考题标准答案防抖触发事件后延迟执行期间再次触发重新计时适合输入框搜索节流固定时间内只执行一次适合滚动、窗口 resize代码示例javascript运行// 防抖 function debounce(fn, delay 300) { let timer null; return function(...args) { clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); }, delay); } } // 节流 function throttle(fn, interval 300) { let lastTime 0; return function(...args) { const now Date.now(); if (now - lastTime interval) { fn.apply(this, args); lastTime now; } } }6. 简述 JS 事件循环机制标准答案JS 是单线程分为同步任务、异步任务同步任务进入主线程立即执行异步任务进入任务队列分为微任务、宏任务执行顺序执行同步 → 清空所有微任务 → 执行一个宏任务 → 循环往复。微任务Promise.then、async/await、queueMicrotask宏任务setTimeout、setInterval、AJAX、DOM 事件四、ES6 核心面试题1. Promise 是什么三种状态标准答案Promise 是解决异步回调地狱的异步编程方案。三种状态pending 进行中fulfilled 成功rejected 失败状态一旦改变无法逆转。2. async/await 作用及原理标准答案async/await 是 Promise 的语法糖以同步写法处理异步逻辑代码更简洁易读。async 修饰函数返回 Promiseawait 等待 Promise 执行完成只能在 async 函数内部使用。代码示例javascript运行function request() { return new Promise(resolve { setTimeout(() resolve(请求成功), 1000); }) } async function getData() { const res await request(); console.log(res); } getData();3. Set 和 Map 数据结构作用标准答案Set元素唯一不重复可用于数组去重Map键可以是任意类型对象 / 数组键值对存储遍历更方便代码示例javascript运行// 数组去重 const arr [1,2,2,3,3,4]; const newArr [...new Set(arr)]; console.log(newArr); // [1,2,3,4]五、Vue2 基础初级面试题1. v-if 和 v-show 区别标准答案原理v-if 是销毁 / 重建 DOMv-show 是通过display 控制显示隐藏性能频繁切换用 v-show一次性条件判断用 v-ifv-if 支持 template 标签v-show 不支持2. Vue 生命周期常用钩子及作用标准答案created实例创建完成可访问数据无法操作 DOMmountedDOM 挂载完成可发起网络请求、操作 DOMupdated数据更新后视图重新渲染完成destroyed实例销毁清除定时器、解绑事件3. Vue 组件通信常用方式初级必考标准答案父子通信父传子 props子传父 $emit兄弟通信EventBus 事件总线跨层级provide/inject、Vuex六、浏览器与网络基础1. 从输入网址到页面展示全过程标准答案DNS 域名解析域名解析为服务器 IPTCP 三次握手建立连接发送 HTTP 请求服务器返回响应HTML/CSS/JS 资源浏览器解析 HTML 生成 DOM 树解析 CSS 生成 CSSOM 树生成渲染树 → 布局 → 绘制 → 页面展示2. 本地存储 localStorage、sessionStorage、Cookie 区别标准答案存储周期Cookie 可设置过期时间localStorage 永久存储sessionStorage 会话关闭失效存储大小Cookie 4KB 左右WebStorage 5MB 左右请求携带Cookie 每次请求自动携带localStorage/sessionStorage 不参与网络请求操作易用性WebStorage API 更简洁Cookie 需手动封装七、前端工程化基础1. 简述 Webpack 的作用标准答案Webpack 是前端模块打包工具可将 JS、CSS、图片、字体等所有资源视为模块打包压缩、编译 ES6、处理兼容性、代码分割、自动化构建提升开发与部署效率。2. 什么是跨域跨域常见解决方案标准答案跨域协议、域名、端口任一不同即为跨域浏览器同源策略限制。常用解决方式后端设置 CORS 跨域前端配置代理VueCLI / Vite 代理JSONP仅支持 GET 请求老式方案
