2024年2024 阿里字节快手面经 & 个人成长经验分享(4)，2024年最新2024阿里手淘Web前端面试题目

分享

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

const fn2 = (… args)=>console.log(‘I want sleep2’, … args)

const event = new Events();

event.on(‘sleep’, fn1, 1, 2, 3);

event.on(‘sleep’, fn2, 1, 2, 3);

event.fire(‘sleep’, 4, 5, 6);

// I want sleep1 1 2 3 4 5 6

// I want sleep2 1 2 3 4 5 6

event.off(‘sleep’, fn1);

event.once(‘sleep’, ()=>console.log('I want sleep));

event.fire(‘sleep’);

*/

业务四面 (35 min)

周末，人在梦游，刚下航母，就激灵灵接到电话，人还是糊的……

• 跨端的原理？我讲了几个例子：taro、uni-app，顺便提了 flutter、react native、小程序等的架构，具体怎么设计的。

• 动态表单能够运用在什么场景？我举了 7、8 个例子。

• 移动端适配相关的问题，应用场景。

• 我公司的业务讨论，是否了解过竞品等等，这里略过。

hr 五面 (60 min)

• 对于你项目的竞品有了解吗？说一下

• 你的项目与竞品相比，好在哪里，有什么优势？

• 下班后都在做什么，问的都是过往经历，问的太详细了，让人不舒服。

• 如果与同事发生了意见的不一致，你会如何解决呢

• 现在针对我们的业务，急需增加一个新的模块位置，你会怎么设计？数据怎么展示……

没错，hr 还问技术相关的问题。

整体感受

总体面下来没有让人紧张的感觉，中规中矩，从刚开始较高的心理预期到后面慢慢回落……由于我的水平有限，最终没有争取到多高的薪水。

快手二面挂

---

一面（60min）

• 自我介绍

• react 与 vue 的技术栈对比，说下区别

• B 端遇到的最复杂的数据结构是什么

• 快速实现 [1, 2, …100]，所有你能想到的解

• 数据展示的优化、数据截取和处理

• 实际场景中，哪些地方应用到了堆、链表、多叉树结构

• es6 及 es6+ 的能力集，你最常用的，这其中最有用的，都解决了什么问题。

• GC 相关问题：es6+ ，eventloop 中涉及 GC 的部分。

• 数组 flat 展开的各种解法，数组 map 应用

• 讲下 V8 sort 的大概思路

• Promise 并发限制

• 手写 Promise.all

• 省市区拼接查字段，要求 O(n) 内解出

• 中台的理解

• 讨论了下业务

• 个人发展方向

一面的问题循序渐进，前面为后面铺垫。

二面（60min）

• 项目的复盘优化

• 说下业务上最复杂的点

• node 限流算法

• 最有效的性能优化方法

• 你提到性能指标，能说说都是怎么计算的吗？比如 LCP，FID

• 算法题：数组全排列[1]

• 中台业务讨论

• 离职原因

大早上面试，状态不佳，全排列算是基础了，脑子里有解题思路，但死活没写对，面完后狠狠又手写了几遍。

猎豹移动三轮技术面+一轮 hr 面

---

技术一面 (60min)

• input type 都有哪些类型，还记得其他 attrs 呢

• css 的伪类和伪元素有哪些？有什么区别？

• 在一个未知宽度的父元素内如何创建一个等边正方形

• 异步加载 js 会阻塞什么

• 数组所有方法都有哪些？findIndex 的参数说明

• vue 和 react 的异同

• 如何优化 vue 框架，注意是优化框架

• vue 和 react 的 jsx 使用

• id key 真的能使列表比对更高效吗？举个反例？

• webpack 优化的手段

• tree-shaking 怎么配置，如何 避免 tree-shaking？

• electron 和小程序遇到什么坑？

• 说下微信自动化测试

• es2015 到 es2020 的新特性，你最常用什么，给你收益最大的。

• weakMap 和 Map 的区别，weakMap 原理，为什么能被 GC？

• 如何干扰 GC ？

• webpack import 动态加载原理

• 知道 webpack 中的 devTool 吗？

• 如何进行错误定位和数据上报，线上异常的处理

• 为什么有时候配置了 webpack caching，chunk 还是更新了？

• 讲讲浏览器和 node 的 eventloop

• 微任务后面还有哪些？requestAnimationFrame 是怎么调用的？requestAnimationFrame 帧内总是有任务吗？分情况说下。

• 帧数怎么计算？

• 了解网络安全吗？

• 如何避免数据被 iframe 截获

• 说下状态码

• 说下 304，什么情况会 304？协商缓存的头部字段？

• 你学习的渠道

• 工程化实践的看法

第一个问题没进入状态，我心里想怎么问这么简单的问题，我宕机了一会……后面就顺利了，面试官全程冷淡，也不闲聊。无趣，后来问了下，是猎豹的前端架构师，嗯，大佬就该有大佬的气场，面试体验棒棒的~~

业务二面 (60min)

大致内容：业务交流，工程化实践交流、猎豹前端在做什么，资源有哪些，他们的业务是偏 C 端的，未来的方向、发展等等……这一面很轻松，想到什么说什么，当然逻辑性肯定要有的。

业务三面 (70min)

这一面的面试官是猎豹移动的技术负责人。

• 项目是如何收集问题的，用户量如何？

• 性能问题如何排查，你们项目的指标，具体数据、截图发给我看看……

• 模块化是怎么实施的？

• 目录结构讲下

• 一些功能是自研还是使用第三方工具，叫什么名字，怎么使用 ？

• 疯狂问测试相关的内容，单元测试和组件测试是怎么做的、代码覆盖率多少，如何权衡测试原则，系统测试相关的内容，一些细节上的问题怎么处理，等等，要说出个 1、2、3 来 ？

• 项目亮点/难点，怎么解决 ？

• 复盘，整个项目总结，让你重新设计这套系统你会怎么做 ？

• 工程化实践和深入的一个点

• 团队氛围，有什么好的点可以说下，有什么不好的点也说下……

• 中台具体集成了什么功能 ？你都做了什么 ？

• 你是如何进行技术突破的，又是如何学习的 ？

• 对未来的规划

• 有什么问题想问？我随便问了几个问题过渡，然后抛出最重要的一个，厚着脸皮让大佬指出我的问题（PS：这是我面试的目的之一，当时几个面试进度属猎豹最快了。别人眼中的我，在前端方面具体是怎样的感官 ？我一直很好奇。不是每个人都有一个对自己清晰的认识的，既然自己想不出来，那就通过面试吧）。

这次面试暴露的点：项目的总结、全局的把控、自我复盘都是有所欠缺的。另外不要给自己挖坑，有时候知道一些概念但不知道具体的实操和原理，还是别说了。当时，关于测试方面的问题，考官一直假装不懂，老是问：真的吗？这个我没做过，你给我讲讲吧？我原本没错的内容也被误导了，emmmm……

hr 四面（30min）

常规问题，没有阿里那么严格。

• 讲讲前任公司

• 离职原因

• 加班的看法

• 猎豹的福利

• 有没有其他 offer

• balabala……

字节跳动三面挂

---

技术一面（60min）

• 刚开始就问我的项目，问的很详细。

• webpack 提高构建速度的方式

• loader 输入什么产出什么 ？

• webpack 原理

• webpack 动态加载的原理

• webpack 热更新

• 如何写一个 webpack plugin

• AST 的应用

• 如何解析一个 html 文本，还是考 AST

• babel 原理，怎么写 babel 插件

• 如何设计一个沙盒 sandbox ？

• 小程序的 API 做了什么处理，能够做到全局变量的隐藏，如果是你，怎么设计 ？

• 基础题考闭包的，我讲对了思路，结果没做对。

• 实现颜色转换 ‘rgb(255, 255, 255)’ -> ‘#FFFFFF’ 的多种思路。

• 提供一个数字 n，生成一组 0~n-1 的整数，打乱顺序组成数组，打乱几次，如何能够看起来平衡，说出你能想到的所有方法。

• leetcode 239[2]

• 随便问环节，我问了考闭包的那道题，我没有做对。

这一面我准备了很多东西，结果又完美 miss。

二面技术 leader（60min）

• 业务，业务，还是业务，项目复盘有没有更好的解决方案。

• 如何处理一个重大事故 bug

• 监控体系

• 虚拟 dom 有什么好的地方？框架为什么要设计虚拟 dom？

• webpack 的缺点，让你设计一个新的构建打包工具，你会怎么设计？

• 在线文档编辑，如何处理两人的冲突，如何展示，考虑各种场景

• excel 文档冲突高级处理，文章冲突呢？是上个问题的深化。

• 基础题，直接写出答案：

let x = [1, 2, 3];

let y = x;

let z = [4, 5, 6];

y[0] = 10;

y = z;

z[1] = 20;

x[2] = z = 30;

console.log(x, y, z);

复制代码

• 基础题：leetcode 300[3]

分享

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