牛妹

2021-03-12 10:25 已编辑牛客运营

关注

前端工程师校招面试考点汇总（附面试题和答案）【持续更新】

以下全文为2019年更新的，已经过时啦，最新的大家可以加七七老师微信领取（涵盖面试答案），回复口令【面试宝典】

前端工程师面试考点汇总

以下不作为前端学习路径，只是汇总的校招前端工程师面试考点（因为还有笔试考点，后面结合在一起给大家学习路径），后续会为大家更新10w+字数的前端工程师校招面试题库，还有其他岗位的相关题库和资料，想要什么岗位的可以留言哦~

本篇根据各个公司的面试问的问题的大数据进行总结，后面还会更新面试中考察所占比例，当然，本文只包括技术面，不包括hr面或者一些其他谈人生理想的

附题目

一、前端基础

1、HTTP,HTML,浏览器

1.说一下http和https

2、tcp三次握手，一句话概括

3、TCP和UDP的区别

4、WebSocket的实现和应用

6. 一个图片url访问后直接下载怎样实现？
7. 说一下web Quality（无障碍）
8. 几个很实用的BOM属性对象方法?
9. 说一下HTML5 drag api
10. 说一下http2.0
11. 补充400和401、403状态码
12. fetch发送2次请求的原因
13. Cookie、sessionStorage、localStorage的区别
14. 说一下web worker
15. 对HTML语义化标签的理解
16. iframe是什么？有什么缺点？
17. Doctype作用?严格模式与混杂模式如何区分？它们有何意义?
18. Cookie如何防范XSS攻击
19、Cookie和session的区别
20、句话概括RESTFUL
21、讲讲viewport和移动端布局
22、click在ios上有300ms延迟，原因及如何解决？

23、addEventListener参数

24、cookie sessionStorage localStorage区别

25、cookie session区别

26、iframe通信，同源和不同源两种情况，多少种方法。同源我说了，根据父页面以及cookie，不同源我说了设置子域的方法。

27、介绍知道的http返回的状态码

28、http常用请求头

29、强，协商缓存

30、HTTP状态码说说你知道的

31、讲讲304

32、强缓存、协商缓存什么时候用哪个

33、前端优化

34、GET和POST的区别

35、301和302的区别

36、HTTP支持的方法

37、如何画一个三角形

38、状态码304和200

39、说一下浏览器缓存

40、HTML5新增的元素
41、在地址栏里输入一个URL,到这个页面呈现出来，中间会发生什么？
42、cookie和session的区别，localstorage和sessionstorage的区别
43、常见的HTTP的头部
44、HTTP2.0的特性
46、浏览器在生成页面的时候，会生成那两颗树？

47、csrf和xss的网络攻击及防范

48、怎么看网站的性能如何

49、介绍HTTP协议(特征)

50、输入URL到页面加载显示完成发生了什么?

51、说一下对Cookie和Session的认知，Cookie有哪些限制？

52、描述一下XSS和CRSF攻击？防御方法？

53、知道304吗，什么时候用304？

54、具体有哪些请求头是跟缓存相关的

55、cookie和session的区别

56、cookie有哪些字段可以设置

57、cookie有哪些编码方式？

58、前端优化策略

59、既然你看过图解http，那你回答下200和304的区别

60、除了cookie，还有什么存储方式。说说cookie和localStorage的区别

61、浏览器输入网址到页面渲染全过程

62、HTML5和CSS3用的多吗？你了解它们的新属性吗？有在项目中用过吗？

63、HTTP状态码

64、http常见的请求方法

65、get和post的区别

66、说说302，301，304的状态码

67、web性能优化

68、浏览器缓存机制

69、post和get区别

2、CSS

1、说一下css盒模型
2、画一条0.5px的线
2、link标签和import标签的区别
3、transition和animation的区别
4、Flex布局
5、BFC（块级格式化上下文，用于清楚浮动，防止margin重叠等）
6、垂直居中的方法
7、关于js动画和css3动画的差异性
8、说一下块元素和行元素
9、多行元素的文本省略号
10、visibility=hidden, opacity=0，display:none
11、双边距重叠问题（外边距折叠）

12、position属性比较

13、浮动清除

14、css3新特性

15、CSS选择器有哪些，优先级呢

16、清除浮动的方法，能讲讲吗

17、怎么样让一个元素消失，讲讲

18、介绍一下盒模型

19、position相关属性

20、css动画如何实现

21、如何实现图片在某个容器中居中的？

22、如何实现元素的垂直居中

23、CSS3中对溢出的处理

24、float的元素，display是什么

25、隐藏页面中某个元素的方法

26、三栏布局的实现方式，尽可能多写，浮动布局时，三个div的生成顺序有没有影响

27、什么是BFC

28、calc属性

29、有一个width300，height300，怎么实现在屏幕上垂直水平居中

30、display：table和本身的table有什么区别

31、position属性的值有哪些及其区别

32、z-index的定位方法

33、CSS盒模型

34、如果想要改变一个DOM元素的字体颜色，不在它本身上进行操作？

35、对CSS的新属性有了解过的吗？

36、用的最多的css属性是啥？

37、line-height和height的区别

38、设置一个元素的背景颜色，背景颜色会填充哪些区域？

39、知道属性选择器和伪类选择器的优先级吗

40、inline-block、inline和block的区别；为什么img是inline还可以设置宽高

41、用css实现一个硬币旋转的效果

42、了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法

43、CSS画正方体，三角形

44、overflow的原理
45、清除浮动的方法
46、box-sizing的语法和基本用处

47、使元素消失的方法有哪些？

48、两个嵌套的div，position都是absolute，子div设置top属性，那么这个top是相对于父元素的哪个位置定位的。

49、说说盒子模型

50、display

51、怎么隐藏一个元素

52、display:none和visibilty:hidden的区别

53、相对布局和绝对布局，position:relative和obsolute。

54、flex布局

55、block、inline、inline-block的区别。

56、css的常用选择器

57、css布局

58、css定位

59、relative定位规则

60、垂直居中

61、css预处理器有什么

3、JavaScript

@JavaScript基础

get请求传参长度的误区
补充get和post请求在缓存方面的区别
说一下闭包
说一下类的创建和继承

5. 如何解决异步回调地狱
6. 说说前端中的事件流
7. 如何让事件先冒泡后捕获
8. 说一下事件委托
9. 说一下图片的懒加载和预加载
10. mouseover和mouseenter的区别
11. js的new操作符做了哪些事情
12. 改变函数内部this指针的指向函数（bind，apply，call的区别）
13. js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？

14. js拖拽功能的实现
15. 异步加载js的方法
16. Ajax解决浏览器缓存问题
17. js的节流和防抖
18. JS中的垃圾回收机制
19. eval是做什么的
20. 如何理解前端模块化
21. 说一下Commonjs、AMD和CMD
22. 对象深度克隆的简单实现
23. 实现一个once函数，传入函数参数只执行一次
24. 将原生的ajax封装成promise
25. js监听对象属性的改变
26. 如何实现一个私有变量，用getName方法可以访问，不能直接访问
27. ==和===、以及Object.is的区别
28. setTimeout、setInterval和requestAnimationFrame之间的区别
29. 实现一个两列等高布局，讲讲思路

@JavaScript进阶

1、自己实现一个bind函数

2、用setTimeout来实现setInterval

3、js怎么控制一次加载一张图片，加载完后再加载下一张

4、代码的执行顺序

5、如何实现sleep的效果（es5或者es6）
6、简单的实现一个promise
7、Function.proto(getPrototypeOf)是什么？
8、实现js中所有对象的深度克隆（包装对象，Date对象，正则对象）
9、简单实现Node的Events模块
10、箭头函数中this指向举例

11、js判断类型

12、数组常用方法

13、数组去重

14、闭包有什么用

15、事件***在捕获阶段的实际应用

16、去除字符串首尾空格

17、性能优化

18来讲讲JS的闭包吧

19能来讲讲JS的语言特性吗

20如何判断一个数组(讲到typeof差点掉坑里)

21你说到typeof，能不能加一个限制条件达到判断条件

22 JS实现跨域

23 Js基本数据类型

24 js的命名方式

25 js深度拷贝一个元素的具体实现

26之前说了ES6set可以数组去重，是否还有数组去重的方法

27 JS的全排列

28 ES6中用过哪些

29 跨域的原理

30、不同数据类型的值的比较，是怎么转换的，有什么规则

31、null == undefined为什么

32、this的指向哪几种

33、暂停死区

34、AngularJS双向绑定原理

35、写一个深度拷贝

36、简历中提到了requestAnimationFrame，请问是怎么使用的

37、有一个游戏叫做Flappy Bird，就是一只小鸟在飞，前面是无尽的沙漠，上下不断有钢管生成，你要躲避钢管。然后小明在玩这个游戏时候老是卡顿甚至崩溃，说出原因（3-5个）以及解决办法（3-5个）

38、编写代码，满足以下条件：

（1）Hero("37er");执行结果为

Hi! This is 37er

（2）Hero("37er").kill(1).recover(30);执行结果为

Hi! This is 37er

Kill 1 bug

Recover 30 bloods

（3）Hero("37er").sleep(10).kill(2)执行结果为

Hi! This is 37er

//等待10s后

Kill 2 bugs //注意为bugs

（双斜线后的为提示信息，不需要打印）

39、 jit;jc

40、es6新特性用过哪些

41、什么是按需加载

42、说一下什么是virtual dom

43、webpack用***什么的

44、ant-design优点和缺点

45、JS中继承实现的几种方式，
46、写一个函数，第一秒打印1，第二秒打印2
47、vue的生命周期

48、简单介绍一下symbol

49、什么是事件监听
50、介绍一下promise，及其底层如何实现

51、说说C++,Java，JavaScript这三种语言的区别

52、js原型链，原型链的顶端是什么？Object的原型是什么？Object的原型的原型是什么？在数组原型链上实现删除数组重复数据的方法

53、什么是js的闭包？有什么作用，用闭包写个单例模式

54、promise+Generator+Async的使用

55、事件委托以及冒泡原理。

56、写个函数，可以转化下划线命名到驼峰命名

57、深浅拷贝的区别和实现
58、JS中string的startwith和indexof两种方法的区别
59、js字符串转数字的方法
60、let const var的区别，什么是块级作用域，如何用ES5的方法实现块级作用域（立即执行函数），ES6呢
61、ES6箭头函数的特性
62、setTimeout和Promise的执行顺序
63、有了解过事件模型吗，DOM0级和DOM2级有什么区别，DOM的分级是什么
64、平时是怎么调试JS的
65、JS的基本数据类型有哪些，基本数据类型和引用数据类型的区别，NaN是什么的缩写，JS的作用域类型，undefined==null返回的结果是什么，undefined与null的区别在哪，写一个函数判断变量类型
66、setTimeout(fn,100);100毫秒是如何权衡的
67、JS的垃圾回收机制
68、写一个newBind函数，完成bind的功能。
69、怎么获得对象上的属性：比如说通过Object.key（）
70、简单讲一讲ES6的一些新特性
71、call和apply是用来做什么？
72、了解事件***吗，这样做有什么好处

73、如何使不同页面之间进行通信

74、如何写一个继承？

75、给出以下代码，输出的结果是什么？原因？

for(var i=0;i<5;i++) {

** setTimeout(function(){**

** console.log(i);**

** },1000);**

}

console.log(i)

76、给两个构造函数A和B，如何实现A继承B？

77、问能不能正常打印索引

78、如果已经有三个promise，A、B和C，想串行执行，该怎么写？

79、知道private和public吗

80、基础的js

81、async和await具体该怎么用？

82、知道哪些ES6，ES7的语法

83、promise和await/async的关系

84、问了一段js代码，输出结果是什么

85、js的数据类型

86、js加载过程阻塞，解决方法。

87、js对象类型，基本对象类型以及引用对象类型的区别

88、JavaScript中的轮播实现原理？假如一个页面上有两个轮播，你会怎么实现？

89、怎么实现一个计算一年中有多少周？

90、面向对象的继承方式

91、 JS的数据类型

92、引用类型常见的对象

93、es6的常用

94、class

95、口述数组去重

96、继承

97、call和apply的区别

98、es6的常用特性

99、箭头函数和function有什么区别

100、new操作符原理

101、bind,apply,call

102、bind和apply的区别

103、数组的去重

104、闭包

105、promise实现

106、assign的深拷贝

107、说promise，没有promise怎么办

108、事件委托

109、怎么用原生的js实现jquery的一个特定方法

110、箭头函数和function的区别

111、arguments

112、箭头函数获取arguments

113、Promise

114、模块化开发（require）

115、事件***

116、Eventloop

4、jQuery

1、jquery源代码

2、jquery的一个方法的实现原理

5、BootStrap

bootstrap清除浮动的方法

二、前端核心

1、服务端编程

1、JSONP的缺点

2、跨域（jsonp，ajax）

3、如何实现跨域

4 dom是什么，你的理解？

5 关于dom的api有什么

2、AJAX

1、ajax返回的状态

2、实现一个Ajax

3、如何实现ajax请求，假如我有多个请求，我需要让这些ajax请求按照某种顺序一次执行，有什么办法呢？如何处理ajax跨域
4、写出原生Ajax
5如何实现一个ajax请求？如果我想发出两个有顺序的ajax需要怎么做？
6 Fetch和Ajax比有什么优缺点？
7 原生JS的ajax

5、移动web开发

移动应用和web应用的关系

2、知道PWA吗

3、做过移动端吗

4、知道touch事件吗

5、移动端的DEMO什么的有没有做过点的

三、前端进阶

1、前端工作流

1、前端测试

2、作为一个项目负责人怎么协调多人协作

3、接口文档的制定（给自己挖了一个坑）

4、需求不明确，接口文档是不是越详细越好

5、webpack和gulp区别（模块化与流的区别）

2、流行框架

1、redux用处

2、redux里常用方法

3、angularJs和react区别

4、vue双向绑定原理

5、说说vue react angularjs jquery的区别

3、Nodejs

1、node的事件方法讲讲看

2、node的特性，适合处理什么场景

3、你有用到Express,讲讲Express

4、promise的状态有那些

5、数组移除第一个元素的方法有哪些？

四、移动端开发

1、React

1 react生命周期

2组件什么时候用state

3 受控组件和非受控组件

4 react和angular的区别

5 介绍一下react

6 React单项数据流

7、react生命周期函数和react组件的生命周期

8、react和Vue的原理，区别，亮点，作用，

9、reactJs的组件交流

10、有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢

11、react和Vue的原理，区别，亮点，作用，

12 项目里用到了react，为什么要选择react，react有哪些好处

13 怎么获取真正的dom

14、选择react的原因

15、react的生命周期函数

16、setState之后的流程

17、react高阶组件知道吗？

18、React的jsx，函数式编程

19、React的生命周期

20、说说自己理解的react

21、react的组件是通过什么去判断是否刷新的

九、职业发展

1、介绍一下前端的学习经历

2、为什么选择前端

3、作为一个专业的前端，你觉得应该掌握哪些知识

4、什么时候接触前端

5、大学学过哪些编程的课

6、选择前端的原因

7、对未来三年职业的规划

8、你一般是通过什么方式学习前端的？

9、怎么学的前端？

10、看到你简历上有创客空间前端培训，是怎么样的形式？

11、你还有什么我没问到的优势吗

12、看过什么书

13、简单的介绍一下你自己，你知道哪些技术

14、为什么要选择web前端

15、比较厉害的技术

16、你为什么学前端，以及你学前端怎么坚持下来的

17、你认为一名前端工程师应该具备什么特点？一般是和产品，ui沟通做页面还是直接把图拿过来做？

18、如果直接按照图来做，有没有遇到过页面上实现不了的功能？遇到这样的问题怎么进行处理？

19、你一般是怎么学习前端的

20、看书的话，你是怎么判断书上的知识一定是对的？

21、也问了怎么学习前端的？看哪些书？

22、高程上面你觉得有什么地方是比较难理解的？

23、学过哪些框架？

24、我看见你写了一个js库，说一下有什么？

25、看过什么书？有没有一页一页看

26、你理解的框架

六、项目

1、介绍一个做过的项目

遇到的难题，怎么解决（webpack相关）

3、简单的自我介绍

4、项目相关的问题询问，在项目中又有到过哪些难题，怎么解决的

5、项目的同源处理，跨越相关，jsonp的具体实现，穿插HTML中嵌入js的位置的影响

6、看一下github

7、遇到过什么安全问题怎么解决的

8、让你带领一个小团队完成一个项目，我会怎么做？

9、前端的项目如何进行优化，移动端呢

10、项目中使用了iframe，说说iframe的优缺点

11、项目中有没有遇到什么安全漏洞，安全问题。

12、介绍一下最近做的一个项目

13、用到了哪些前端相关技术

14、简历上的项目亮点

15、最自豪的项目？遇到的难点？做了多久

16、最自豪的事情？

17、前端工程化

七、计算机基础

1、计算机网络

TCP建立连接的三次握手过程

3 tcp三次握手过程

4 说一下用户从输入url到显示页面这个过程发生了什么

5、HTTP的头部包含哪些内容。常见的请求方法（我为什么要说后面的options，head，connect）

6、请求方法head特性
7、HTTP状态码，301和302有什么具体区别，200和304 的区别，
8、OSI七层模型
9、TCP和UDP的区别，为什么三次握手四次挥手
10、HTTP缓存机制
11、websocket和ajax的区别是什么，websocket的应用场景有哪些
12、TCP/IP的网络模型
13、知道什么跨域方式吗，jsonp具体流程是什么，如何实现原生Jsonp封装，优化，对于CORS，服务器怎么判断它该不该跨域呢
14、怎么生成token，怎么传递，