2021 前端工程师 面试题（仅题目）

小米提前批一面二面

一面：

1、公司项目对你印象深刻的点是哪里，遇到过什么样的问题，如何解决的？

答：开始以为面试官小姐姐是hr，因为昨天晚上约的我电话，于是我叙述项目的时候说的很笼统，没有提技术关键字，很尴尬。

2、公司项目对你最大的收获是什么？

答：从头开始学习了vue项目匹配的UI框架，element-ui。学习到了团队协作的重要性， 参与了git的联动开发。

3、es6有在项目中用过吗？请举例说明。

答：当时一股脑想了一下就说出了箭头函数，let和const还有promise（其实promise我掌握的并不是很好），所以后来就有了下一个问题。

4、箭头函数的优势是什么？为什么要用箭头函数？

5、项目中您使用的css布局是哪一种？为什么？

答：自己写的项目比较简单，没有使用ui框架，于是就说了最简单的百分比布局，面试官也没有往下问。

6、vue组件什么情况下可以独立出来？为什么？（实际上是想带入代码复用和高内聚、低耦合的概念）

7、对原型链的理解是什么？并且分析下面例题：

复制代码

function` `Person(){``  ` `}``Person.prototype.name = ``'xmi'``;``Person.age = 21;``var` `a = ``new` `Person();``console.log(a.age); ``//请推测打印结果``答：由于age属于构造函数的私有属性，是不能通过``new``一个新对象去继承的，所以这里应该打印undefined。

8、em、rem的区别？

总体来说，面试官小姐姐问的很基础，就是高内聚低耦合那里我一时没想出来，只是举了实际开发的例子（比如分离echarts和富文本编辑器等外部依赖的组件），最后很幸运的是一面过了，第二天就通知了我二面。

二面：

1、公司项目的难点，哪里对你印象深刻？你通过什么方式解决的实际工作中的问题？

答：这个问题类似一面，我在一面过后做了一些准备，于是就回答了关于axios拦截和请求串的拼接（有说到使用token令牌）和多层路由嵌套和主页面vuex存储三级路由是怎么动态显示菜单的。

2、token令牌对web安全有怎样的作用？

答：因为没有自己具体敲代码使用过token，只是在公司项目中遇到过，了解的比较浅，所以只回答了可以防范crsf（ 跨站请求伪造）攻击。

3、http返回的状态码，请说一些常用的。

答：我就根据自己的平时了解，先从大体上分析了2XX,3XX,4XX的大致特性，大概介绍了200/204/301/302/304/404/500等状态码。

4、http请求中，get和post的区别？

答：第一点是追加参数的位置不同。第二点是post能比get安全点，get请求包含在url里，且被浏览器保存记录。第三点就是post支持更多的编码类型，且不对数据类型做限制。

5、浏览器存储方案cookie session localStorage之间有什么联系和区别？

6、git的常用命令有哪些？

7、浏览器从服务端获取到数据后，进行渲染的过程是怎样的？js的渲染是处于哪一步？

字节一面

1. 自我介绍

2. 谈一谈你做过的项目吧

3. 问了一些项目细节：哪个哪个模块怎么做的

4. 实现ajax，用过XHR吧，说一下怎么用？

5. 跨域问题，什么是同源，为什么要跨域，常用解决办法

6. 你用jQuery时需要加入一个新的功能模块api怎么加

7. 网络响应码2345分别代表什么意思？分别举几个例子？

8. 响应码304什么意思？（缓存）

9. 既然说到缓存，常见缓存机制？（强制、协商）

10. Cookie（问的很细，组成，哪些字段可以设置、怎么设置、发送过程中的位置：是在请求头还是请求体中）、sessionStorage、localStorage 的区别

11. 协商缓存请求的过程

12. 什么是json，怎么用，json里什么不能放？

a) JSON 的操作函数（parse，stringify）

b) 还问了一些二叉树问题，有一个什么判断环的问题，说是json里不能有环结构，怎么提前判断出来

c) 顺带问了一些链表中有环如何判断

13. http与https有什么区别

14. HTTP 请求有哪些方式（GET,POST,PUT,DELETE,UPDATE,OPTION）

a) 分别解释一下六种方式什么意思

b) GET 和 POST 的区别

c) 什么时候会发起option请求

http的请求头有哪些常见属性，可以举几个例子吗

Nodejs，webpack了解多少？

Vue了解多少？

做了一道编程题：判断回文字符串的。要忽视大小写，忽视非英语字符（里面会有空格，逗号等字符）

快手一面

一面

1. 作用域相关
2. this绑定问题
3. 原型链，判断输出
4. css优先级 !important > 行内 > id >
5. absolute定位对行内元素的作用
6. 实现repeat（函数，执行次数，间隔）方法
7. 实现flat（参数，深度）
8. 实现全排列
10. 二面
11. React相关，怎么处理commit阶段某个节点的变化
12. 用什么数据结构处理文件间的依赖关系，如何找到循环依赖
13. 找到网页中所有以h开头的元素并分类计数
14. 分别用什么解决线程安全和进程安全问题

小米一面：

自我介绍

行内元素和块级元素区别

知不知道vue和angular（我是React，就说的不懂）

padding和margin是否会应用在行内元素上

CSS优先级

TCP三次握手 为什么三次握手

TCP滑动窗口

UDP TCP 区别

HTML5新内容

localStorage和sessionStorage

项目难点

ES6新特性，箭头函数，let，const等

Promise加settimeout判断输出顺序

this指向

实现一个Sleep函数

三栏布局，两侧定宽，中间自适应（说了Flex和float，但是面试官好像还在期待更多的）

形如[1,2,2,2,2,4]的数列

找到target值的起始位置和结束位置

对于例子，答案是[1,4]

58同城一面二面

一面:

自我介绍

https协议

网络分层, 物理层-数据链路层-网络层-传输层-会话层-表示层-应用层

熟悉的数据结构

各种排序,哪种用的多,讲一讲

项目里的web服务器用什么系统

linux的命令,删除文件是什么

提问环节

二面:

自我介绍,

介绍项目

项目基于什么开发

vue的源码看过没

vue双向绑定讲一下

vue-router讲一下

对node的理解

有没有博客

平时怎么学习的,看过什么书

自己有什么优点

有什么缺点

提问环节

聊天

百度 （医美部）一面

1. 自我介绍
2. 项目
3. 说一下防抖和节流
4. BFC
5. overflow属性
6. 为什么出现盒子塌陷？怎么解决？是出现左右塌陷还是上下塌陷还有都有呢？
7. git pull和git fetch的区别？
8. git revert 和 git reset的区别
9. 箭头函数与普通函数的区别
10. Promise的三种状态，catch和reject的区别
11. setTimeout,promise,async await之间的区别
12. export,import,export defaut和require的区别 什么时候用呢，放在哪里呢？干嘛用的？
13. 性能优化你有了解吗?网络相关的性能优化你有了解吗？
14. 反问环节

腾讯一面二面

一面：

1. 闭包的作用
2. 作用域相关
3. ES6新特性

手写一个new

function myNew(fn) {
	let obj = new Object()
	obj.__proto__ =	fn.prototype
	obj.apply(fn)
	return obj
}

字节一面

1.盒子模型，标准盒子模型小试牛刀

2.https加密，什么是非对称加密？

3.什么是原型对象以及原型对象有什么优点。

4.状态码和缓存

5.判断数组

6.数据类型，如何判断数组是否为空

7.HTML5和HTML4相比有什么性能的优化或标签

8.node.js有哪些常用API

9.最后是一道算法题：单调栈去重，这个算是送分题了，之前碰巧看过一位大佬写的文章 https://labuladong.gitbook.io/algo，就在心底里暗自庆幸来着，稳稳地结束了这一题，看来努力还是有用的。

腾讯前端一面

1. CSS布局 (我说了个双飞燕、flex box) 以及CSS如何优化页面

自适应屏幕如何实现

知道哪些属性或者方法(回答了justify-content之类关于对齐的)

2. CSS盒子模型 

网络篇: =>

1. 传输层UDP和TCP 

问的特别细 问我如何实现滑动窗口 还问了滑动窗口最少几个指针(楼主一开始答一个 猜想序列号+当前窗口最大值 包装传给下一次请求报文就可以了把？然而事实打脸)

TCP可靠传输

TCP拥塞控制

2. HTTP

HTTP 1.0/1.x/2.0 区别以及改进

还问了个HTTP 3.0(对不起 教科书没写 真不知道 尴尬)

3. 缓存 强缓存 cache-control 懂得都懂 很常考

​ <重头戏> JavaScript: =>

1. 尾调用优化

扩展 Javascript引擎栈帧有限 这样做有什么用处

2. DOM事件流 (捕获、冒泡、事件委托) 还问了事件绑定 我忘了。。。

3. Javascript运行机制 (EventLoop/宏任务/微任务)

这里楼主直接扯到工作者线程 虽然扯得有点远

4. apply/bind/call

扩展 bind如何实现的(楼主答 用apply 其他两个是自己调用自己)

他们的区别 (懂得都懂)

原型链以及原型

如何追踪原型链 (楼主答 while loop对象的proto属性 没毛病)

6. 浏览器缓存有哪些

答 cookie, sessionStorage, localStorage, indexedDB, memory cache, dish cache…

<算法> =>

1. 了解哪些排序

2. 快排说一下

扩展 一千万个数据如何找中位数？( 快排一波 芜湖起飞)

京东 一面 二面 HR面

一面

es6新特性

this

js的继承 比较每个继承方法

new的过程

深拷贝，浅拷贝，拷贝函数的this处理

css的盒模型

css浮动

BFC

水平垂直居中

输入url发生了什么（缓存 重排 重绘）

react的fiber了解

前端的优化方法

二面

围绕项目问的，大部分讲项目

线程和进程区别

localstorage sessionstorage session cookie区别

前端模块化

http1.0/1.1/2.0

http2.0对前端有什么影响

排序算法

hr面

了解京东吗

想去的部门和地点

职业规划

当过班委吗

爱好

自己的优缺点

小米 二面

1，自我介绍
2，基础问题
1css选择器
2position
3内联元素块级元素
4左右布局
5a.html,b.html通信，webstorage,cookie

3道编程题：
1数组去重
2两个字符串找最大公共子串
3字符串找最长连续数字子序列，输出长度

百度一面二面三面

一面技术面

刚开始问了下数据结构和算法:

问了Y型链表查找交点，还问了道简单题查找英文文章里出现次数最多的字母和次数。

问到我二叉搜索树。

问了下项目。

问了下css的:

用过哪些css3属性。

用过css预处理器吗。

实现一个梯形

清除浮动

了解BFC吗。

感觉这些问的都很简单，问题很多，有些没啥印象了。

还问了vuex里action和mutation的区别(一个是异步一个是同步)。

噢，还问了我IE兼容。

二面业务面

全程被吊打

先聊项目，不谈了

刚开始是一个场景题(短的题就不说了)，实现无限滚动。

然后是模板字符串，es5实现

然后一顿正则

最后问还知道有哪些能够直接执行字符串里代码的方法

问xss

问csrf怎么攻击的

然后问node.js用处。问数据库连接。问模板化。

问commonJs有哪些特性。问两个文件require一个文件时执行几次。

还问了Array的方法(尽可能写)，问哪些是动态哪些是静态。

最后问了Promise.race(答案是用race做)

三面主管面

基本围绕着项目问

还问了未来的规划

问了优缺点

其他想不起来了

(主管面面试得好挺有用的，我的面试官直接给我要走，不用在池子里泡着，最快拿offer)

深圳大宇一二三面CEO面

11.6 一面 30min+

自我介绍
简单介绍一下项目
项目所用的一些技术原理
vue-lazyload源码看过吗，简单说说图片懒加载原理，如何判断是否出现在可视区域
keep-alive的两个生命周期钩子是什么
讲一下vue的生命周期
一般请求数据在哪个生命周期里
computed和watch区别，watch监听一个对象，这个对象里还有对象能监听到吗
v-if和v-show有什么区别，在DOM树上表现一样吗
项目遇到的问题
项目中哪里用到Vuex
CommonJS和ES6的module区别，CommonJS为什么可以直接用require函数引入
Webpack打包过程了解吗
讲一下TCP的三次握手，四次挥手，最后的等待时间是多久（2MSL
http2.0跟http1.0有哪些区别，1.0版本如何在一次连接进行多个请求
TCP的滑动窗口记得吗
算法：有两个有序数组，合并这两个有序数组，使新数组也是有序的 相关知识点： [数组](javascript: void(0))[双指针](javascript: void(0)) 相关知识点： [数组](javascript: void(0))[双指针](javascript: void(0))
手写防抖函数
CSS隐藏一个元素有哪些方法
讲一下BFC
CSS动画了解多少，transition和keyframes有什么区别
怎么准确判断一个数据的类型

二面 20min+

实现一个lazyMan
了解过项目的源码吗
讲一下深拷贝的实现，循环引用怎么解决，像Date、正则这种对象怎么处理
Webpack原理知道吗，怎么打包bundle出来的，怎么处理css或者图片之类的资源
职业规划是怎样
什么时候能来实习

三面 40min 全程基本在聊项目、挖项目的东西

项目实现什么功能
这个项目遇到哪些难点呢
项目优化的点说说， 交互上、视觉上有什么优化吗
这个游戏有保存功能吗（关闭页面后回来还能恢复，需要保留的现有状态有哪些
讲项目一些技术原理

vue-lazyload解决什么问题，需要预加载怎么实现

知道git的分支是如何实现的吗
两个人在同一个git分支上提交代码，一个人先提交版本，另一个人再提交会提示冲突，怎么解决
git pull后本地会发生什么问题
说一下网络层和传输层什么意思，解决什么问题
哪些协议基于TCP
说一下DNS怎么解析
DNS污染什么意思
https是哪层协议，解决什么问题

杭州独角兽公司一面

1.window.open 方法
2.手机和邮箱的正则表达式
3.css选择器的优先级，并进行排序
4.盒子水平居中大方法
5.前端跨域的方法(两种及以上)
6.生成一个数值区间在2-32的随机数组
7.es6有哪些新特性
8.单页面应用有什么优点
9.对象有哪些遍历方法
10.git操作里rebase,merge,创建新的分支，commit这些分别是什么
11.怎么拿到缓存区的代码
面试
12.用class创建对象和用function构造函数对象有什么不同
13.深拷贝和浅拷贝有什么不同，有哪些方法可以实现深拷贝
14.便利一个对象里面的所有key值有什么方法
15.https中的s代表什么
16.http三次握手四次挥手
17.axios的底层用了什么
18.新的fetch请求时怎么实现的
19.js的闭包是什么，一般用在什么场景
20.箭头函数中的this时怎么绑定的
21.绑定this指向的方法bind call applay区别
实现bind方法有什么思路
22.promise和async await的区别是什么，如果在axait方法后面报错了怎么处理
23.await后面如果接了一个promise,return null或return false它接下来会执行什么 应该执行resolve
24，如果在promise.then里抛出一个错误，该怎么做
25.原生轮播图实现思路
26.移动视窗内的元素大概有哪几种方法
27.keep-alive有什么作用
28.页面的状态管理有哪些方法
29.rem是怎么实现手机端的适配的
30.小程序的自定义组件，原生标签经常用的是哪些