超全！超详细！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 年大厂前端面试手册