【金九银十】2021年最新、最全、最实用的前端面试真题(附:pdf+电子书)

前言

2021年已经过去一半眼看着"金九银十"也快到来了，很多小伙伴都蠢蠢欲动想要刚给自己涨一波薪资；面试作为涨薪最直接最有效的方式，我们需要花费巨大的精力和时间来准备。除了自身的技术积累之外，掌握一定的面试技巧和熟悉最常见的面试题，一定会让我们如虎添翼。

面试题分享

HTML
1，你如何理解HTML结构的语义化
2，说说title和alt属性
3，Html5有哪些新特性、移除了哪些元素
4，Label的作用是什么?是怎么用的?
5，浏览器是怎么对Html5的离线储存资源进行管理和加载的呢
6，iframe有那些缺点?7，HTML W3C的标准
8,Doctype作用?严格模式与混杂模式如何区分?它们有何意义?
9，HTML全局属性(global attribute)有哪些
10，viewport的content属性作用
11，meta相关
12，div+css的布局较table布局有什么优点
13，简述一下src与href的区别
14，知道的网页制作会用到的图片格式有哪些
15，如何在 HTML5页面中嵌入音频与视频?

CSS
1，水平居中的方法
2，垂直居中的方法
3，link 与@import的区别
4，三列布局(中间固定两边自适应宽度)
5，BFC有什么用
6，清除浮动的几种方式
7，CSS3有哪些新特性
8，css3新增伪类–伪元素
9，为什么要初始化CSS样式
10，IE盒子模型、w3C盒子模型
11，请解释—下cSS3的Flexbox 3弹性盒布局模型)，以及适用场景
12，display:inline-block 什么时候不会显示间隙?
13，行内元素float:left后是否变为块级元素?
14，如果需要手动写动画，你认为最小时间间隔是多久，为什么?
15，displaytinline-block 什么时候会显示间隙?
16，CSS权重，计算规则
17，Sass、LESS是什么?大家为什么要使用他们?
18,stylus, sass, less区别
19, rgba(和opacity的透明效果有什么不同?
20，px和em的区别
21，使用css实现一个持续的动画效果
22，，重排和重绘
23，什么情况会触发重排和重绘?

JavaScript
1，说几条JavaScript的基本规范
2，闭包
3，变量对象
4，作用域
5，说说你对作用域链的理解
6，JavaScript原型，原型链?有什么特点?
7，什么是事件委托
8，类的创建
9，如何实现继承?
10，谈谈This对象的理解
11，事件模型
12,new操作符具体干了什么呢?
13，Ajax原理
14，Ajax解决浏览器缓存问题
15，如何解决跨域问题?
16，说说你对AMD和Commonjs的理解
17，js的7种基本数据类型
18，介绍js有哪些内置对象
19，JS有哪些方法定义对象
20，你觉得jQuery源码有哪些写的好的地方
21，null，undefined的区别
22，谈谈你对ES6的理解
23，面向对象编程思想
24，如何通过JS判断一个数组
25，异步编程的实现方式
26，对原生Javascript了解方向
27, sort快速打乱数组
28，数组去重操作
29，JS 原生拖拽节点
30，深拷贝、浅拷贝
31，节流防抖
32，变量提升
33，JS中的垃圾回收机制
34，如何理解前端模块化
35，js单线程
36，说说event loop
37，描述下this
38，ajax.axios、fetch区别

如果你需要这份完整版的面试笔记，可以点击这里直达领取方式。

浏览器
1，浏览器存储的方式有哪些
2，浏览器内核的理解
3，HTTP的请求方式场景
4，HTTP状态码
5，从浏览器地址栏输入URL后发生了什么?
6，请你谈谈Cookie的优缺点
7, cookies , sessionStorage和localStorage的区别
8，浏览器缓存
9，浏览器渲染的步骤
10，GET 和POST请求的区别
11，什么是reflow
12，什么时候会导致reflow发生呢?
13，减少reflow对性能的影响

性能优化
1，SEO优化
2，server优化
3，css优化
4，js方面
5，webpack优化点
6，加载优化:
7，页面渲染优化
8，图片优化
9，脚本优化
10，为什么利用多个域名来存储网站资源会更有效?

前端面试题总结

vue-cli工程

1、构建的vue-cli工程都到了哪些技术，它们的作用分别是什么?
2.vue-cli工程常用的npm命令有哪些?
3、请说出vue-cli工程中每个文件夹和文件的用处
4.、config文件夹下index.js 的对于工程开发环境和生产环境的配置
5、请你详细介绍一些package.json里面的配置

vue核心知识点
1、对于Vue是一套渐进式框架的理解
2.vue.js的两个核心是什么?
3、请问v-if 和v-show有什么区别
4.vue常用的修饰符
5.v-on可以监听多个方法吗?
6.vue中 key 值的作用
7.vue-cli工程升级vue版本
8、vue事件中如何使用event对象?
9、$nextTick的使用
10、Vue组件中data为什么必须是函数
11.v-for 与v-if的优先级
12、vue中子组件调用父组件的方法
13.vue中 keep-alive组件的作用
14、vue中如何编写可复用的组件?
15、什么是vue生命周期?
16、vue生命周期钩子函数有哪些?
17、vue如何监听键盘事件中的按键?
18、vue更新数组时触发视图更新的方法
19.vue中对象更改检测的注意事项
20、解决非工程化项目初始化页面闪动问题
21、 v-for产生的列表，实现active的切换
22、v-model语法糖的组件中的使用
23、Vue中自定义过滤器
24、vue等单页面应用及其优缺点
25、什么是vue的计算屈性?
26.vue-cli提供的几种脚手架模板
27.vue父组件如何向子组件中传递数据?
28、vue弹窗后如何禁止滚动条滚动?
29、计算属性的缓存和方法调用的区别
30、vue-cli中自定义指令的使用

vue-router
1.vue-router如何响应路由参数的变化?
2、完整的vue-router导航解析流程
3.vue-router有哪几种导航钩子（导航守卫)?
4、vue-router传递参数的几种方式
5. vue-router的动态路由匹配
6. vue-router如何定义嵌套路由?
7. 组件及其屈性
8.vue-router实现路由懒加载
9. vue-router路由的两种模式
10、history路由模式配置及后台配置

vuex
1、什么是vuex?
2、使用vuex的核心概念
3. vuex在vue-cli中的使用
4、在vue中使用vuex，修改state的值
5.vuex actions异步修改状态

http请求
1、Promise对象是什么?
2、axios、fetch与ajax有什么区别?
3、什么是JS的同源策略和跨域问题?
4、如何解决跨域问题?
5、axios有什么特点?

UI样式
1、.vue组件的scoped屈性的作用
2、如何让CSS只在当前组件中起作用?
3.vue中常用的UI组件库
4、如何适配移动端?【经典】
5、移动端媒体查询
6. vue内容垂直和水平居中
7.vue-cli引入图片的方法
8、移动端常见样式问题
9、文本超出隐藏

常用功能
1、vue中如何实现tab切换功能?
2.、vue中keep-alive实现标签页组件缓存
3.vue中实现页面从右往左侧滑入效果
4、vue中父子组件如何相互调用方法?
5.vue中央事件总线的使用

MVVM设计模式
1、MVC.MVP与MVVM模式
2.MVC.MVP与MVVM的区别
3、MVVM的实现原理
4、Object.defineProperty()方法
5、ES6中定义的类和对象
6、JS中的文档碎片
7、解构赋值
8.Array.from
9，Array.reduce()
10、递归的使用
11、Obj.keys0与Obj.defineProperty
12、发布-订阅模式
13、vue项目优化，缩短首屏加裁时间

96道经典面试题

1，一些开放性题目(自我介绍、对前端看法之类)
2，什么是函数柯里化?
3，创建对象有几种方法?
4，怎样通过ES5及ES6声明一个类?
5,call、apply的共同点与区别?
6，用javascript实现对象的继承,继承的几种方式,这几种方式的优缺点?
7，说说你对作用域链的理解?
8，谈一谈this在各种情况的指向问题?
9，闭包的特征有哪些?
10，闭包应用场景有哪些?
11，实际开发中闭包的应用?
12，如何理解js的单线程?
13，js为什么是单线程的?
14，同步和异步的区别是什么?分别举一个同步和异步的例子?
15，什么是任务队列?
16，栈和队列的区别?
17，栈和堆的区别?
18，判断数据类型的方法有哪四种?(列出四种即可)
19， js变量按照存储方式区分为哪些类型，并描述其特点?
20，js中有哪些内置函数/数据封装类对象?
21，js变量按照存储方式区分为哪些类型，并描述其特点?
22，数组怎么去重有哪些?(方法)
23，一句话数组去重?
24，哪些操作会造成内存泄漏?
25，js内存泄漏的解决方式
26，dom是哪种基本的数据结构?
27，dom结构操作/怎样添加、移除、移动、复制、创建和查找节点/dom操作的
28，通用事件绑定/编写一个通用的事件监听数?
29，bom常用属性有哪些?
30，如何解决跨域问题
31，你觉得jQuery或zepto源码有哪些写的好的地方
32，谈谈浮动和清除浮动
33，谈谈你在项目中用过哪些设计模式
34，谈谈性能优化问题
35，说说你对闭包的理解
36，请你谈谈Cookie的弊端
37，浏览器本地存储
38,web storage和cookie的区别
39，cookie和session的区别:
40，display:none和visibility:hidden的区别?
41，CSS中link和@import的区别是?
42,position:absolute和float属性的异同
43，介绍一下box-sizing属性?
44，选择符有哪些?哪些属性可以继承?
45，优先级算法如何计算?
46，CSS3新增伪类有那些？
47，CSS3有哪些新特性?
48，对BFC规范的理解?
49，说说你对语义化的理解?
50，栈和队列的区别?
51，栈和堆的区别?
52，快速排序的思想并实现一个快排?
53，常见兼容性问题?
54，解释下浮动和它的工作原理?清除浮动的技巧
55，浮动元素引起的问题和解决办法?
56，清除浮动的几种方法:
57, position的值有哪些, relative和absolute分别是相对于谁进行定位的?
58, html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?
59，如何实现浏览器内多个标签页之间的通信?
60，什么是FOUC(无样式内容闪烁)?你如何来避免FOUC?
61，null和undefined的区别
62,new操作符具体干了什么呢?
63，js延迟加载的方式有哪些?
64，谈一谈Javascript垃圾回收方法
65，哪些操作会造成内存泄漏?
66，列举IE与其他浏览器不一样的特性?
67，WEB应用从服务器主动推送Data到客户端有那些方式?
68，对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?
69，一个页面从输入URL到页面加载显示完成，这个过程中都发生了什么?
70，javascript对象的几种创建方式
71，如何解决跨域问题
72，创建ajax的过程
73，异步加载和延迟加载
74，ie各版本和chrome可以并行下裁多少个资源
75，Flash、Ajax各自的优缺点，在使用中如何取舍
76，请解释一下JavaScript的同源策略。
77，为什么要有同源限制?
78，GET和POST的区别，何时使用POST?
79，事件、IE与火狐的事件机制有什么区别?如何阻止冒泡?
80，ajax的缺点和在IE下的问题?
81，谈谈你对重构的理解
82，HTTP状态码
83，说说你对Promise的理解
84，说说你对前端架构师的理解
85，说说严格模式的限制
86，如何删除一个cookie
87，说说你对AMD和Commonjs的理解
88，document.write(的用法
89，git fetch和git pull的区别
90，说说你对MVC和MVVM的理解
91，请解释什么是事件代理
92,attribute和property的区别是什么?
93，说说网络分层里七层模型是哪七层
94，说说mongoDB和MySQL的区别
95，讲讲304缓存的原理
96，什么样的前端代码是最理想的

服务端与网络

HTTPS和HTTP的区别
HTTP版本
从输入URL到页面呈现发生了什么？
HTTP缓存
缓存位置
强缓存
协商缓存
缓存的资源在那里
用户行为对浏览器缓存的影响
缓存的优点
不同刷新的请求执行过程
为什么会有跨域问题
如何解决跨域
访问控制场景（简单请求与非简单请求）
withCredentials 属性
服务器如何设置CORS
URL类中的常用方法

算法与数据结构

二叉树层序遍历
B树的特性，B树和B+树的区别
尾递归
如何写一个大数阶乘？递归的方法会出现什么问题？
把多维数组变成一维数组的方法
说一下冒泡快排的原理
Heap排序方法的原理？复杂度？
几种常见的排序算法，手写
数组的去重，尽可能写出多个方法
如果有一个大的数组，都是整型，怎么找出最大的前10个数

跳槽是升职涨薪最直接有效的方式，备战2021金九银十，各位做好面试造火箭，工作拧螺丝的准备了吗？

掌握了这些知识点，面试时在激烈竞争中又可以夺目不少。机会都是留给有准备的人，只有充足的准备，才可能让自己可以在候选人中脱颖而出。

如果你需要这份完整版的面试笔记，可以点击这里直达领取方式！

写在最后

另外，我个人觉得面试也像是一场全新的征程，失败和胜利都是平常之事。所以，劝各位不要因为面试失败而灰心、丧失斗志。也不要因为面试通过而沾沾自喜，等待你的将是更美好的未来，继续加油！

—————祝各位前程似锦，offer不断！！！