今年面试还是比较顺的,面了五家公司(酷家乐、拼多多、字节、滴滴、蚂蚁),都过了。

在文章里我不仅会列出面试题,还会给到一些答题建议,个人能力有限,也不能保证我回答都正确,如果有错误,希望能纠正我。

字节

一面

说一下浏览器缓存

浏览器缓存分为强缓存协商缓存,强缓存会直接从浏览器里面拿数据,协商缓存会先访问服务器看缓存是否过期,再决定是否从浏览器里面拿数据。

控制强缓存的字段有:Expires和Cache-Control,Expires 和 Cache-Control。

控制协商缓存的字段是:Last-Modified / If-Modified-Since 和 Etag / If-None-Match,其中 Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高。

cookie 与 session 的区别

Session 是在服务端保存的一个数据结构,用来跟踪用户的状态,这个数据可以保存在集群、数据库、文件中;
Cookie 是客户端保存用户信息的一种机制,用来记录用户的一些信息,也是实现 Session 的一种方式。

详见:COOKIE和SESSION有什么区别?

浏览器如何做到 session 的功能的。

其实就是考察 http 怎么处理无状态是怎么处理的,具体可见 COOKIE和SESSION有什么区别?里面的答案。

解释一下:csrf 和 xss

XSS:恶意攻击者往 Web 页面里插入恶意 Script 代码,当用户浏览该页之时,嵌入其中 Web 里面的 Script 代码会被执行,从而达到恶意攻击用户的目的。

CSRF:CSRF 攻击是攻击者借助受害者的 Cookie 骗取服务器的信任,可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击服务器,从而在并未授权的情况下执行在权限保护之下的操作。

详见:前端安全面试题

怎么防止 csrf 和 xss

详见:前端安全面试题

跨域的处理方案有哪些

常用的:jsonp、CORS、nginx 代理,完整的大概是九种,可见:九种跨域方式实现原理(完整版)

CORS 是如何做的?

服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。

对于 CORS ,Get 和 POST 有区别吗?

其实想考察的就是什么时候会有预检请求(option 请求)

了解 HTTPS 的过程吗?

推荐浪浪的 深入理解HTTPS工作原理

webpack 如何做性能优化

webpack 做性能优化主要是考虑打包体积和打包速度。

体积分析用 webpack-bundle-analyzer 插件,速度分析用:speed-measure-webpack-plugin 插件。

打包速度优化瓶子君的:玩转 webpack,使你的打包速度提升 90%。

es module 和 commonjs 的区别

高频题,考察 ES6 模块和 CommonJS 模块 的区别。关键点:1. 前者是值的引用,后者是值的拷贝。 2.前者编译时输出接口,后者运行时加载。

推荐文章:前端模块化:CommonJS,AMD,CMD,ES6

react 里如何做动态加载

React.lazy ,另外通过 webpack 的动态加载:import() 和 ensure.require

动态加载的原理是啥,就是 webpack 编译出来的代码

讲道理 webpack 动态加载就两种方式:import()和 require.ensure,不过他们实现原理是相同的。

我觉得这道题的重点在于动态的创建 script 标签,以及通过 jsonp 去请求 chunk,推荐的文章是:webpack是如何实现动态导入的

笔试题:页面结构包括页头(永远在顶部)、主体内容、页脚,页脚永远在页面底部(不是窗口底部),即内容高度不够时,页脚也要保证在页面底部

常规题,考察基本的布局

笔试题:写 new 的执行过程

new 的执行过程大致如下:

  1. 创建一个对象
  2. 将对象的 _ proto_ 指向 构造函数的 prototype
  3. 将这个对象作为构造函数的 this
  4. 返回该对象。
function myNew(Con, ...args) {let obj = Object.create(Con.prototype)let result = Con.apply(obj, args)return typeof result === 'object' ? result : obj
}

笔试题:写一个处理加法可能产生精度的函数,比如 0.1 + 0.2 = 0.3

思路:对于浮点数在底层处理是有问题的,所以目的就是想办法将所以的浮点数转化为整数进行处理,同时乘以一个倍数(A),然后加起来后再除以这个倍数(A),这个倍数应该是两个数中最小的那个数的倍数,比如 0.1 + 0.02 ,那么应该同时乘以 100,变为 10 + 2,然后再将值除以 100。

1000000000 + 1000000000 允许返回字符串 处理大数

大数问题就是通过字符串来处理,从后往前加,然后处理进位的问题。

二面

聊项目

项目基本是问:

  1. 项目难点以及怎么解决的
  2. 项目有哪些亮点?

写一个 es6 的继承过程

这个题我觉得出得很好,很考察基本功。

// 这个是要实现的方法
createClass = fun(sons, super) {// TODOreturn fn;
}// 这是个 es6 的一个例子,要实现 extends 的功能。
class Man extends Human {cons (args) {super(args)// xxxxx}speak() {console.log('')}
}

写一个大数相乘的解决方案。传两个字符串进来,返回一个字符串

function multi(str1, str2) {}

这道题跟一面的时候思路差不多,只是进位的时候不一定是 1。

三面

聊项目

写一个防抖函数

算法题:https://leetcode-cn.com/probl...

小节

字节果然是出了名的考算法题比较多的,基本每面都会算法题和编程题,对编程能力比较看重吧。

讲道理一面还是比较常规的,二三面因为都是团队 leader 和更高级别的,问的技术细节也比较少了,重点考察一些技术方案和项目的问题。

滴滴

一面

webpack 原理

大致就是:

  1. 初始化参数:从配置文件和 Shell 语句中读取与合并参数,得出最终的参数;
  2. 开始编译:用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译;
  3. 确定入口:根据配置中的 entry 找出所有的入口文件;
  4. 编译模块:从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理;
  5. 完成模块编译:在经过第4步使用 Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系;
  6. 输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会;
  7. 输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统。

在以上过程中,Webpack 会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。

babel 原理

babel的转译过程分为三个阶段:parsing、transforming、generating,以ES6代码转译为ES5代码为例,babel转译的具体过程如下:

  1. ES6代码输入
  2. babylon 进行解析得到 AST
  3. plugin 用 babel-traverse 对 AST 树进行遍历转译,得到新的AST树
  4. 用 babel-generator 通过 AST 树生成 ES5 代码

虚拟 DOM 的理解

从 React 历史的长河里聊虚拟DOM及其价值

项目里如何做的性能优化

这个跟我的项目相关。

写过webpack loader 或者插件吗

讲讲你写的 babel 插件

二面

redux 的原理

redux 做状态管理和发布订阅模式有什么区别

redux 其实也是一个发布订阅,但是 redux 可以做到数据的可预测和可回溯。

react-redux 的原理,是怎么跟 react 关联起来的

react-redux 的核心组件只有两个,Provider 和 connect,Provider 存放 Redux 里 store 的数据到 context 里,通过 connect 从 context 拿数据,通过 props 传递给 connect 所包裹的组件。

了解多端的原理吗?

不清楚,没了解过。

http 与 tcp 的关系

tcp 可以建立多个连接吗?

我估计是想问 http 的管线化,当时忘了这个叫啥了

介绍一下为什么要有 三次握手,四次挥手

写过 babel 插件吗?用来干啥的?怎么写的 babel 插件

写过一些简单的 babel 插件,说了我们公司用来通过代码生成文档的 babel 插件是怎么做的。

知道怎么转化成 AST 的吗?

我估计就是问词法分析和语法分析相关的

研究过 React 的运行时吗?

职业规划。

三面

项目介绍

说一下你的项目有哪些复杂的点,以及怎么解决的

这个聊了挺久的,还聊了一些数据量比较大的怎么处理。

你们的业务组件库有多少个,是什么样的组件

权限组件是怎么设计的

会node 吗?

我说我只会增删改查,会点 express,然后就开始一顿狂轰乱炸的知识。

介绍一下你对中间件的理解

怎么保证后端服务稳定性,怎么做容灾

感觉已经超纲了,基本没做过,还好之前跟后端同学聊过他们怎么做容灾的,还记得两点说了下。

  1. 多个服务器部署
  2. 降级处理,服务挂了,从缓存里面取。

怎么让数据库查询更快

  1. 索引
  2. 如果数据量太多了可以拆表,分多个数据库

数据库是用的什么?

mysql

为什么用 mysql

希望滴滴能提供给你什么?

这个题其实还挺常考的,可以好好准备下,背一下答案。

最后面试官问我有什么想问他的么,我说没有,因为我之前问得挺多了。不过他还是给我介绍了他们业务还是很厉害的,集团第三,还拿了 A 级绩效,公司有很多技术上的沉淀,跨端呀,web IDE 呀,等等

这个时候我就感觉自己能过了,感觉是在吸引我去,偷笑。

四面

介绍一下项目的难点以及怎么解决的

一起讨论那些难点

自己有什么技术上的优势

最近在研究什么技术?

职业规划

移动端的业务有做过吗?

希望滴滴能提供给你什么?

当业务重的时候怎么安排时间?

小节

滴滴我面的这个岗位是可能回去做一些多端应用,所以会涉及到很多 webpack 和 ast 相关的东西,所以这些问得比较多,感觉这个组还是很不错的,能做到很多技术上的东西。

蚂蚁

一面

讲讲来蘑菇街都干了哪些事情

聊聊有什么技术上的沉淀

除了 redux mbox dva 还用过其他的 状态管理没

hooks 原理

看过 hooks 相关的草案吗

你对蚂蚁有什么期望,或者说技术的规划,想做的东西

vue3 的 类似 hooks 的原理是怎么样的

二面

聊项目,项目的难点,以及自己做了哪些事情

为什么项目里会引入 TS

dva 和 redux 的区别

职业发展,今年的打算

组件升级怎么让使用这个组件的人都知道。

如果让你设计项目自动设计组件升级,并且安全,你会怎么去设计

三面

全程聊项目,因为他不是前端的,所以没问前端任何知识,主要聊业务相关的,看看我对业务的理解,以及一些想法。

  • 项目难点
  • 怎么解决
  • 项目有什么改进的地方
  • 业务方怎么拿到反馈的,就是做的这个东西具体有什么用

小节

一面面试官问了很多我完全不知道的东西,我知道的东西可能答的比较随意吧,记不起来了。反正能深深的感受到面试对知识的广度和深度远超我很多很多,基本不在一个 level 的。

二三面已经是 P9 的大佬来面了,所以也没问太多的技术细节,都是考察一些技术的解决方案和项目的东西。

蚂蚁的面试其实还是比较难的,问题都不是那种有确定的答案,基本都是考察你平时的积累和经验。

最后

上一篇拼多多和酷家乐的面经之后有很多人问我工作几年,怎么学习的之类的,或者你面了这么多都过了是不是有什么技巧呀?

首先我目前工作了快两年了,18 年 7 月份毕业的。

关于如何准备面试的问题,我的策略是把自己会的东西以及常用的东西,尽量让面试官问不倒你,不会的东西可以跟面试官说不会,不怎么了解,那一般面试官也不会问相关的问题了,如果连自己常用的东西都了解得不深,那么就不太有可能把平时不常用的了解得很深了。

比如我可能写 react 比较多,参与过组件库的开发,webpack 写得也比较多。所以我在准备的时候,就尽量准备的这些知识,了解我的人都知道,我对 react 研究得比较多,原理、性能优化都写过文章,所以如果考 react 的东西,我基本不担心。 对于 vue、移动端、小程序、node 啥的,我基本没准备,问倒的时候我就说仅仅了解,没有什么实战经验。

蚂蚁、字节、滴滴面试经历总结相关推荐

  1. 两年前端蚂蚁字节滴滴面试经历总结

    前言 最近两篇面试以及离职相关的文章不容错过哦. 离开蘑菇街后,我最近的一些想法 拼多多和酷家乐面试总结 今年面试还是比较顺的,面了五家公司(酷家乐.拼多多.字节.滴滴.蚂蚁),都过了. 在文章里我不 ...

  2. 2020 PHP 面试面经分享,历时三个月拿,最终入手字节,面试经历经验分享

    这是一篇迟到的面经.为什么呢?因为我现在已经入职字节快一周了.本应该在提离职后,入职字节前的一段时间内,完成历时差不多 3 个月的面试经历.但是,emem..... 懒嘛 --^ _ ^.写下这篇文章 ...

  3. 记一次蚂蚁金服面试经历

    蚂蚁金服大数据数仓岗位的面试经历 一.前言 本人一直在外企做传统数仓也差不多十年了,技术栈都是以关系型数据库和商业工具为主.看着日新月异的大数据技术的发展和数仓架构的不断迭代,想跳到互联网企业看看去接 ...

  4. 吴思里:字节前端面试经历

    吴思里:PCG腾讯文档面试经历 吴思里:字节面试经历 吴思里:阿里淘系前端面试经历 字节电商部门一面 自我介绍一下 了解flex布局吗 flex布局有什么属性 flex布局这些属性有什么值 你知道在什 ...

  5. 蚂蚁、字节、滴滴面试经历总结(都已过)

    前言 最近两篇面试以及离职相关的文章不容错过哦. 离开蘑菇街后,我最近的一些想法 拼多多和酷家乐面试总结 今年面试还是比较顺的,面了五家公司(酷家乐.拼多多.字节.滴滴.蚂蚁),都过了. 在文章里我不 ...

  6. 面试 | 蚂蚁金服面试经历

    晚上面试蚂蚁金服,前端,觉得大厂问的问题就是不一样,有纵向有横向,针对下列几个问题,我面试时候答的不好,现在重新学习,沉思一会... 第一个问题: 1.先问熟悉jq吗?解释一下jq的架构, jq源码的 ...

  7. 蚂蚁金服面试经历(内含大量干货)

    4号通过阿里工作的学长进行内推,7天简历评估,11号接到电话面试,尽管猝不及防回答仓促,但好在前期准备充分,通过.3天后进行现场面试,通知时间为早上10点.当日设了七点闹钟,结果五点五十三分惊醒后再无 ...

  8. b类 蚂蚁金服_蚂蚁金服面试经历

    最近朋友让猎头帮忙推荐了下蚂蚁金服,等了差不多一个多星期都没音信,他还以为简历挂掉了,突然晚上八点多一个电话打过来,直接电话面试.面试题大概如下 1. 先自我介绍下,讲下你负责的业务模块? 2. 业务 ...

  9. 蚂蚁金服面试经历 —— 临场发挥

    点击上方"芋道源码",选择"置顶公众号" 技术文章第一时间送达! 源码精品专栏 精尽 Dubbo 原理与源码 69 篇 精尽 Netty 原理与源码 61 篇 ...

最新文章

  1. Linux学习 - 目录的权限操作
  2. 浅析网络推广外包公司如何完成营销型网站建设完成网络推广外包?
  3. 【Android 组件化】路由组件 ( 注解处理器参数选项设置 )
  4. linux下mysql数据库目录迁移_linux下mysql数据库目录迁移问题
  5. springcloud官方文档_通俗易懂!Spring Cloud简介:官方文档翻译版
  6. Windows Mobile Gprs连接与数据传输
  7. 腾讯x5加载本地html乱码,腾讯X5内核播放器遇到的问题
  8. 抓取AJAX网页的方法-Firefox组件,C#集成
  9. 暑期训练日志----2018.8.26
  10. 世界坐标系到观察坐标系的变换步骤_带你轻松认识不同坐标系下向量的“变脸”——基变换...
  11. netcore 实现一个简单的Grpc 服务端和客户端
  12. 无法推送到GitHub-一直说需要合并
  13. 程序理解与程序员的未来
  14. 《MonkeyRunner原理剖析》第九章-MonkeyImage实现原理 - 第七节 - 文件图片及子图处理类BufferedImageChimpImage...
  15. mysql导入100000000需要多久_mysql做千万条压测数据
  16. 变分法,欧拉-拉格朗日方程推导
  17. 使用Python进行文件快速搜索(建立文件搜索索引)
  18. 课堂派考试可以切屏吗_雨课堂考试可以切屏吗?能切出去搜答案吗
  19. 科技巨头们在SaaS市场“雷声大雨点小”背后的症结
  20. SSM框架和SpringBoot框架的对比

热门文章

  1. Linux E514: write error (file system full?)错误
  2. \xe4\xb8\xad\xe6\x96\x87 phython 字符编码乱码问题
  3. OpenJWeb2.61 Java Web应用快速开发平台全部开源公告
  4. 如何用Stm32读取NPN型颜色传感器
  5. Iteratot(迭代器模式) 行为型
  6. C语言运算符与表达式课件,C语言课件(运算符和表达式).ppt
  7. 3部联动19层电梯控制器的验证计划
  8. 计算机等级考试数据库三级模拟题4
  9. 图像处理--OpenCV实现图像加噪与滤波
  10. unity3d 5.2 添加广点通广告