2024最新前端面试八股文【基础篇293题】
⼀、HTML、HTTP、web综合问题
1 前端需要注意哪些SEO
2 <img> 的 title 和 alt 有什么区别
3 HTTP的⼏种请求⽅法⽤途
4 从浏览器地址栏输⼊url到显示⻚⾯的步骤
5 如何进⾏⽹站性能优化
6 HTTP状态码及其含义
7 语义化的理解
8 介绍⼀下你对浏览器内核的理解
9 html5有哪些新特性、移除了那些元素？
10 HTML5 的离线储存怎么使⽤，⼯作原理能不能解释⼀下？
11 浏览器是怎么对 HTML5 的离线储存资源进⾏管理和加载的呢
12 请描述⼀下 cookies ， sessionStorage 和 localStorage 的区别？
13 iframe有那些缺点？
14 WEB标准以及W3C标准是什么?
15 xhtml和html有什么区别?
16 Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?
17 ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元
素和块级元素有什么区别？
18 HTML全局属性(global attribute)有哪些
19 Canvas和SVG有什么区别？
20 HTML5 为什么只需要写 <!DOCTYPE HTML>
21 如何在⻚⾯上实现⼀个圆形的可点击区域？
22 ⽹⻚验证码是⼲嘛的，是为了解决什么安全问题
23 viewport
24 渲染优化
25 meta viewport相关
26 你做的⻚⾯在哪些流览器测试过？这些浏览器的内核分别是什么?
27 div+css的布局较table布局有什么优点
28 a：img的alt与title有何异同？b：strong与em的异同？
29 你能描述⼀下渐进增强和优雅降级之间的不同吗
30 为什么利⽤多个域名来存储⽹站资源会更有效？
31 简述⼀下src与href的区别
32 知道的⽹⻚制作会⽤到的图⽚格式有哪些？
33 在css/js代码上线之后开发⼈员经常会优化性能，从⽤户刷新⽹⻚
开始，⼀次js请求⼀般情况下有哪些地⽅会有缓存处理？
33 ⼀个⻚⾯上有⼤量的图⽚（⼤型电商⽹站），加载很慢，你有哪
些⽅法优化这些图⽚的加载，给⽤户更好的体验。
34 常⻅排序算法的时间复杂度,空间复杂度
35 web开发中会话跟踪的⽅法有哪些
36 HTTP request报⽂结构是怎样的
37 HTTP response报⽂结构是怎样的
⼆、CSS部分
1 css sprite是什么,有什么优缺点
2 display: none; 与 visibility: hidden; 的区别
3 link 与 @import 的区别
4 什么是FOUC?如何避免
5 如何创建块级格式化上下⽂(block formatting context),BFC有什么⽤
6 display、float、position的关系
7 清除浮动的⼏种⽅式，各⾃的优缺点
8 为什么要初始化CSS样式?
9 css3有哪些新特性
10 display有哪些值？说明他们的作⽤
11 介绍⼀下标准的CSS的盒⼦模型？低版本IE的盒⼦模型有什么不同
的？
12 CSS优先级算法如何计算？
13 对BFC规范的理解？
14 谈谈浮动和清除浮动
15 position的值， relative和absolute定位原点是
16 display:inline-block 什么时候不会显示间隙？(携程)
17 PNG\GIF\JPG的区别及如何选
18 ⾏内元素float:left后是否变为块级元素？
19 在⽹⻚中的应该使⽤奇数还是偶数的字体？为什么呢？
20 ::before 和 :after中双冒号和单冒号 有什么区别？解释⼀下这2个
伪元素的作⽤
21 如果需要⼿动写动画，你认为最⼩时间间隔是多久，为什么？（阿
⾥）
22 CSS合并⽅法
23 CSS不同选择器的权重(CSS层叠的规则)
24 列出你所知道可以改变⻚⾯布局的属性
25 CSS在性能优化⽅⾯的实践
26 CSS3动画（简单动画的实现，如旋转等 ）
27 base64的原理及优缺点
28 ⼏种常⻅的CSS布局
29 stylus/sass/less区别
30 postcss的作⽤
31 css样式（选择器）的优先级
32 ⾃定义字体的使⽤场景
33 如何美化CheckBox
34 伪类和伪元素的区别
35 base64 的使⽤
36 ⾃适应布局
37 请⽤CSS写⼀个简单的幻灯⽚效果⻚⾯
38 什么是外边距重叠？重叠的结果是什么？
39 rgba()和opacity的透明效果有什么不同？
40 css中可以让⽂字在垂直和⽔平⽅向上重叠的两个属性是什么？
41 如何垂直居中⼀个浮动元素？
42 px和em的区别
43 Sass、LESS是什么？⼤家为什么要使⽤他们？
44 知道css有个content属性吗？有什么作⽤？有什么应⽤？
45 ⽔平居中的⽅法
46 垂直居中的⽅法
47 如何使⽤CSS实现硬件加速？
48 重绘和回流（重排）是什么，如何避免？
49 说⼀说css3的animation
50 左边宽度固定，右边⾃适应
51 两种以上⽅式实现已知或者未知宽度的垂直⽔平居中
52 如何实现⼩于12px的字体效果
三、JavaScript
1 闭包
2 说说你对作⽤域链的理解
3 JavaScript原型，原型链 ? 有什么特点？
4 请解释什么是事件代理
5 Javascript如何实现继承？
6 谈谈This对象的理解
7 事件模型
8 new操作符具体干了什么呢?
9 Ajax原理
10 如何解决跨域问题?
11 模块化开发怎么做？
12 异步加载JS的⽅式有哪些？
13 那些操作会造成内存泄漏?
14 XML和JSON的区别？
15 谈谈你对webpack的看法
16 说说你对AMD和Commonjs的理解
17 常⻅web安全及防护原理
18 ⽤过哪些设计模式？
19 为什么要有同源限制？
21 javascript有哪些⽅法定义对象
22 常见兼容性问题?
23 说说你对promise的了解
24 你觉得jQuery源码有哪些写的好的地方
25 vue、react、angular
26 Node的应用场景
27 谈谈你对AMD、CMD的理解
28 那些操作会造成内存泄漏
29 web开发中会话跟踪的⽅法有哪些
30 介绍js的基本数据类型
31 介绍js有哪些内置对象
32 说几条写JavaScript的基本规范
33 JavaScript有⼏种类型的值
34 javascript创建对象的⼏种⽅式
35 eval是做什么的
36 null，undefined 的区别
37 ["1","2","3"].map(parselnt)答案是多少
38 javascript 代码中的"use strict";是什么意思
39 JSON 的了解
40 js延迟加载的⽅式有哪些
41 同步和异步的区别
42 渐进增强和优雅降级
43 defer和async
44 说说严格模式的限制
45 attribute和property的区别是什么
46 谈谈你对ES6的理解
47 ECMAScript6 怎么写class么
48 什么是⾯向对象编程及⾯向过程编程，它们的异同和优缺点
49 ⾯向对象编程思想
50 对web标准、可⽤性、可访问性的理解
51如何通过JS判断一个数组
52 谈-谈let与var的区别
53 map与forEach的区别
54 谈一谈你理解的函数式编程
55 谈⼀谈箭头函数与普通函数的区别？
56 谈⼀谈函数中this的指向
57 异步编程的实现⽅式
58 对原⽣Javascript了解程度
59 Js动画与CSS动画区别及相应实现
60 JS 数组和对象的遍历⽅式，以及⼏种⽅式的⽐较
61 gulp是什么
62 说⼀下Vue的双向绑定数据的原理
63 事件的各个阶段
64 let var const
65 快速的让⼀个数组乱序
66 如何渲染⼏万条数据并不卡住界⾯
67 希望获取到⻚⾯中所有的checkbox怎么做？
68 怎样添加、移除、移动、复制、创建和查找节点
69 正则表达式
70 Javascript中callee和caller的作⽤？
71 window.onload和$(document).ready
72 addEventListener()和attachEvent()的区别
73 获取⻚⾯所有的checkbox
74 数组去重⽅法总结
75 （设计题）想实现⼀个对⻚⾯某个节点的拖曳？如何做？（使⽤
原⽣JS）
76 Javascript全局函数和全局变量
77 使⽤js实现⼀个持续的动画效果
78 封装⼀个函数，参数是定时器的时间，.then执⾏回调函数
79 怎么判断两个对象相等？
80 项⽬做过哪些性能优化？
81 浏览器缓存
82 WebSocket
83 尽可能多的说出你对 Electron 的理解
84 深浅拷⻉
85 防抖/节流
86 谈谈变量提升？
87 什么是单线程，和异步的关系
88 是否⽤过 jQuery 的 Deferred
89 前端⾯试之hybrid
90 前端⾯试之组件化
91 前端⾯试之MVVM浅析
92 实现效果，点击容器内的图标，图标边框变成border 1px solid
red，点击空⽩处重置
93 请简单实现双向数据绑定
94 实现Storage，使得该对象为单例，并对 mvvm localStorage 进⾏封装设置值setItem(key,value)和getItem(key)
95 说说event loop
96 说说事件流
97 为什么 canvas 的图⽚为什么过有跨域问题
98 我现在有⼀个 canvas ，上⾯随机布着⼀些⿊块，请实现⽅法，计
算canvas上有多少个⿊块
99 请⼿写实现⼀个promise
100 说说从输⼊URL到看到⻚⾯发⽣的全过程，越详细越好
101 描述⼀下 this
102 说⼀下浏览器的缓存机制
103 现在要你完成⼀个Dialog组件，说说你设计的思路？它应该有什
么功能？
104 caller 和 callee 的区别
105 ajax、axios、fetch区别
四、jQuery
1 你觉得jQuery或zepto源码有哪些写的好的地⽅
2 jQuery 的实现原理
3 jQuery.fn 的 init ⽅法返回的 this 指的是什么对象
4 jQuery.extend 与 jQuery.fn.extend 的区别
5 jQuery 的属性拷⻉(extend)的实现原理是什么，如何实现深拷贝
6 jQuery 的队列是如何实现的
7 jQuery 中的 bind(), live(), delegate(), on()的区别
8 是否知道⾃定义事件
9 jQuery 通过哪个⽅法和 Sizzle 选择器结合的
10 jQuery 中如何将数组转化为 JSON 字符串，然后再转化回来
11 jQuery ⼀个对象可以同时绑定多个事件，这是如何实现的
12 针对 jQuery 的优化⽅法
13 jQuery 的 slideUp 动画，当⿏标快速连续触发, 动画会滞后反复执
⾏，该如何处理呢
14 jQuery UI 如何⾃定义组件
15 jQuery 与 jQuery UI、jQuery Mobile 区别
16 jQuery 和 Zepto 的区别？ 各⾃的使⽤场景
17 jQuery对象的特点
五、Bootstrap
1 什么是Bootstrap？以及为什么要使⽤Bootstrap？
2 使⽤Bootstrap时，要声明的⽂档类型是什么？以及为什么要这样声
明？
3 什么是Bootstrap⽹格系统
4 Bootstrap ⽹格系统（Grid System）的⼯作原理
5 对于各类尺⼨的设备，Bootstrap设置的class前缀分别是什么
6 Bootstrap ⽹格系统列与列之间的间隙宽度是多少
7 如果需要在⼀个标题的旁边创建副标题，可以怎样操作
8 ⽤Bootstrap，如何设置⽂字的对⻬方式？
9 Bootstrap如何设置响应式表格？
10 使⽤Bootstrap创建垂直表单的基本步骤？
11 使⽤Bootstrap创建⽔平表单的基本步骤?
12 使⽤Bootstrap如何创建表单控件的帮助⽂本?
13 使⽤Bootstrap激活或禁⽤按钮要如何操作?
14 Bootstrap有哪些关于的class?
15 Bootstrap中有关元素浮动及清除浮动的class？
16 除了屏幕阅读器外，其他设备上隐藏元素的class？
17 Bootstrap如何制作下拉菜单？
18 Bootstrap如何制作按钮组？以及⽔平按钮组和垂直按钮组的优先
级？
19 Bootstrap如何设置按钮的下拉菜单？
20 Bootstrap中的输⼊框组如何制作？
21 Bootstrap中的导航都有哪些？
22 Bootstrap中设置分页的class?
23 Bootstrap中显示标签的class?
24 Bootstrap中如何制作徽章？
25 Bootstrap中超⼤屏幕的作⽤是什么？
六、微信⼩程序
1 微信⼩程序有⼏个⽂件
2 微信⼩程序怎样跟事件传值
3 ⼩程序的 wxss 和 css 有哪些不⼀样的地⽅？
4 ⼩程序关联微信公众号如何确定⽤户的唯⼀性
5 微信⼩程序与vue区别
七、webpack相关
1 打包体积 优化思路
2 打包效率
3 Loader
4 说⼀下webpack的⼀些plugin，怎么使⽤webpack对项⽬进⾏优化
⼋、编程题
1 写⼀个通⽤的事件侦听器函数
2 如何判断⼀个对象是否为数组
3 冒泡排序
4 快速排序
5 编写⼀个⽅法 求⼀个字符串的字节⻓度
6 bind的⽤法，以及如何实现bind的函数和需要注意的点
7 实现⼀个函数clone
8 下⾯这个ul，如何点击每⼀列的时候alert其index
9 定义⼀个log⽅法，让它可以代理console.log的⽅法
10 输出今天的⽇期
11 ⽤js实现随机选取10–100之间的10个数字，存⼊⼀个数组，并排序
12 写⼀段JS程序提取URL中的各个GET参数
13写-个function，清除字符串前后的空格
14 实现每隔⼀秒钟输出1,2,3...数字
15 实现⼀个函数，判断输⼊是不是回⽂字符串
16、数组扁平化处理
九、其他
1 负载均衡
2 CDN
3 内存泄漏
4 babel原理
5 js⾃定义事件
6 前后端路由差别
⼗、综合
1 谈谈你对重构的理解
2 什么样的前端代码是好的
3 对前端⼯程师这个职位是怎么样理解的？它的前景会怎么样
4 你觉得前端⼯程的价值体现在哪
5 平时如何管理你的项目
6 组件封装
⼗⼀、⼀些常⻅问题
相关文章：
2024最新前端面试八股文【基础篇293题】
⼀、HTML、HTTP、web综合问题 1 前端需要注意哪些SEO 2 <img> 的 title 和 alt 有什么区别 3 HTTP的⼏种请求⽅法⽤途 4 从浏览器地址栏输⼊url到显示⻚⾯的步骤 5 如何进⾏⽹站性能优化 6 HTTP状态码及其含义 7 语义化的理解 8 介绍⼀下你对浏览器内核的理解 9 …...
【NumPy】关于numpy.median()函数，看这一篇文章就够了
🧑 博主简介：阿里巴巴嵌入式技术专家，深耕嵌入式人工智能领域，具备多年的嵌入式硬件产品研发管理经验。 📒 博客介绍：分享嵌入式开发领域的相关知识、经验、思考和感悟，欢迎关注。提供嵌入式方向…...
起保停电路工作原理
一、电路组成 起保停电路由电源保护设备（空气开关）、交流接触器、启动按钮、停止按钮和用电设备组成。 起保停电路的组成部分通常可分为四个部分： 保护部分：（空气开关）在电流或电压超出一定范围时自动切断…...
【Vue】Vue2使用ElementUI
目录 Element UI介绍特点Vue2使用Element安装引入ElementUI组件库 使用ElementUI用户注册列表展示其他 mint-ui介绍特点安装组件引入组件Mint-ui相关组件 Element UI 介绍 官网(基于 Vue 2.x ):https://element.eleme.cn/#/zh-CN ElementUI 是一个基于 Vue.js 的桌面端组件库…...
设计模式在芯片验证中的应用——模板方法
一、模板方法 模板方法(Template Method)设计模式是一种行为设计模式， 它在父类中定义了一个功能的框架， 允许子类在不修改结构的情况下重写功能的特定步骤。也就是模板方法定义了一组有序执行的操作，将一些步骤的实现留给子类，同…...
Webpack Bundle Analyzer：深入分析与优化你的包
Webpack Bundle Analyzer是一个用于可视化的工具，它可以帮助你分析Webpack打包后的输出文件，查看哪些模块占用了最多的空间，从而进行优化。 2500G计算机入门到高级架构师开发资料超级大礼包免费送！ 首先，你需要安装W…...
Java后端开发学习历程
1、JavaWeb------------------------>19天 2、SSMSpringBoot------------->12天 3、瑞吉外卖项目------------------>15天 4、JavaSE-------------------------->25天 总耗时71天（2024.03.11——2024.05.26两个半月），Java后端…...
CentOS 7 socat命令端口转发
场景 开发排查问题需配置远程调试，但配置调试的服务器不支持外网访问，于是就考虑到用端口转发的方式让开发进行远程调试，转发工具比如有：rinetd等等，意外看到使用socat做转发更简单方便，下面就记录一下 命令简介 socat 是一个功能强大的网络工具，可以在两个连接的数据…...
vue全局修改设置滚动条样式
vue全局修改设置滚动条样式 具体代码： ::-webkit-scrollbar{ /*滚动条整体样式*/width: 6px; /*高宽分别对应横竖滚动条的尺寸*/height: 1px; } ::-webkit-scrollbar-thumb{ /*滚动条里面小方块*/border-radius: 5px;background: #cfcbcb; } ::-webkit-scrollbar-…...
✨聚梦AI绘图插件-for photoshop（基于ComfyUI） 内测版V0.1发布
🎈背景 photoshop本身是有AI生成能力的，不过限于种种原因，国内使用很不方便。 photoshop也是有AI插件的，不过大多安装起来比较复杂，或者，干脆就会收费。 所以我们做了一个免费的AI插件，期望能…...
java “错误：编码GBK 的不可映射字符”
环境：JDK-17 本机编码：utf-8 代码编码：GBK 错误：java “错误：编码GBK 的不可映射字符” 解决1：记事本打开java源文件，另存为选择ANSI编码 解决2：复制代码再将编码格式改为utf-8,…...
前端 JS 经典：Web 性能指标
什么是性能指标：Web Performance Metrics 翻译成 Web 性能指标，一般和时间有关系，在短时间内做更多有意义的事情。 一个站点表现得好与不好，标准在于用户体验，而用户体验好不好，有一套 RAIL 模型来衡量。这…...
SVN创建分支，分支合并，切换分支。通俗易懂
1、首先在svnbucket.com远程仓库上创建项目，这里我创建了个测试demo： 2、先把svn仓库的项目检出到自己的文件夹，我这里是demo001文件夹，此时并没有创建truck, branches, tags这三个目录： 3、 在demo001文件夹里新建tru…...
【编译原理复习笔记】中间语言
中间语言 中间语言的特点和作用 （1）独立于机器 （2）复杂性介于源语言和目标语言之间 中间语言可以使编译程序的结构在逻辑上更为简单明确 常用的中间语言 后缀式 图表示：抽象语法树，有向无环图 三地址代…...
linux笔记6--shell相关
文章目录 1. 查看当前的shell类型2. ps -f命令3. 父子shell4. 分号在命令里的作用问题：环境变量echo： 5. sleep和jobssleep:jobs:例子：&: 6. 外部命令和内建命令图解外部命令type命令 7. history命令8. alias命令9. 推荐 1. 查看当前的sh…...
链表-线性表的链式表示
链表-线性表的链式表示 #mermaid-svg-ozpXrKnNCyYdqHvN {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ozpXrKnNCyYdqHvN .error-icon{fill:#552222;}#mermaid-svg-ozpXrKnNCyYdqHvN .error-text{fill:#552222;stro…...
GNU/Linux - 时区设置
CST China Standard Time 北京时间/中国标准时间 在时区划分上，属东八区，比协调世界时早 8 小时，记为 UTC8 GMT Greenwich Mean Time 格林威治标准时间 是指位于英国伦敦郊区的格林尼治天文台的标准时间，因为本初子午线被定…...
红队攻防渗透技术实战流程：云安全之云原生安全：内核漏洞和版本漏洞
红队云攻防实战 1. 云原生安全 -Docker安全-容器逃逸-版本漏洞1.1 容器逃逸-版本漏洞-runC容器逃逸1.2 实战案例-版本漏洞-runC容器逃逸1.3 容器逃逸-版本漏洞-containerd逃逸1.4 实战案例-版本漏洞-containerd逃逸1.5 Docker安全-容器逃逸-CDK自动化1.6 Docker安全-容器逃逸-c…...
spring状态机实战
一、什么是状态机 状态机是有限状态自动机的简称，是现实事物运行规则抽象而成的一个数学模型，是一种概念性机器，它能采取某种操作来响应一个外部事件。这种操作不仅能取决于接收到的事件，还能取决于各个事件的相对发生顺序。状态…...
Ubuntu系统上安装NVIDIA驱动【笔记】
Ubuntu上安装NVIDIA驱动，您可以按照以下步骤操作： 首先，您需要配置软件源（根据情况配置，否则影响更新和下载速度）。 接下来，您可以按照上一条回答中的步骤来安装新的NVIDIA驱动。首先ÿ…...
Linux应用开发之网络套接字编程(实例篇)
服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件，常用于在两个集合之间进行数据转移，如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model：绑定右侧列表的值&…...
vscode（仍待补充）
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh？ debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...
CMake基础：构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
HTML 列表、表格、表单
1 列表标签 作用：布局内容排列整齐的区域 列表分类：无序列表、有序列表、定义列表。 例如： 1.1 无序列表 标签：ul 嵌套 li，ul是无序列表，li是列表条目。 注意事项： ul 标签里面只能包裹 li…...
《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代，情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现，消费者对内容的“有感”程度，正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
数据链路层的主要功能是什么
数据链路层（OSI模型第2层）的核心功能是在相邻网络节点（如交换机、主机）间提供可靠的数据帧传输服务，主要职责包括： 🔑 核心功能详解： 帧封装与解封装 封装： 将网络层下发…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式： 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
QT： `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中，将 long long 类型转换为 QString 可以通过以下两种常用方法实现： 方法 1：使用 QString::number() 直接调用 QString 的静态方法 number()，将数值转换为字符串： long long value 1234567890123456789LL; …...
select、poll、epoll 与 Reactor 模式
在高并发网络编程领域，高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表，以及基于它们实现的 Reactor 模式，为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。 一、I…...