共计 3129 个字符，预计需要花费 8 分钟才能阅读完成。
前言
大家好，我是林三心，用最通俗易懂的话讲最难的知识点 是我的座右铭，根底是进阶的前提 是我的初心，明天分享一个一年教训的 字节抖音电商 面经
一面
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() // 1
obj1.test1() // 11
obj1.test2.call() // 11
obj1.test2() // 69、从输出 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 构建桌面端利用的框架
结语
我是林三心，一个热心的前端菜鸟程序员。如果你上进，喜爱前端，想学习前端，那咱们能够交朋友，一起摸鱼哈哈，摸鱼群，加我请备注【思否】
正文完
