自学前端1年，靠着这份面试题和答案，我找到了20K工作

傷城~ 2022-10-05 14:00 210阅读 0赞

马上就是毕业季了，找工作的人多起来了。很多前端朋友想趁此换工作机会，毕竟通过面试实现跳槽涨薪一直是程序员的一个目标，我是如何拿到大厂offer并成功实现涨薪的呢？

今天给大家分享我拿到大厂offer的利器，《前端核心知识面试宝典》内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。

整个面试核心知识宝典的内容非常详细，很多知识点在总结的时候因为篇幅受限，不会在文章中将所有内容都展示给大家，全部都整理在了一个pdf里面，共107页！

HTML

1、HTML5 有哪些新特性？

2、Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

3、如何实现浏览器内多个标签页之间的通信？

4、⾏内元素有哪些？块级元素有哪些？空(void)元素有哪些？⾏内元 素和块级元素有什么区别？

5、简述⼀下src与href的区别？

6、cookies,sessionStorage,localStorage 的区别？

7、HTML5 的离线储存的使用和原理？

8、怎样处理 移动端 1px 被 渲染成 2px 问题？

9、浏览器是如何渲染页面的？

10、iframe 的优缺点？

11、Canvas 和 SVG 图形的区别是什么？

12、谈一谈meta 标签？  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70]

> 在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】 每天更新最新技术文章干货。

CSS 基础

1、请你讲一讲 CSS 的权重和优先级

2、介绍 Flex 布局，flex 是什么属性的缩写：

3、CSS 怎么画一个大小为父元素宽度一半的正方形？

4、CSS实现自适应正方形、等宽高比矩形

5、实现两栏布局的方式

6、实现三列布局的方式

7、CSS 动画有哪些？

8、用css2和css3分别写一下垂直居中和水平居中

9、visibility 和 display 的差别（还有opacity)

10、opacity 可以有过渡效果嘛？

11、BFC 与 IFC 区别

12、BFC会与float元素相互覆盖吗？为什么？举例说明

13、了解box-sizing吗？

14、什么是 BFC

15、了解盒模型吗？

16、说一下你知道的position属性，都有啥特点？

17、两个div上下排列，都设margin，有什么现象？

18、清除浮动有哪些方法？  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 1]  
JavaScript 基础

1、问：0.1 + 0.2 === 0.3 嘛？为什么？

2、JS 有哪些我数据类型？

3、JS 整数是怎么表示的？

4、Number() 的存储空间是多大？如果后台发送了一个超过最大自己的数字怎么办

5、写代码：实现函数能够深度克隆基本类型

6、事件流

7、事件是如何实现的？

8、new 一个函数发生了什么

9、new 一个构造函数，如果函数返回 return \{\} 、 return null ， return 1 ， return true 会发生什么情况？

10、symbol有什么用处

11、闭包是什么？

12、闭包产生的本质

13、一般如何产生闭包

14、闭包的应用场景

15、什么是作用域？

16、什么是作用域链？

17、NaN 是什么，用 typeof 会输出什么？

18、JS 隐式转换，显示转换

19、了解 this 嘛，bind，call，apply 具体指什么

20、手写 bind、apply、call

21、setTimeout(fn, 0)多久才执行，Event Loop

22、手写题：Promise 原理

23、js脚本加载问题，async、defer问题

24、如何判断一个对象是不是空对象？

25、<script src=’xxx’ ’xxx’/>外部js文件先加载还是onload先执行，为什么？

26、怎么加事件监听

27、事件传播机制（事件流）

28、说一下原型链和原型链的继承吧

29、说下对 JS 的了解吧

30、数组能够调用的函数有哪些？

31、如何判断数组类型

32、函数中的arguments是数组吗？类数组转数组的方法了解一下？

33、用过 TypeScript 吗？它的作用是什么？

34、PWA使用过吗？serviceWorker的使用原理是啥？

35、ES6 之前使用 prototype 实现继承

36、如果一个构造函数，bind了一个对象，用这个构造函数创建出的实例会继承这个对象的属性吗？为什么？

37、箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

38、知道 ES6 的 Class 嘛？Static 关键字有了解嘛

39、事件循环机制 （Event Loop）

40、手写题：数组扁平化

41、手写题：实现柯里化

42、手写题：数组去重

43、let 闭包

44、变量提升

45、instance 如何使用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 2]  
Vue框架

1、active-class是哪个组件的属性？嵌套路由怎么定义？

2、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

3、vue-router有哪几种导航钩子？

4、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？

5、mint-ui是什么？怎么使用？说出至少三个组件使用方法？

6、v-model是什么？怎么使用？vue中标签怎么绑定事件？

7、axios是什么？怎么使用？描述使用它实现登录功能的流程？

8、axios+tp5进阶中，调用axios.post(‘api/user’)是进行的什么操作？axios.put(‘api/user/8′)呢？

9、什么是RESTful API？怎么使用?

10、vuex是什么？怎么使用？哪种功能场景使用它？

11、mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？

12、自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？

13、说出至少4种vue当中的指令和它的用法？

14、vue-router是什么？它有哪些组件？

15、导航钩子有哪些？它们有哪些参数？

16、Vue的双向数据绑定原理是什么？

17、请详细说下你对vue生命周期的理解？

18、请说下封装 vue 组件的过程？

19、你是怎么认识vuex的？

20、vue-loader是什么？使用它的用途有哪些？

21、请说出vue.cli项目中src目录每个文件夹和文件的用法？

22、vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？

23、聊聊你对Vue.js的template编译的理解？

24、Vuex是什么？为什么使用Vuex？

25、vuejs与angularjs的区别？

26、vue为什么不直接操作dom？

27、你怎么理解vue是一个渐进式的框架？

28、Vue声明组件的state是用data方法，那为什么data是通过一个function来返回一个对象，而不是直接写一个对象呢？

29、说下vue组件之间的通信？

30、vue中mixin与extend区别？  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 3]  
计算机网络基础

1、HTTP 缓存

2、HTTP 常用的状态码及使用场景？

3、你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

4、HTTP 常用的请求方式，区别和用途？

5、你对计算机网络的认识怎么样

6、HTTPS 是什么？具体流程

7、三次握手和四次挥手

8、在交互过程中如果数据传送完了，还不想断开连接怎么办，怎么维持？

9、你对 TCP 滑动窗口有了解嘛？

10、WebSocket与Ajax的区别

11、了解 WebSocket 嘛？

12、HTTP 如何实现长连接？在什么时候会超时？

13、Fetch API与传统Request的区别

14、POST一般可以发送什么类型的文件，数据处理的问题

15、TCP 如何保证有效传输及拥塞控制原理。

16、http知道嘛？哪一层的协议？（应用层）

17、OSI七层模型和TCP/IP四层模型

18、TCP 协议怎么保证可靠的，UDP 为什么不可靠？

19、HTTP 2 改进

20、DDOS 攻击  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 4]  
算法

链表

1、前序遍历判断回文链表

2、反转链表

3、合并K个升序链表

4、K 个一组翻转链表

5、环形链表

6、排序链表

7、相交链表

字符串

1、【面试真题】最长回文子串【双指针】

2、最长公共前缀【双指针】

3、无重复字符的最长子串【双指针】

4、【面试真题】最小覆盖子串【滑动窗口】

数组问题

1、【面试真题】俄罗斯套娃信封问题【排序+最长上升子序列】

2、最长连续递增序列【快慢指针】

3、最长连续序列 【哈希表】

4、【面试真题】盛最多水的容器【哈希表】

5、寻找两个正序数组的中位数【双指针】

6、删除有序数组中的重复项【快慢指针】

7、和为K的子数组【哈希表】

8、nSum问题【哈希表】

9、【面试真题】接雨水【暴力+备忘录优化】

10、跳跃游戏【贪心算法】

二叉树

1、二叉树的最近公共祖先

2、二叉搜索树中的搜索

3、删除二叉搜索树中的节点

4、完全二叉树的节点个数

5、二叉树的锯齿形层序遍历

排序算法

1、用最少数量的箭引爆气球

2、合并区间【排序算法+区间问题】

二分查找

1、判断子序列【二分查找】

2、在排序数组中查找元素的第一个和最后一个位置【二分搜索】

动态规划

1、最长递增子序列

2、【面试真题】 零钱兑换

3、【面试真题】 最长公共子序列

编辑距离

1、【面试真题】最长回文子序列

2、【面试真题】最大子序和

3、【面试真题】 买卖股票的最佳时机

BFS

1、打开转盘锁

2、二叉树的最小深度

栈

1、最小栈【栈】

2、下一个更大元素

3、【面试真题】有效的括号

4、简化路径

DFS

1、岛屿的最大面积

2、相同的树

回溯算法

1、N皇后

2、全排列

3、括号生成

4、复原 IP 地址

5、子集

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 5]  
跳槽是升职涨薪最直接有效的方式，备战2021毕业季，各位做好面试造火箭，工作拧螺丝的准备了吗？

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

如果你需要这份完整版的面试宝典，快点领走吧！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70]: /images/20221005/12c501665ef845a095c79d2e1854dbe5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 1]: /images/20221005/9373896d8dd4436590c57d5083446286.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 2]: /images/20221005/c23c1c481a7742c18fd4d8729acb29b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 3]: /images/20221005/397309a67753404095abe27398cbbf7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 4]: /images/20221005/42819555619b40ff8028f3f1f7a1bb05.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 5]: /images/20221005/1bb3103acc6344a3babdc2f842613ed1.png