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

痛定思痛。 2022-12-31 07:25 153阅读 0赞

### 小米提前批一面二面 ###

一面：

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) 顺带问了一些链表中有环如何判断

1.  http与https有什么区别
2.  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.  实现全排列
9.  
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拥塞控制

1.  HTTP

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

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

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

<重头戏> JavaScript: =>

1.  尾调用优化

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

1.  DOM事件流 (捕获、冒泡、事件委托) 还问了事件绑定 我忘了。。。
2.  Javascript运行机制 (EventLoop/宏任务/微任务)

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

1.  apply/bind/call

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

他们的区别 (懂得都懂)

原型链以及原型

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

1.  浏览器缓存有哪些

答 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.小程序的自定义组件，原生标签经常用的是哪些