前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，根底是进阶的前提是我的初心，明天分享一个一年教训的字节抖音电商面经

一面

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() // 1obj1.test1() // 11obj1.test2.call() // 11obj1.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构建桌面端利用的框架

结语

我是林三心，一个热心的前端菜鸟程序员。如果你上进，喜爱前端，想学习前端，那咱们能够交朋友，一起摸鱼哈哈，摸鱼群，加我请备注【思否】