一年经验面试字节抖音电商，分享下面经！
前言
大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心，今天分享一个一年经验的字节抖音电商面经
一面
1、自我介绍？
略
2、问项目
略
3、leetcode第112题，《路径总和》
const hasPathSum = (root, sum) => {
if (root == null) { // 遍历到null节点
return false;
}
if (root.left == null && root.right == null) { // 遍历到叶子节点
return sum - root.val == 0; // 如果满足这个就返回true。否则返回false
}
// 不是上面的情况，则拆成两个子树的问题，其中一个true了就行
return hasPathSum(root.left, sum - root.val) || hasPathSum(root.right, sum - root.val);
}
4、你知道哪些JS数组的API？
| 方法 | 作用 | 是否影响原数组 |
|---|---|---|
| push | 在数组后添加元素，返回长度 | ✅ |
| pop | 删除数组最后一项，返回被删项 | ✅ |
| shift | 删除数组第一项，返回被删项 | ✅ |
| unshift | 数组开头添加元素，返回长度 | ✅ |
| reserve | 反转数组，返回数组 | ✅ |
| sort | 排序数组，返回数组 | ✅ |
| splice | 截取数组，返回被截取部分 | ✅ |
| join | 将数组变字符串，返回字符串 | ❌ |
| concat | 连接数组 | ❌ |
| map | 相同规则处理数组项，返回新数组 | ❌ |
| forEach | 遍历数组 | ❌ |
| filter | 过滤数组项，返回符合条件的数组 | ❌ |
| every | 每一项符合规则才返回true | ❌ |
| some | 只要有一项符合规则就返回true | ❌ |
| reduce | 接受上一个return和数组下一项 | ❌ |
| flat | 数组扁平化 | ❌ |
| slice | 截取数组，返回被截取区间 | ❌ |
5、手写reduce
Array.prototype.sx_reduce = function (callback, ...args) {
let start = 0, pre
if (args.length) {
pre = args[0]
} else {
pre = this[0]
start = 1
}
for (let i = start; i < this.length; i++) {
pre = callback(pre, this[i], i, this)
}
return pre
}
6、讲一下HTTP缓存？
7、谈谈vue和react的区别和优劣？
- vue2对ts支持较差，vue3时已解决
- vue2对jsx支持较差，vue3时已解决
- vue 和 react都是单向数据流
- vue多用模板 template，react多用 jsx
- vue和react都使用虚拟dom和diff算法
- vue是双向绑定，react是单向绑定
- vue和react都倡导组件化开发
- vue和react都支持服务端渲染
- vue2的状态管理工具vuex，vue3用pinia，react用redux、mobx、recoil
- vue的diff算法比react更高效
- react的写法更贴近js原生
8、hooks用过吗？聊聊react中class组件和函数组件的区别？
我的React比较菜。。
- class组件：state和props都是固定的地址
- 函数式组件：state和props每次都会跟着渲染更新而更新
9、前端性能优化你会怎么做？
- 列表优化：懒加载、虚拟列表、分页
- 重绘回流：合并修改、requestAnimationFrame、will-change
- 提交优化：防抖
- 网络请求：控制并发量、取消重复请求、合并请求、http缓存
- webpack优化：代码压缩、gzip、CDN、代码分割、合理设置hash、图片转base64
10、反问环节
略
二面
1、自我介绍？
略
2、项目中遇到最复杂的是什么？最有技术难度的是什么？
略
3、算法题
fn([['a', 'b'], ['n', 'm'], ['0', '1']])
=> ['an0', 'am0', 'an1', 'am1', 'bn0', 'bm0', 'bn1', 'bm0']
解答
const fn = (arr) => {
const length = arr.length
const res = []
const dfs = (items, str = '', index = 1) => {
if (index > length) {
res.push(str)
} else {
for (const item of items) {
dfs(arr[index], str + item, index + 1)
}
}
}
dfs(arr[0])
return res
}
4、手写
u.console('breakfast').setTimeout(3000)
.console('lunch').setTimeout(3000)
.console('dinner')
解答
class U {
constructor() {
this.tasks = []
setTimeout(() => {
this.next()
})
}
next() {
const task = this.tasks.shift()
task && task()
}
console(str) {
const task = () => {
console.log(str)
this.next()
}
this.tasks.push(task)
return this
}
setTimeout(delay) {
const task = () => {
setTimeout(() => {
this.next()
}, delay)
}
this.tasks.push(task)
return this
}
}
5、事件代理是什么？
当子元素都需要绑定同样的事件的时候，这个时候可以把事件直接绑定在父元素上，并通过target对象来判断执行不同的子元素操作，这样可以大大减少绑定事件的数量，减少DOM操作，提高性能
6、e.target和e.currentTarget的区别？
e.target：触发事件的元素e.currentTarget：事件所绑定的元素
7、写一个事件代理函数，需要判断child是parent的子节点？
function proxy(event, cb, parent, child) {
parent[event] = function (e) {
if (parent.contains(child) &&
e.target === child) {
cb.call(this)
}
}
}
8、看代码说结果？
var length = 10;
function fn() {
return this.length + 1;
}
var obj1 = {
length: 5,
test1: function () {
return fn()
}
}
obj1.test2 = fn;
obj1.test1.call() // 11
obj1.test1() // 11
obj1.test2.call() // 11
obj1.test2() // 6
9、从输入Url到页面渲染发生了什么？写个提纲？
后面会单独出一篇文章
- 网络阶段：构建请求行、查询强缓存、DNS解析、建立TCP连接、发送HTTP请求、响应请求
- 解析阶段：解析html、构建dom树、计算样式、生成布局树
- 渲染阶段：生成图层树、生成绘制列表、生成图块、优先选择视口附近的图块生成位图数据、展示内容
10、Tcp和Udp的区别？
- 1、基于连接与无连接
- 2、对系统资源的要求（TCP较多，UDP少）
- 3、UDP程序结构较简单
- 4、流模式与数据报模式
- 5、TCP保证数据正确性，UDP可能丢包
- 6、TCP保证数据顺序，UDP不保证
11、前端新技术了解哪些？说了PWA和electron，介绍了这两个主要是用来做什么？
- 新技术：微前端、低代码、Vue3、Vite
- PWA：不会
- Electron：使用JavaScript构建桌面端应用的框架
结语
点个【赞】和【在看】是对林三心最大的鼓励，林三心会非常开心的~~~
关注公众号【前端之神】，回复【加群】，即可获得加入【千人前端学习大群】的方式