2024年最全两年前端蚂蚁字节滴滴面试经历总结(2)，2024年最新面试web前端自我介绍

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

前端资料汇总

高频题，考察 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 obj === ‘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) {

// TODO

return fn;

}

// 这是个 es6 的一个例子，要实现 extends 的功能。

class Man extends Human {

cons (args) {

super(args)

// xxxxx

}

speak() {

console.log(‘’)

}

}

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

function multi(str1, str2) {

}

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

三面

聊项目

写一个防抖函数

算法题:https://leetcode-cn.com/problems/bu-ke-pai-zhong-de-shun-zi-lcof/

小节

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

讲道理一面还是比较常规的，二三面因为都是团队 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

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

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

Vue 编码基础

2.1.1. 组件规范

2.1.2. 模板中使用简单的表达式

2.1.3 指令都使用缩写形式

2.1.4 标签顺序保持一致

2.1.5 必须为 v-for 设置键值 key

2.1.6 v-show 与 v-if 选择

2.1.7 script 标签内部结构顺序

2.1.8 Vue Router 规范

Vue 项目目录规范

2.2.1 基础

2.2.2 使用 Vue-cli 脚手架

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】