超全！超详细！2023大 厂 前端面试题手册
HTML、CSS、浏览器 相关 ................................................................... 1
1.网络中使用最多的图片格式有哪些 ............................................................................................. 1
2. 请简述 css 盒子模型 ................................................................................................................... 1
3.视频/音频标签的使用 ................................................................................................................... 2
4.HTML5 新增的内容有哪些 .......................................................................................................... 2
5.Html5 新增的语义化标签有哪些 ............................................................................................... 3
6.Css3 新增的特性 ............................................................................................................................ 3
7.清除浮动的方式有哪些？请说出各自的优点 ............................................................................. 5
8.定位的属性值有何区别 ................................................................................................................. 6
9.子元素如何在父元素中居中 ......................................................................................................... 6
10.Border-box 与 content-box 的区别 ....................................................................................... 7
11.元素垂直居中 ............................................................................................................................... 8
12. 如何让 chrome 浏览器显示小于 12px 的文字 ..................................................................... 8
13.Css 选择器有哪些，那些属性可以继承，优先级如何计算？Css3 新增的伪类有哪些 ..... 8
14.网页中有大量图片加载很慢 你有什么办法进行优化？ ...................................................... 10
15.行内元素/块级元素有哪些？ ................................................................................................... 10
16.浏览器的标准模式和怪异模式区别？ .................................................................................... 11
17.Margin 和 padding 在什么场合下使用 ................................................................................ 12
- 1 - 18.弹性盒子布局属性有那些请简述? .......................................................................................... 12
19.怎么实现标签的禁用 ................................................................................................................ 12
20.Flex 布局原理 ............................................................................................................................ 12
21. Px，rem，em 的区别 ............................................................................................................ 13
22.网页的三层结构有哪些 ............................................................................................................ 13
25.常见的兼容性一阶段内容中记几个 ........................................................................................ 13
26.垂直与水平居中的方式 ............................................................................................................ 14
27.三栏布局方式两边固定中间自适应 ........................................................................................ 14
28.Doctype 作用 ............................................................................................................................ 14
29.说一下 HTML5 drag api ........................................................................................................ 15
30 对 HTML 语义化标签的理解 ................................................................................................. 15
31.web 性能优化 ........................................................................................................................... 15
32.浏览器缓存机制 ......................................................................................................................... 15
33.浏览器输入网址到页面渲染全过程 ........................................................................................ 16
34.画一条 0.5px 的线 .................................................................................................................. 16
35.关于 JS 动画和 css3 动画的差异性 .................................................................................... 17
36.双边距重叠问题（外边距折叠） ............................................................................................ 17
37.浮动清除 ..................................................................................................................................... 18
38.CSS 选择器有哪些，优先级呢 ............................................................................................. 18
39.css 动画如何实现 ..................................................................................................................... 19
40.如何实现元素的垂直居中 ........................................................................................................ 19
41.CSS3 中对溢出的处理 ............................................................................................................. 20
- 2 - - 3 -
42.对 CSS 的新属性有了解过的吗？ ......................................................................................... 20
43.overflow 的原理 ...................................................................................................................... 20
44.css 定位 ..................................................................................................................................... 21
Javascript 相关 ................................................................................................................... 23
1.Js 基本数据类型有哪些 .............................................................................................................. 23
2.Ajax 如何使用 .............................................................................................................................. 23
3.如何判断一个数据是 NaN ......................................................................................................... 24
5.闭包是什么？有什么特性？对页面会有什么影响 .................................................................. 24
6. Js 中常见的内存泄漏： ............................................................................................................. 25
7.事件委托是什么？如何确定事件源（
Event.target 谁调用谁就是事件源） .................... 25
8.什么是事件冒泡？ ....................................................................................................................... 26
9.本地存储与 cookie 的区别 ........................................................................................................ 26
10.ES6 新特性 ................................................................................................................................. 28
11.Let 与 var 与 const 的区别 ..................................................................................................... 28
12.数组方法有哪些请简述 ............................................................................................................ 28
13.Json 如何新增/删除键值对 ..................................................................................................... 29
14.什么是面向对象请简述 ............................................................................................................ 29
15.普通函数和构造函数的区别 .................................................................................................... 30
16.请简述原型/原型链/（原型）继承 ......................................................................................... 30
17.Promise 的理解 ....................................................................................................................... 32
18.我们用 Promise 来解决什么问题？ ....................................................................................... 32
19.请简述 async 的用法 ................................................................................................................ 33 20.. 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？ ................. 33
21.get 请求传参长度的误区 ........................................................................................................ 34
22.补充 get 和 post 请求在缓存方面的区别 ......................................................................... 34
23.说一下闭包 ................................................................................................................................. 35
24.说说前端中的事件流 ................................................................................................................ 35
25.说一下事件委托 ......................................................................................................................... 36
26.JS 的 new 操作符做了哪些事情 .......................................................................................... 36
27.改变函数内部 this 指针的指向函数（bind，apply，call 的区别） ............................. 36
28.JS 的 各 种 位 置 ， 比 clientHeight,scrollHeight,offsetHeight , 以 及 scrollTop,
offsetTop,clientTop 的区别？ .................................................................................................... 37
29.JS 拖拽功能的实现 ................................................................................................................... 37
30.JS 中的垃圾回收机制 ............................................................................................................... 37
31.JS 监听对象属性的改变 ........................................................................................................... 39
32.自己实现一个 bind 函数 ........................................................................................................ 40
33.JS 怎么控制一次加载一张图片，加载完后再加载下一张 .................................................. 41
34.实现 JS 中所有对象的深度克隆（包装对象，Date 对象，正则对象） ......................... 43
35. 来讲讲 JS 的闭包吧 ............................................................................................................... 47
36. 能来讲讲 JS 的语言特性吗 .................................................................................................. 48
37. JS 的全排列 .............................................................................................................................. 48
jQuery 相关 ............................................................................................................................ 49
1.Css 预处理 sass less 是什么？为什么使用他们 ..................................................................... 49
2.Js 中.call()与.apply()区别 .......................................................................................................... 50
- 4 - 3.为什么会造成跨域/请简述同源策略 ......................................................................................... 50
4.请输出三种减少页面加载时间的方式 ....................................................................................... 51
5.This 指向 ...................................................................................................................................... 52
6.什么是 jsonp 工作原理是什么？他为什么不是真正的 ajax ................................................. 53
7.请掌握 2 种以上数组去重的方式 .............................................................................................. 54
8.深浅拷贝是什么如何实现？ ....................................................................................................... 54
9.为什么 js 是弱类型语言 .............................................................................................................. 55
10.怎么转换 less 为 css ................................................................................................................. 55
11.echarts 使用最多的是什么 ..................................................................................................... 55
12.For 循环与 map 循环有什么区别 ........................................................................................... 56
13.请写出一个简单的类与继承 .................................................................................................... 56
14.同步与异步的区别/阻塞与非阻塞区别 .................................................................................. 57
15.重绘和回流是什么 .................................................................................................................... 57
16.http 是什么？有什么特点 ....................................................................................................... 58
17.HTTP 协议和 HTTPS 区别 ....................................................................................................... 58
18.原型和继承，prototype，call 和 apply 继承的区别（第一个参数是相同的，第二个的
区别在哪） ...................................................................................................................................... 59
19.箭头函数与普通函数的区别 .................................................................................................... 59
20.什么是 js 内存泄露？ ................................................................................................................ 60
21.你如何对网站的文件和资源进行优化？ ................................................................................ 60
22.请简述 ajax 的执行过程 以及常见的 HTTP 状态码 ............................................................ 61
23.预加载和懒加载的区别，预加载在什么时间加载合适 ........................................................ 62
- 5 - 24.Jquery 选择器有哪些 ............................................................................................................... 62
25.Jquery 插入节点的方法 ........................................................................................................... 66
26.Js 的函数节流和函数防抖的区别 ............................................................................................ 67
27.Get 和 post 不同 ...................................................................................................................... 68
28.什么是 csrf 攻击 ........................................................................................................................ 68
29.什么时候用深拷贝 /浅拷贝 ..................................................................................................... 68
Vue 相关 .................................................................................................................................... 69
1.Vue 的核心是什么 ....................................................................................................................... 69
2.请简述你对 vue 的理解 .............................................................................................................. 69
3.请简述 vue 的单向数据流 .......................................................................................................... 70
4. Vue 常用的修饰符有哪些 ......................................................................................................... 70
5.v-text 与{{}}与 v-html 区别 ....................................................................................................... 71
6.v-on 可以绑定多个方法吗 ......................................................................................................... 72
7.Vue 循环的 key 作用 .................................................................................................................. 72
8.什么是计算属性 ........................................................................................................................... 72
9. Vue 单页面的优缺点 ................................................................................................................. 73
10.Vuex 是什么？怎么使用？在那种场景下使用 ...................................................................... 73
11.Vue 中路由跳转方式（声明式/编程式） .............................................................................. 74
12.vue 跨域的解决方式 ................................................................................................................. 75
13.Vue 的生命周期请简述 ............................................................................................................ 75
14.Vue 生命周期的作用 ................................................................................................................ 75
15.DOM 渲染在那个生命周期阶段内完成 ................................................................................. 76
- 6 - 16.Vue 路由的实现 ........................................................................................................................ 76
17.Vue 路由模式 hash 和 history，简单讲一下 ....................................................................... 77
18.Vue 路由传参的两种方式，params 和 query 方式与区别 ............................................... 77
19.Vue 数据绑定的几种方式 ........................................................................................................ 78
20.Vue 注册一个全局组件 ............................................................................................................ 78
21.Vue 的路由钩子函数/路由守卫有哪些 .................................................................................. 78
22.Vue 中如何进行动态路由设置？有哪些方式？怎么获取传递过来的数据？ ................... 79
23.Elementui 中的常用组件有哪些？请简述你经常使用的 并且他们的属性有哪些？ ..... 79
24.Vue-cli 中如何自定义指令 ...................................................................................................... 80
25.Vue 中指令有哪些 .................................................................................................................... 80
26.Vue 如何定义一个过滤器 ........................................................................................................ 81
27.对 vue 中 keep-alive 的理解 ................................................................................................. 82
28.如何让组件中的 css 在当前组件生效 .................................................................................... 82
29.Vue 生命周期一共几个阶段 .................................................................................................... 82
30.Mvvm 与 mvc 的区别 .............................................................................................................. 83
31.Vue 组件中的 data 为什么是函数 ......................................................................................... 83
32.Vue 双向绑定的原理 ................................................................................................................ 84
33.Vue 中组件怎么传值 ................................................................................................................ 84
34.Bootstrap 的原理 ..................................................................................................................... 85
36.如果一个组件在多个项目中使用怎么办 ................................................................................ 85
37.槽口请简述 ................................................................................................................................. 85
38.Watch 请简述 ............................................................................................................................ 86
- 7 - - 8 -
39.Vant Ui 请简述下 ...................................................................................................................... 86
40.计算属性与 watch 区别 ........................................................................................................... 86
41.mvvm 框架是什么？它和其它框架（
jquery）的区别是什么？哪些场景适合？ ........... 86
42.Vue 首屏加载慢的原因，怎么解决的，白屏时间怎么检测，怎么解决白屏问题 ........... 87
43.Vue 双数据绑定过程中，这边儿数据改变了怎么通知另一边改变 ................................... 87
44.Vuex 流程 .................................................................................................................................. 88
45.Vuex 怎么请求异步数据 .......................................................................................................... 88
46.Vuex 中 action 如何提交给 mutation 的 ............................................................................. 88
47.Route 与 router 区别 .............................................................................................................. 89
49.vuex 的 State 特性是？ ........................................................................................................... 89
50.vuex 的 Getter 特性是？ ......................................................................................................... 89
51.vuex 的 Mutation 特性是？ ................................................................................................... 90
52.vuex 的 actions 特性是？ ....................................................................................................... 90
54.vuex 的优势 ............................................................................................................................... 90
55.Vue 路由懒加载（按需加载路由） ........................................................................................ 91
56.v-for 与 v-if 优先级 .................................................................................................................. 91
57.请写出饿了么 5 个组件 ............................................................................................................ 91
58.vue 在 created 和 mounted 这两个生命周期中请求数据有什么区别呢？ ............... 91
59.说说你对 proxy 的理解 .......................................................................................................... 92
60.Vue3.0 是如何变得更快的？（底层，源码） ..................................................................... 92
React 相关 ............................................................................................................................... 93
1.fetch VS ajax VS axios ............................................................................................................. 93 - 9 -
2.React 事件处理---修改 this 指向 ............................................................................................. 93
3.请简述你对 react 的理解 ........................................................................................................... 94
4.react 组件之间的数据传递 ........................................................................................................ 94
5.Vue 与 react 区别 ....................................................................................................................... 95
6.请简述虚拟 dom 与 diff 算法 ................................................................................................... 95
7.你对组件的理解 ........................................................................................................................... 96
8.调用 setState 之后发生了什么？ ........................................................................................... 96
9.react 生命周期函数 ................................................................................................................... 96
10.为什么虚拟 dom 会提高性能?(必考) ................................................................................... 97
11.(组件的)状态(state)和属性(props)之间有何不同 ................................................................ 97
12.shouldComponentUpdate 是做什么的 ............................................................................ 97
13.react diff 原理 .......................................................................................................................... 98
14.何为受控组件 ............................................................................................................................. 98
15.调用 super(props) 的目的是什么 ........................................................................................ 98
16.React 中构建组件的方式 ........................................................................................................ 99
17.简述 flux 思想 .......................................................................................................................... 99
18.React 项目用过什么脚手架？Mern? Yeoman? ................................................................. 99
19.应该在 React 组件的何处发起 Ajax 请求？ ................................................................... 100
20.何为高阶组件(higher order component)？ .................................................................... 100
小程序相关 ............................................................................................................................. 101
1.小程序的优势 ............................................................................................................................. 101
2.小程序的页面构成（
4 个文件） ............................................................................................. 101 3.小程序的生命周期 .................................................................................................................... 101
4.小程序如何请求数据 ................................................................................................................ 102
5.如何提高小程序的首屏加载时间 ............................................................................................ 102
6.请简述你经常使用的小程序的组件 ........................................................................................ 102
7.Wxss 与 css 的区别请简述 ...................................................................................................... 103
8.小程序如何实现响应式 ............................................................................................................ 103
9.怎么优化小程序 ......................................................................................................................... 103
10.小程序如何显示用户头像与用户名 ...................................................................................... 104
11.请谈谈小程序的双向绑定和 vue 的异同？ ......................................................................... 104
12.小程序中传参是怎么传的 ...................................................................................................... 105
13.和 vue 类比介绍 ..................................................................................................................... 105
14.说一下微信小程序的适配问题 .............................................................................................. 105
15.小程序页面间有哪些传递数据的方法？ .............................................................................. 105
16.你是怎么封装微信小程序的数据请求的 .............................................................................. 105
17.说一下微信小程序的适配问题 .............................................................................................. 105
18.小程序跳转页面的方式 .......................................................................................................... 105
19.微信小程序如何跳转到其他小程序 ...................................................................................... 105
20.小程序加载过慢的解决方式 .................................................................................................. 105
其他高频 .................................................................................................................................. 105
1.Typescript 是什么 请简述？ .................................................................................................. 105
2.Typescript 与 javascript 的优势？ ...................................................................................... 105
3.Webpack 与 gulp 区别 ........................................................................................................... 105
- 10 - 4.请简述 webpack 中的 loaders 与 plugin 的区别 ............................................................... 106
5.怎么提升页面性能？性能优化有哪些？ ................................................................................ 106
6.Node 使用来做什么的 ............................................................................................................. 106
7.说一下 webpack 的打包原理 ................................................................................................. 107
8.Commonjs ES6 模块区别？ ................................................................................................... 107
9.Git 如何使用/常用指令有哪些 ................................................................................................ 107
10.你们后台用的是什么技术 ...................................................................................................... 107
11.你的项目比较小为什么还是用 vue 全家桶 ......................................................................... 107
12.请简述你在项目中使用的 ui 框架 ........................................................................................ 107
13.什么是 cors ............................................................................................................................. 107
14.说一下对 websocked 的理解 ............................................................................................... 107
15.后台传递过来的数据是那些 .................................................................................................. 108
16.谈谈 Ajax，fetch，axios 的区别 ......................................................................................... 108
企业中的项目流程 ............................................................................................................. 108
1.WEB 前端项目开发流程 ........................................................................................................... 108
2.大公司和小公司开发的区别 .................................................................................................... 110
奇葩问题 .................................................................................................................................. 111
1.你们后端开发用的什么？ ........................................................................................................ 111
2.移动端如何刷新页面？ ............................................................................................................ 111
3.项目初始化构建流程 ................................................................................................................ 111
4.项目中自己觉得骄傲的地方？ ................................................................................................ 111
5.说说自己的缺点 ......................................................................................................................... 111
- 11 - 6.热部署是什么？ ......................................................................................................................... 111
7.用户有多少 ................................................................................................................................. 111
8 怎么调用接口（是怎么跟后台沟通的） ................................................................................ 111
9.单元格测试是怎么做的 ............................................................................................................ 111
10.开发环境，测试环境，上线环境的环境变量你们在开发中是如何处理的 ..................... 111
HTML 、 CSS 、浏览器 相关：
1.网络中使用最多的图片格式有哪些
JPEG,GIF,PNG,最流行的是 jpeg 格式，可以把文件压缩到最小 在 ps 以
jpeg 格式存储时，提供 11 级压缩级别
2. 请简述 css 盒子模型
一个 css 盒子从外到内可以分成四个部分：margin（外边距），border
（边框），padding（内边距），content（内容）。默认情况下，盒子的
width 和 height 属性只是设置 content（内容）的宽和高，
盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框
第 1 页 盒子真正的高应该是：内容高度+上下填充+上下边距+上下边框
3. 视频 / 音频标签的使用
视频：
视频标签属性：
src 需要播放的视频地址
width/height 设置播放视频的宽高，和 img 标签的宽高属性一样
autoplay 是否自动播放
controls 是否显示控制条
poster 没有播放之前显示的展位图片
loop 是否循环播放
perload 预加载视频（缓存）与 autoplay 相冲突，设置了 autoplay 属
性，perload 属性会失效。
muted 静音模式
音频: 音频属性和视频属性差不多，不过宽高和 poster 属性不能用
4.HTML5 新增的内容有哪些
新增语义化标签
第 2 页 第 3 页
新增表单类型
表单元素
表单属性
表单事件
多媒体标签
5.Html5 新增的语义化标签有哪些
语义化标签优点：1.提升可访问性 2.seo 3.结构清晰，利于维护
Header 页面头部 main 页面主要内容 footer 页面底部
Nav 导航栏 aside 侧边栏 article 加载页面一块独立内容
Section 相 当 于 div
figure 加 载 独 立 内 容 （ 上 图 下 字 ）
figcaption figure 的标题
Hgroup 标题组合标签 mark 高亮显示 dialog 加载对话框标签（必须
配合 open 属性）
Embed 加载插件的标签 video 加载视频 audio 加载音频（支持格式
ogg，mp3，wav）
6.Css3 新增的特性
边框：
border-radius 添加圆角边框
border-shadow：给框添加阴影 （水平位移，垂直位移，模糊半径，阴
影尺寸，阴影颜色，insetr（内/外部阴影））
border-image：设置边框图像
border-image-source 边框图片的路径 第 4 页
border-image-slice 图片边框向内偏移
border-image-width 图片边框的宽度
border-image-outset 边框图像区域超出边框的量
border-image-repeat 图像边框是否平铺（
repeat 平铺 round 铺满
stretch 拉伸）
背景：
Background-size 背景图片尺寸
Background-origin规定background-position属性相对于什么位置定
位
Background-clip 规定背景的绘制区域（padding-box，border-box，
content-box）
渐变：
Linear-gradient（）线性渐变
Radial-gradient（）径向渐变
文本效果：
Word-break：定义如何换行
Word-wrap：允许长的内容可以自动换行
Text-overflow：指定当文本溢出包含它的元素，应该干啥
Text-shadow：文字阴影（水平位移，垂直位移，模糊半径，阴影颜色）
转换：
Transform 应用于 2D3D 转换，可以将元素旋转，缩放，移动，倾斜
Transform-origin 可以更改元素转换的位置，（改变 xyz 轴）
Transform-style 指定嵌套元素怎么样在三位空间中呈现
2D 转换方法：
rotate 旋转 translate（
x，y）指定元素在二维空间的位移 scale（
n）
定义缩放转换
3D 转换方法：
Perspective（
n）为 3D 转换 translate rotate scale 过渡：
Transition-proprety 过渡属性名
Transition-duration 完成过渡效果需要花费的时间
Transition-timing-function 指定切换效果的速度
Transition-delay 指定什么时候开始切换效果
动画：animation
Animation-name 为@keyframes 动画名称
animation-duration 动画需要花费的时间
animation-timing-function 动画如何完成一个周期
animation-delay 动画启动前的延迟间隔
animation-iteration-count 动画播放次数
animation-direction 是否轮流反向播放动画
篇幅有限，查看更多详资料2023年大厂前端面试手册