前端大厂面试题

【实例截图】

【核心代码】

2021大 厂 前端面试题手册
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
- 2 -
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
- 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
- 4 -
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
- 5 -
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
- 6 -
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
- 7 -
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
- 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
- 10 -
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
- 11 -
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
- 12 -
6.热部署是什么？ ......................................................................................................................... 111
7.用户有多少 ................................................................................................................................. 111
8 怎么调用接口（是怎么跟后台沟通的） ................................................................................ 111
9.单元格测试是怎么做的 ............................................................................................................ 111
10.开发环境，测试环境，上线环境的环境变量你们在开发中是如何处理的 ..................... 111