【搜集】前端面试总结

CVTE面试（一面）

作者：灵活的死胖子

链接：https://www.nowcoder.com/discuss/88897?toCommentId=1514882

来源：牛客网

自我介绍
介绍项目，以及项目中遇到的难点
对闭包的理解，以及哪些地方用过闭包，以及闭包的缺点
对跨域了解吗，jsonp 的限制
浏览器哪些地方用到了异步（这个没答上来）
CSS 弹性布局，哪些地方用到过
position 属性有哪些值，分别什么含义
ES6 用到过吗，新增了哪些东西，你用到过什么
const 和 let 区别，可以改变 const 定义的某个对象的属性吗
箭头函数，箭头函数的特点，应该是 this 的指向
因为我说项目中用到 cookie，所以她也问了 cookie 有哪些限制
除了 cookie 还有那些东西辨别用户身份的
事件机制
settimeout 的机制
遇到过兼容性问题吗，怎么处理的
项目中有用过构建工具吗
平时怎么学习前端，最近在看的一本书

CVTE面试（二面）

先让说了一下项目，主要负责的部分，然后有没有使用什么新技术平时的学习途径，说了有写博客，然后问了博客地址，从什么时候开始写之类的。
一道杨辉三角形的题

1

1 1

1 2 1

…

输入 n ,输出数组

假设输入 3，输出数组 [[1],[1,1],[1,2,1]]

CVTE HR面试

作者：灵活的死胖子

链接：https://www.nowcoder.com/discuss/92649

来源：牛客网

对自己前两轮面试打个分
做的最成功的一件事
有没有什么主动争取的东西
特别困难的时候
家里的情况
影响最大的一个人
期望薪资
如果一起进去的人薪资比你高你怎么看
业余有什么爱好
加班怎么看
工作地点怎么看
有没有 offer
特别想去的公司
会因为什么放弃 cvte 的 offer
提问

腾讯面试

作者：灵活的死胖子

链接：https://www.nowcoder.com/discuss/89360?type=2&order=0&pos=4&page=0

来源：牛客网

自我介绍
项目及项目难点
跨域的方式（ JSOP 和 CORS ）还有其他的吗（不知道）
你觉得 vue 有哪些特点
因为自己是跨专业的所以他问我学过哪些计算机的课程
用过 git 是吧（项目中没用过，自己维护个人 github 用过），在项目怎么用 git 知道吗（就是分支，合并，合并的时候出现冲突怎么办，没答上来）然后问了 a^n 怎么用小于 O(n) 的算法实现 ( 没答上来 )
假设有这么一张表，学生姓名，课程，成绩，怎么查出每个学生成绩最高的那门课程的成绩
TCP 和 UDP 的区别因为说了 tcp

是可靠传输，所以他问为什么是可靠传输传输，其实就是三次握手，但是当时不知道是因为这个，所以没答上来前端性能优化

顺丰HR面试

作者：灵活的死胖子

链接：https://www.nowcoder.com/discuss/90658

来源：牛客网

自我介绍，说项目比较多，然后让我聊聊其他方面
说了说自己的性格，兴趣
性格里面说了自己能吃苦，自制力比较强。让举几个例子
因为本科不是这个专业的问了为什么跨考
为什么选择前端
简历提到写博客，写博客的目的
期望薪资
有没有想去的公司或者地方
有其他 offer 吗
对顺丰科技的了解
找工作的话最想获得的是什么（能力的提升）

顺丰科技前端（一面）

作者：灵活的死胖子

链接：https://www.nowcoder.com/discuss/89356?type=2&order=0&pos=5&page=1

来源：牛客网

自我介绍
项目及项目中用了哪些框架
项目中的难点
了解 MVVM 吗，和 MVC 的区别
对象和类的区别，举个现实中的例子
你理解的面向对象
说一下原型链吧
闭包的原理
数据库了解吗（不了解）
css 响应式布局
简历中写着了解 node 是吧（用 node 写过几个爬虫，具体的不是太了解）
ES6 新增的 set() 和 map() 有什么区别
说一下快排的原理

阿里一面

作者：灵活的死胖子

链接：https://www.nowcoder.com/discuss/92258?toCommentId=1565498

来源：牛客网

你会哪些东西（javascript 对象，原型，闭包）
js 数组有哪些方法（基本把所有数组方法说了一遍）
哪些会改变原数组
every 和 some 的区别
数组去重
写一个函数判断是否存在循环引用（没答上来）
深拷贝和浅拷贝
继承，原型链继承怎么实现
ES6 用过哪些新特性
箭头函数和之前的区别，说了 this，然后提到了闭包，讲了一下闭包
函数中的 rest 参数可以用别的名字代替吗（这里不熟，说了不可以，其实是可以）
promise 函数了解吗，如何实现一个 A->B->C 说了 Promise.then，然后又问了如果事情的个数不知道呢（没答上来）
async 和 await 了解吗，不太了解，只知道返回的是 promsie 对象
用过 webpack（项目中没用过，自己了解过）讲一下 webpack，有什么作用，讲到了性能优化，有哪些性能优化的地方，压缩胡乱代码，其他没答上来
AMD 和 commonjs 怎么使用，怎么配置，有哪些好处

多益网络一面

作者：灵活的死胖子

链接：https://www.nowcoder.com/discuss/96296

来源：牛客网

自我介绍
项目（项目中问的问题比较多，抓住几个点来问你为什么这样做）
事件模型
怎么在事件捕获阶段触发事件
平时有关注一些博客什么的吗，讲一个最近看的（讲了一下 base64 编解码的）
spa 了解吗，只知道是单页面应用程序，但是不是特别了解
函数防抖和函数节流（之前看过但忘记了，只说出了防抖）
前端路由的实现了解吗
排序算法，时间复杂度
平衡二叉树
网络七层协议
加班的看法

拼多多前端（一面）

作者：灵活的死胖子

链接：https://www.nowcoder.com/discuss/96907

来源：牛客网

项目
vue 的优点
vue 父子组件通信
vue 生命周期（并不怎么了解 vue 啊，只是用过）
用 meta 怎么实现不从缓存中获取资源
闭包
ES6 了解什么
promise 和 async await
事件模型和事件委托
箭头函数 this 指向
this 绑定（说了默认绑定，隐式绑定，显式绑定，new 绑定）浅析 Javascript 中 this 的指向 ( 箭头函数 )
函数柯里化（这里不是特别会，他讲给我听了）sum(4)()()(3) 结果等于 7 这样
原型链
class
nodejs 了解什么（做过几个小爬虫）
具体用了哪些东西
webpack 怎么配置
babel 怎么配置

拼多多前端（二面）

作者：灵活的死胖子

链接：https://www.nowcoder.com/discuss/98470

来源：牛客网

介绍一下项目，问了一下项目中具体的细节
原型链，proto 和 prototype 的区别
判断数组的方法应该有 5 个吧，都说了，然后让说一下不同，Array.isArray() 没说出来，其他的都说了，顺便说了下 instance 的实现原理（上次被问到不会）
http 和 https 的区别，说了一下传输过程和对称非对称加密
attribute 和 property 的区别
css 伪类是什么（没答出来）
常见的布局方式，flex 布局三列等宽，flex：1 的意义
inline 和 inline-block 的区别
正则？的用法有哪些（正向预查和 0 次或一次）?：有使用过吗，没有 get 和 post 的区别，说了 post更消耗资源，又问那为什么不用 get 发送数据（没答出来）
cookie 和 localstorage 区别，为什么不用 localstorage 验证用户身份（也没答上来）
promise 使用场景有哪些。promise 里面 return 一个 string，和在 resolve 一个 string的区别，这题也答错了，说成了 return string 返回的也是 promise 对象。然后又问在 then 里面 throw 一个 error，怎么捕捉，说了第二个参数和 catch，也说错了，用第二个参数捕捉不到这个 error，让我面完试试，果然捕捉不到。
匿名函数的使用场景，说了回调函数，箭头函数，或者闭包，然后就没继续问了，是答得有问题吗?
前端路由和服务端路由
深拷贝和浅拷贝，深拷贝的实现以及应用场景
jsonp 的原理

猿辅导前端（一面）

作者：灵活的死胖子

链接：https://www.nowcoder.com/discuss/97744

来源：牛客网

function ClassA()
{
    this.name = 'classA'
}
const classA = new ClassA ()
ClassA.prototype =
classA.__proto__ =
classA instanceof ClassA
true
false

new 出来的实例 this 指向哪
怎么修改 new 出来的 this 的指向（当时说的 new 出来的指向不能修改）
换了个问法，怎么在构造函数中修改 this 的指向。说了个借用构造函数也没说对不对
ClassA 的 prototype 是啥，有啥
classA 的 proto 是啥
原型链讲一下
instanceof 什么时候返回 true，什么时候返回 false
怎么让 classA instanceof ClassA 返回 false
js 里面异步的方式有哪些
写一个 cb2promise 函数，参数是一个函数，将 getUrl 转换成 getUrlPromise

// callback (error, data)
function getUrl(callback)
function getUrlPromise(){}
function cb2promise(fn)
const getUrlPromise = cb2promise(getUrl);
getUrlPromise.then(data=>{}).catch(err=>{})
// 写一个函数，将传进去的数组按深度展开
list:[1,2,[3,4],[5,6,[7,8],9],10,11]
// depth 等于 1 时输出
depth = 1 :[1,2,3,4,5,6,[7,8],9,10,11]
// depth 等于 2 时输出
depth = 2 :[1,2,3,4,5,6,7,8,9,10,11]
function flattern(list,depth){
}

对框架有了解吗，对 css3 有了解吗，移动端适配讲了一下。平时除了看书还有哪些学习途径

老虎证券

作者：灵活的死胖子

链接：https://www.nowcoder.com/discuss/99056

来源：牛客网

position 有哪些属性，分别有哪些意思
列表有哪些
form 提交表单的形式有哪些
盒模型（标准盒模型和怪异盒模型）怪异盒模型的触发条件
bfc 及触发条件
高度塌陷及解决方案
input 怎么获取 value
css 的权重
js 基本数据类型，说了 symbol 但是问是啥就不清楚了
typeof 返回值
let const var 区别，这里又问了 typeof 没定义的会报错吗（不会，undefined）那 typeof let 定义的呢，提到了暂时性死区，由于没试过所以说觉得因为暂时性死区应该会报错（刚试了一下说对了）
es6 的箭头函数，主要讲了一下 this 的绑定
http get 和 post 区别，一个获取，一个发送，get 请求能被缓存，保存为书签，有长度限制
性能优化的方案（基本的没说）
说了一个文档碎片
dns 预解析，哪些方式
然后他问到了 js 放在哪，问了下原因
图片懒加载，怎么判断什么时候加载，说了一个 offsettop 好像不对，不过说具体思路没问题
dns 了解吗。。。不是特别了解
cdn 知道吗，怎么判断要去哪里获取（他应该觉得问的太深了，所以自己也说了等以后用到再说）
跨域，同源策略讲了一下，jsonp 的具体实现。假设 a 网站请求 b 网站的一个 js，这个 js 中请求了 b 网站的内容算跨域吗。
重绘和回流，一个 absolute 的 div 在 js 中，将 left 从 1 变为 100 会触发吗，说了应该会，一闪一闪，答错了，让我回去试一下，试了一下是直接闪到 100 的位置。
xss 攻击了解吗，防御方式有哪些（浏览器自带防御，特殊字符转义，哪些特殊字符，黑白名单，csp）

网易考拉前端（一面、二面）

作者：灵活的死胖子

链接：https://www.nowcoder.com/discuss/99069

来源：牛客网

一面：

因为提到了 weex 所以问了点 weex 的问题就不说了
然后就是封装一个 url promise

function(url,option){ // option里面的内容是自定义的,说是你可以自己定义
var promise = new Promise({
    var xhr = new XMLHttpRequest();
    xhr.open(option.method,url,false);
    xhr.onreadystatechange = handler;
    xhr.setRequestHeader(option.Header,option.Value);
    if(option.method == 'get'){ // 写到这里让别写了，说下思路
        xhr.send(null);
    }else{
        xhr.send(option.data);
    }
    function handler(){
        if(this.readyState === 4){
            if(this.status >= 200 && this.status < 300 || this.status == 304){
               resolve(this.responseText);
             }else{
                reject(New Error(this.statusText))
            }
           }
    }        
    })
return promise;
}

防抖和节流，简单实现

// 防抖
function debounce(func,wait){
    var timeout; return ()=>{ var self = this;
        var args = arguments;
        if(timeout) clearTimeout(timeout);
        timeout = setTimeout(()=>{
                func.apply(self,args);
            },wait)
        } }
// 节流
function throttle(func,wait){
    var timeout;
    return ()=>{
        var self = this;
        var args = arguments;
        if(!timeout){
            timeout = setTimeout(()=>{
                    timeout = null;
                    func.apply(self,args)
                },wait)
        }   
    }
}

一个场景题，两栏布局左边定宽，里面的内容居中，右边自适应，然后右边是一个类似购物车一样的东西，可以随意添加删除

怎么实现布局，说了 flex，居中有 justify-content，还有一个 align 什么的（align-items）当时忘了。

flex 1 的意思

然后右边怎么做，事件代理，怎么知道是哪个触发，有个 target
代码里面的性能优化，说了个文档碎片和利用 requestAnimationFrame 实现延迟加载
跨域，jsonp 的实现原理
数组的遍历方法，reduce 使用场景，这里举了一个自己不是很熟的例子，没圆好
$emit 用过吗（没有。。。）
强缓存和协商缓存

二面：

模块化的东西了解哪些
AMD CMD commonjs es6 模块化的区别，CMD 和 ES6 的模块化没怎么了解
说下 ES6 的 Map，Set，Promise，Class。说下 Map 和对象的区别，为啥有了对象还要 Map（没答好）
写过动画吗（没有）
webwoker 的作用
函数柯里化
防抖和节流及应用场景
怎么实现一个 tab 吸顶。说了获取位置，根据位置改变 css。
怎么用原生 js 添加类，.className，setAttribute

美团外卖前端（一面）

作者：灵活的死胖子

链接：https://www.nowcoder.com/discuss/99519

来源：牛客网

简单自我介绍
学前端多长时间，平时怎么学的
html 语义化，对语义化的理解，有哪些好处，哪些标签，什么用，提了 seo
html 盒模型，怪异盒模型和标准盒模型的应用场景
css 不定宽高垂直居中（就说了两个）定宽高呢
array 方法有哪些，分成两类的话怎么分
两个数组比较，判断是否有相同元素。说了一个 set，一个 obj

假设里面有对象，只要对象属性相同就算相同该怎么做，说了一个 JSON.stringify 转换为字符串，不过好像不是他要的答案，不知道还有更好的方式吗
数组的方法有哪些，让你分两类怎么分，是否改变原数组
深拷贝和浅拷贝，深拷贝有哪些原生的方法吗，没有。有 JSON 的序列化和反序列化，递归两种。object.assign 不是吗（object.assign 是浅拷贝）
JSON 序列化的缺点（不能复制函数，正则，date 这些对象，还有循环引用的问题）
设计外卖的购物车，有哪些功能。如果外卖份数不够了该怎么做。（请求后台数据时保存下来，然后选择的时候判断，大于 disabled）

还有吗（说了一个用节流获取数据判断）然后问了他是正常开发中是怎么解决的，就是上面说的那样
用户点外卖的份数怎么和后台通信，一开始理解错了，说提交的时候才通信，然后他说用户万一中断了再进了怎么获取，说了 localStorage，然后问了下为什么不用 cookie
前端需要哪些技能，了解哪些东西。提到了 node，问了下 node 在前端的用处，commonjs 和服务端渲染（只是知道有这么个东西）
设计模式（简历上的）说一下订阅者模式
git （简历上的）怎么删除一个远程分支

美团外卖前端（二面）

作者：灵活的死胖子

链接：https://www.nowcoder.com/discuss/99736

来源：牛客网

自我介绍
设计一个证券列表，有证券号，证券名，价格，按钮，点击按钮显示价格（提到了事件委托，target）

事件委托和 onclick 的区别

tagegt 有哪些对象
getElementsByClassName 和 querySelectorAll 的区别，说了一个传的选择器，一个字符串，然后问返回值呢，没有答上来，查了一下一个返回的是 Static Node List，一个返回的是 Live Node List。
如果用户疯狂点击提交按钮怎么办（点击以后禁用或者事件节流）
如果用户用脚本点击呢（验证码等一系列验证用户身份的东西）

考虑所有的情况完整的说一遍

用什么请求获取（get）
输入 url 到显示的过程
为啥 js 放在 body 最后（阻塞渲染）
cookie 和 localstorage 的区别
一个场景：云笔记，用户手机端，pc 端，pad 端分别同步了，然后 pc 端，pad 端断网，分别修改，然后一个先联网一个后联网，冲突怎么处理。（提示从数据结构考虑，感觉可能用栈处理好一点，然后又问设计哪几张表，分别有哪些字段，这个真不会，然后说自己可能不太清楚）
es6 箭头函数
平时用美团的产品吗，说一下对美团的看法

字节跳动前端面试（一面）

来源：CSDN

原文：https://blog.csdn.net/zhang6223284/article/details/87926458

项目相关
跨域方式
安全相关 XSS 及解决方案
compose 函数实现
koa 中间件机制
node 爬虫过程（简历）
react 和 vue 区别
虚拟 dom
https 连接过程
react 性能优化
node Event 实现（发布订阅实现）
写一个函数，实现

['a','0'],['b','1'],['c','2']] => ['abc','ab2','a1c','a12','0bc','0b2','01c','012'']

node 事件循环机制
commonjs 及 ES6 Module 的区别

字节跳动前端面试（二面、三面）

作者：[Object object]

来源：CSDN

原文：https://blog.csdn.net/zhang6223284/article/details/88188612

二面

对函数式编程了解说一下纯函数，偏应用，柯里化，compose 分别是什么

写一下柯里化
apply，call，bind 的区别
一段代码, 为什么 3 不打印（这里说错了，应该是打印的），1 最后打印

setTimeout(function() {
    console.log(1)
}, 0);
new Promise(function executor(resolve) {
    console.log(2);
    for (var i = 0; i < 10000; i++) {
        i == 9999 && resolve();
    }
    console.log(3);
}).then(function() {
    console.log(4);
});
console.log(5);

说一下事件循环
BFC 和 IFC 有了解吗，BFC 特性及条件
盒模型
css 画一个平行四边形，translate
浏览器输入 url 到渲染
缓存
状态码了解哪些，301 和 302 区别
option 方法知道吗
排序算法，事件复杂度，归并，快排，堆排的应用场景
CSRF 原理及防御
ES6 用过哪些
最近收获较大的一篇文章及收获
设计消息通知，比如点赞，评论这些通知

三面

顺时针打印矩阵（如果没过肯定就是因为这题，面试官都快把答案说出来了我还是没做出来）
http 和 https 区别及建立连接的过程
instanceof 原理（代码）
寻找二叉树中路径是否存在某条值等给定值的路径，看我算法比较差就让我说了思路
自己写的爬虫里面的一些细节及如何处理反爬
最有成就感的一件事

快手前端面试（一面、二面）

作者：灵活的死胖子

链接：https://www.nowcoder.com/discuss/101914

来源：牛客网

一面

CSS3 选择器有哪些（不太了解）
那你了解的选择器有哪些（伪类伪元素，兄弟，子元素，后代）怎么写（h1 h2，h1>h2）
CSS 两栏布局（float table flex）两列等高布局
浏览器渲染的过程（html 构建 dom，css 构建 cssom，这两个构建 render tree，渲染）
怎么判断一个文件是 html（content-type？有哪些值 json JavaScript，其他的不太了解）
http 缓存（强缓存和协商缓存，中间有些自己理解的问题，面试官指出来了）
301 和 302 状态码
js 基本数据类型
typeof 的值有哪些
还有哪些判断类型的 api （instanceof Array.isArray constructor Object.prototype.toString.call）
bfc 的特性（说了块和靠边）
科学计数法，将 24315436 转换成 24,315,436

之前看过这个的正则就用正则写了

function change(num){
    var str = num + "";
    str.replace(/\B(?=((\d{3})+)$)/g,',');
    // str.replace(/\B(?=(\d{3}+)$)/g,','); 当时是这么写的，少加了个括号，没改完他就说思路是对的
    return str;
}

?= 的作用（正向预检）

// 写出一个数组展开函数, 如输入：[1,[2,[3,4,2],2],5,[6]], 则输出：[1,2,3,4,2,2,5,6]

// 因为和深度无关，所以说最简单可以这样

function flatten(arr){
    var res = arr.join().split(',');
    res = res.map( ele => +ele)
    return res;
}
// 还有吗，递归，写一下
function flatten(arr){
    var array = [];
    arr.forEach(ele => {
        if(Array.isArray(ele)){
            array.push(...flatten(ele));
        } else {
            array.push(ele);
        }
    })
    return array;
}

let var 区别（var 存在变量提升，let 块级作用域，暂时性死区，let 可以重复定义吗，不可以）
事件模型及事件委托
写一下深拷贝（这个就不写了，网上有）还有哪些方式（JSON 序列化）还有吗（我知道的就这两种，还有其他的吗）你的答案是对的，但是想看看你知识的广度
软件工程方面看过哪些书（高级软件工程，人月神话看过吗，不清楚）
设计模式（单例和装饰者讲一下，单例模式用处，AOP 知道吗，不太了解，好像是 before 函数和 after 函数）
排序算法时间最优（nlogn 的吧，哪些？快排，堆排，归并）

快排最坏 n2，什么情况下，基本有序

二面

实现一个函数 findLastIndex(), 返回指定数在“有序”数组中最后一次出现的位置findLastIndex([1,2,3,3,3,4,5], 3), 返回 4

// 刚开始写的有点问题，没有判断全部相等的情况，后面提醒写上了，写的比较粗糙，如果有更好的可以分享一下。

function findLastIndex(arr,num){
    var mid,left,right,pos = -1;
    mid = Math.floor(arr.length/2);
    left = 0;
    right = arr.length - 1;
    if(arr[left] != arr[right]){
        while(Math.abs(left - right)!= 1){
            if(arr[mid] === num){
                pos = mid;
                left = mid;
                mid = Math.floor((left + right)/2);
            }else if(arr[mid] > num){
                right = mid;
                mid = Math.floor((right + left)/2);
            }else if( arr[mid] < num){
                left = mid;
                mid = Math.floor((left + right)/2);
            }
        }
    }else{
       pos = arr.length - 1;
   }
    return pos;
}

请实现一个函数，功能为合并两个升序数组为一个升序数组
instanceof 实现原理

其他还有哪些方式判断，跟一面差不多
工程化的东西有用过吗（自己有学过，然后让讲一下过程，讲的不好，可以说很差）
模块化（ES6 Module AMD CommonJS 区别）import 和 require 区别（一个值的拷贝，一个值的引用，还有吗，不清楚）
事件绑定哪些（onclick addeventlistener 还有 html 页面里面 onclick）dom0 级和 dom2 级事件有哪些（一开始理解错了，后面提醒是其实就是 onclick 和addeventlistener 的区别）什么情况下用到事件委托
css 移动端适配有哪些（viewport，media query，rem）
移动端有哪些单位（px，rem）还有吗（em，好像不适合移动端，而且他是叠加计算的）
那 em 和 rem 是什么，rem 就是 :root { font-size: 16px }，em 根据父元素的 font-size。默认值多少 16px;

小米前端面试（一面）

作者：灵活的死胖子

链接：https://www.nowcoder.com/discuss/109130

来源：牛客网

https 具体的传输过程，其实不是问题，他接触的不太多，所以让我讲一下
dns 解析过程，也是接触的不太多，让讲一下
缓存，expire 和 cache-control 区别(都是用的系统时间，但是一个用的绝对时间可以设置，后者用的相对时间)
跨域，主要让讲了一下 jsonp
html 语义化的理解
引入 css 有哪几种方式
css 的单位有哪些，你常用的有哪些
css 优先级
bfc 特点，创建方式
js 原型链
js 解包拆包，就是字符串调用 String 对象方法的过程，一开始没理解，后面才懂
js 类型转换，比如 object 和 string 做加法运算

CVTE面试（一面）

CVTE面试（二面）

CVTE HR面试

腾讯面试

顺丰HR面试

顺丰科技前端（一面）

阿里一面

多益网络一面

拼多多前端（一面）

拼多多前端（二面）

猿辅导前端（一面）

老虎证券

网易考拉前端（一面、二面）

一面：

二面：

美团外卖前端（一面）

美团外卖前端（二面）

字节跳动前端面试（一面）

字节跳动前端面试（二面、三面）

二面

三面

快手前端面试（一面、二面）

一面

二面

小米前端面试（一面）

继续阅读