2024年最全两年前端蚂蚁字节滴滴面试经历总结(3)，Web前端事件分发面试-CSDN博客

本文链接：https://blog.csdn.net/2401_84617873/article/details/138855700

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

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

我特地针对初学者整理一套前端学习资料

前端路线图

vue.js的36个技巧

跨域的处理方案有哪些

常用的：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 的执行过程大致如下：

创建一个对象
将对象的 _ *proto_* 指向构造函数的 prototype
将这个对象作为构造函数的 this
返回该对象。

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 允许返回字符串处理大数

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

二面

聊项目

项目基本是问：

项目难点以及怎么解决的
项目有哪些亮点？

写一个 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 原理

大致就是：

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