2019秋招前端面经

参加2019年秋招，投递Web前端开发工程师，在7月开始准备面试知识点，并投递提前批简历（基本在8月初截止）。8月份开始笔试、电话视频面试和现场面试，边面试边总结知识点，并深入不懂的问题，到9月初提前批全部结束，开始收割offer。收到了百度、网易、华为、拼多多、万得、小红书offer。

• 阿里提前批一面（7月22日）（18分钟）（挂）

  • 为什么做前端
  • 项目经历（做了什么项目，使用了什么技术，介绍了一通）
  • 项目中你遇到最有挑战性的问题是什么（jQuery封装了一个表格树组件）
  • jQuery事件机制是怎么实现的？（答得不好）。
  • js异步加载的方式（当时没明白是要问异步加载js文件的方式？还是js异步处理的方法？现在想着应该是想问第一种，我选了第二种回答）
    • 答了三个事件机制、回调函数、promise。（提示：async），想起来还有generator，async函数，其实还有观察/订阅
    • 继续问：多个异步任务如何确认都完成了（把es6的promise和jquery里面的promise搞混淆了，API when()和all()搞错）
  • proxy是用来干什么
  • 最擅长的课程是哪个？（没准备好，不知说哪个）
  • 数据结构：单链表如何查找中间节点（没有想到使用两个指针一快一慢）
  • 你有什么问题想要问我？

• 百度

  • 内推一面（8月14号）（20分钟）
    • 自我介绍（多次打断我，问哪里人，怎么是做web前端）
    • 实习项目介绍（完成了哪些工作，使用了什么技术）
    • RBAC是什么（由项目中引来的，做了一个用户权限管理模块，Role-Based-Access-Controll）
    • 什么是搜索二叉树？
    • 在二叉树中如何找出两个节点的第一个公共祖先？（说了算法思路就被停止了，说等hr联系后续的面试）
  • 学校专场提前批面试（8月21号）（一个小时）
    • 简单介绍了项目，聊了聊用过或熟悉哪些前端知识
    • 为什么做前端
    • angularjs 是怎么加载html的(答错方向了，答了ng-router加载html的方式，面试官其实想问bootstrap函数)
    • 问了对原型的理解（把原型对象、构造函数、实例对象三者之间的关系用图描述了一下)
    • 写了一个函数，输入一个只包含大小写字母的字符串，将其中的大写字母转换成下划线“_”加小写字母；
    • 由于上面函数用了typeof判断字符串类型，然后问了typeof判断类型的原理，与instanceof有什么区别
    • es6有哪些新特性
    • 用promise封装一个图片动态加载的方法，并写出如何调用该函数
    • 问了一个基础问题，什么是红黑树
    • 堆、栈、堆栈的区别
    • 聊了一下前端的现状
    • 你有什么问题想要问我？
  • 百度二面（8月24号）（电话面试，一个半小时）
    • 纯CSS怎么实现点击一个元素，背景颜色切换，不能使用js和点击事件（使用了angular里面的ngclass，双向绑定可以做到，不过隐形的使用了js；a标签的伪类可以做到颜色的变色，可是没法循环点击变色；最后实在想不出来了，小哥哥提示input，表示没想到，最后直接告诉我checkbox的:check伪类会有一个选中和未被选中的状态，可以实现）
    • 原生的checkbox不好看，怎么自己定义（想到了使用伪类:before和:after，这个思路是对的。但是如果隐藏掉input元素，那么就无法点击了，我表示不知道怎么做。面试结束后去看了自定义checkbox，原来点击绑定input的lable元素可以触发checkbox 的选中与未选中事件）
    • JS问题：如果一个页面是一个新闻列表，上面有一层透明的遮罩层，用户不感知这层遮罩，当用户点击的时候如何能够点击到下面的新闻列表（提示：元素点击穿透问题，表示学识浅薄、闻所未闻，小哥哥一直慢慢的引导我，最后还是没有答出最恰当的方案来）
    • 其中回答JS问题的时候，有聊到js事件和Jq的trigger方法，问了我怎么实现的
    • 浏览器缓存介绍一下
    • 文件加载出错，如何捕获异常（表示没用过，小哥哥提示window.onerror捕获异常），如何在第三方脚本里面捕获错误信息
    • 然后看了我项目中写了文件上传工作，问JS有哪几种方式上传文件，各有什么优缺点（居然还有iframe的方式上传文件）
    • 算法和数据结构：用栈来实现队列操作
    • 实现大小括号的匹配
    • 找出数组中两个数之和等于一个数
    • 有什么想问我的。
  • 百度三面-技术综合面（9月初）（电话，一个小时）
    • 先自我介绍
    • 为什么做前端
    • 在实习中学到了什么
    • 项目中最让你印象深刻的事情
    • 遇到过什么挫折
    • 你觉得做的最有成就感的事情是什么
    • 在校期间有没有参加过什么社团
    • 那门课程你觉得你学的最好（数据结构）
    • 讲讲你对数据结构的认识
    • js、html、css你最擅长哪一个（js），为什么
    • 问个js的问题，讲讲你对原型的理解
    • 你有什么问题要问我的

• 阿里内推一面（8月底电话）（挂）

  • 项目经历有点少啊，介绍以下项目？
  • webpack、grunt、gulp有什么区别（简历里面写了）
  • webpack里面loader和plugin的作用
  • react的生命周期（坑的开始）
  • react路由原理（描述的不清楚）
  • react组件通信的方式（context实现组件通信更方便，知道原理吗？表示没用过，说react是自己刚学的）
  • angularjs双向绑定的原理
  • 闭包是什么
  • 面试就先这样吧，你有什么问题要问我的？

• 美团一面（8月16号，1个小时）（挂）

  • 自我介绍（官方的介绍免掉，从项目开始，为啥做前端）
  • 最近有参加过面试吗，面的怎么样？都问了什么问题？
  • 看你写了这么多技术栈，对react和angularjs熟悉度怎么样？
  • 看你有做过移动端开发，聊聊你对移动端、客户端、web端开发的理解
  • 浏览器缓存了解吗，介绍一下（讲了很久，自己有点迷茫，面试官一直在揪细节，细节到if-modified-since的每个属性值是什么意思）
  • 什么原因去了解到浏览器缓存的？（好奇http的状态码304，然后就追溯到了浏览器缓存）
  • 你觉得缓存有必要吗？（往浏览器性能优化方面引了）
  • 聊聊怎么优化浏览器性能？（讲到缓存是其中一种，结果面试官又揪着缓存的问题不放，看来他很重视）
  • 缓存实现还有哪些（说到了CDN缓存，manifest缓存文件）；
  • CDN是怎么实现缓存的；
  • 为什么CDN可以访问到最近的服务器资源；
  • 同源策略知道吗，讲一讲（讲了跨域访问的几种方式）
  • 问你一些基础知识，你对css，html，js熟悉吗，我们来选一个聊聊（我选了js）
  • 你为什么选择js（说了一大堆）
  • js原型讲一讲
  • 自己怎么实现一个观察/订阅模式的
  • TS（typescript）熟悉吗？（在angular中用过，了解一些基本特点，然后介绍了它与js的差别）
  • 装饰器Decorator知道吗（是指@注解吗？在angular里面用过，没有详细去了解怎么实现的（其实es6里面的Decorator是一样的，看了忘了））
  • react熟悉吗（了解基本知识），react生命周期里面有个shouldComponentUpdate解释一下
  • react-router原理是什么？
  • vue里面的事件机制讲讲（不好意思没有学过vue），那讲讲angularjs里面的事件机制
  • webpack用的什么版本的（用的3.0，现在已经到webpack4.0了），那你对比过4.0和3.0的新增特性吗（还没有来得及看），node用的什么版本的（8.9.1）
  • 你觉得你自己的性格怎么样
  • 对于移动端的开发了解的怎么样（目前只做过安卓客户端开发）
  • 你有什么问题要问我的（问了业务，技术栈，对以后的个人发展方向有什么建议）

• 携程内推一面:（8月21日现场，半小时）（挂）

  • 自我介绍（简单讲了项目，做了什么）
  • 介绍一下原型（把原型对象、构造函数、实例对象三者之间的关系用图描述了一下)
  • SEO优化了解
  • 接下来就开始傻逼模式了：react会吗，自学的
  • 有移动端开发经验吗，只做过安卓原生应用
  • 做过小程序吗，没有做过
  • 混合式开发hybrid会吗，不会
  • react-native会吗，不会
  • 有native方面的开发经验吗，没有
  • redux会吗，不会
  • backbonejs会吗，不会
  • requirejs会吗，只用过他的模块加载，那懒加载和运行时加载懂吗，不懂
  • sass和less会吗，用过sass，他们有什么区别，简单描述了一下
  • flex布局会吗，会。flex怎么实现元素的水平垂直居中
  • 如果改变flex-direction为row，主轴和副轴怎么变化，水平垂直居中的属性还一样吗
  • 你有什么问题想问我的吗

• 华为专场招聘会面试（8月22日现场）

  • 一面：（大概半小时）
    • 介绍了项目的架构，然后聊了一会就完了
  • 二面（部门主管）（大概半小时）
    • 从非技术角度介绍一下自己
    • 谈谈你的职业生涯规划
    • 聊聊你对华为的认识

• 网易杭州专场招聘会面试（8月25日）

  • 一面（30分钟）
    • 简单介绍项目以及自己做了什么工作（感觉面试官没有在意，听了就过了）
    • H5有哪些新特性（答得不全，很多不记得了）
    • 由于讲到了H5新增的Web storage，问我这是什么（localstorage和sessionstorage）——>它们有什么区别
    • css有哪些伪类和伪元素
    • angularjs的路由机制是什么（简历上的项目是angularjs做的）
    • 又问了我History了解吗
    • jquery(简历里面提到熟悉jquery)的deffered对象是什么？
    • 跟es6里面的promise有什么差别（Jquery分为deffered和promise，jq可以外部改变pedding的状态，后来面试官提醒我异常处理，等我反应过来catch的处理之后，他开始问我下一道问题了）
    • BOM和DOM是什么，BOM有哪些API（只答出了window和location，其他忘记了）
    • 问到了js事件机制（捕获，处理，冒泡），——>有哪些事件类型，哪些事件不能冒泡
    • 然后面试官说结束了，让我外面等消息（感觉答得不好，以为凉了，结果出门级收到了二面的通知）
  • 二面（1个小时）
    • 简单介绍项目以及自己做的工作（很多时间在问框架的相关东西）
    • 比如：如果让你设计一个项目，你会考虑什么哪些问题(我从需求（项目类型）、使用场景(PC端还是移动端还是混合式应用)、公司原有的项目架构、用户流量、开发效率（前后端分离？采用哪些组件）、用户体验友好性（布局、色彩等等）这几个方面讲了我知道的东西)；
    • 然后问了如果前后端分离，你觉得采用哪个框架合适（感觉这是在套路我，我说前后端分离跟框架没有关系，这是开发的一种模式，都是为了提高开发效率；分离和不分离的区别是发送的网络请求不再同一个域里面，每个框架封装的都是原生的XML对象，所以本质上是没有差别的）
    • 问题就来了：如何实现跨域访问（详解了三种方式）
    • content-type有哪些值
    • （由于讲到了布局）问我三栏式布局有哪几种方式
    • css中高度重叠问题
    • 问我用webpack做了什么，为什么还要用gulp（讲了webpack，gulp，grunt的基本用法，以及它们的差别，至于为什么要把webpack和gulp结合起来用，我说没有太弄清楚）
    • 问我用过node没有（只用了node的npm）
    • 然后还是在聊自己的项目经历（表示项目很乱，自己去做了哪些改变和工作，自己会主动去做什么东西，以及开发的过程，学习的方法）
    • 有没有自己分装过组件（jQuery做过表格树，用来干什么，遇到了哪些问题，组件的实用性有哪些优势和缺点都描述了一遍）
    • 问我用过es6吗（我说实际项目间接用过，因为TypeScript就是es6的超集，然后自己做项目、写算法都会使用es6的语法练习）
    • 最后写了一个函数arrayToObject（要求：一个具有通用性的函数，能在任何场景中使用），输入数据：[{a:1, b:'eat', c: 'foo '}, {a:2, b:'sport', c: 'ball'}, {a:3, b:'job', c: 'teacher'}], 输出数据：{1：{a:1, b:'eat', c: 'foo '}，2：{a:2, b:'sport', c: 'ball'}，3：{a:3, b:'job', c: 'teacher'}}，要求：具有过滤功能，根据过滤条件把数组中符合条件的元素不转换成对象，可以采用数组中任意元素对象的属性值作为输出对象的键
    • 你有什么问题要问我吗
  • 三面（HR面，40分钟）
    • 自我介绍（为什么考研，为什么做前端，去了哪个公司实习）
    • 在公司里面做了什么项目，学到了什么，遇到了什么困难，怎么解决的
    • 为什么没有留在实习的公司
    • 未来的规划，期望的薪资待遇
    • 你有什么问题想要问我的

• 小红书

  • 一面（9月1日视频面试，1小时）
    • 自我介绍
    • h5有哪些新特性（提到localstorage和sessionstorage）
    • localstorage和sessionstorage有什么区别（追问：可以存储对象吗，答不可以，如何实现对象的存储）
    • cookie和session与上面的两个有什么区别（追问：cookie可以设置多少个，总大小多大）
    • 缓存机制（追问：如何实现接口缓存，追问：CDN缓存）
    • 浏览器加载页面流程
    • 浏览器如何渲染内容和样式的
    • js异步事件机制（event loop答得不太好）
    • DOM事件机制
    • 牛客网写代码实现Object.assign(target, ...args)方法，提示：polyfill（我犯了两个错误，第一直接定义在了原型对象上面，第二考虑问题不全面，target为undefined和null的时候，args不是对象的时候没有进行判断）
  • 二面（9月12日现场，半个小时）
    • 自我介绍+项目经验
    • angular、react、vue的区别
    • webpack、gulp、grunt的区别
    • 详细介绍webpack、模块的功能、如何实现项目热更新，版本4的新特性
    • 现场写代码和程序设计题（for循环的闭包问题，promise与setTimeout程序题，回调函数的使用，方法的分装，es6的数组和字符串基本api使用）
    • 有什么问题问我
  • 三面（9月12日现场总监面，半小时）
    • 自我介绍+项目经验
    • 移动端开发与web端开发的区别
    • 搭建一个项目需要考虑那些问题
    • 如何实现一个通用的日期组件，扩展为时间段选择组件（我使用angularjs来分装组件）
    • 有什么问题
  • 四面（9月12日现场HR面，半小时）

• 喜马拉雅一面（9月30日电话，1小时）（挂）

  • 自我介绍（项目经验，实习情况）
  • 详述登录流程
  • 用户登录系统后，如何实现浏览器回退之后不会再进入登入页，服务端需要做哪些操作
  • 如何实现第三方账号登入，比如github账号登入网站
  • 浏览器缓存（追问细节：如果expires或者max-age没有过期，但是服务器更新资源了，客户端如何获取新的资源）
  • localstorage和sessionstorage，cookie的区别（追问，localstorage如何实现对象的存储；cookie在不同域能够访问，-答不能，那如何实现跨域访问cookie；继续追问：cookie在父子域能否获取到；追问，storage在域名相同、访问端口不同时能否共享）
  • js原型和继承
  • css中position有哪些值（追问，absolute相对谁定位）
  • 浮动流float
  • get请求和post请求有什么差别
  • 输入一个url到页面加载的整个流程
  • react里面的高阶组件时什么
  • react的受控组件和非受控组件的区别
  • csrf攻击是什么，怎么防御csrf攻击
  • sass的继承方式

• 拼多多

  • 一面（9月2日电话面试，40分钟）
    • 自我介绍
    • promise和rxjs里面的observe有什么区别
    • h5新特新有哪些（往自己熟悉的方向引）
    • localstorage和sessionstorage的区别（追问：如何存储对象）
    • 浏览器缓存机制
    • es6用过哪些
    • 设计模式了解哪些（自己使用过哪些）
    • angular如何实现两个component组件如何保证class相同的样式不覆盖
    • angular如何实现依赖注入
    • 进入闲聊模式
  • 二面（9月7日电话面试，30分钟）
    • 还是些常规问题。。。。