字节跳动前端面试总结原计划毕业工作两年后再面大厂，但因为一些原因不得不提前。本文主要记录了一些最近面试中经常被问到的问题

背景

原计划毕业工作两年后再面大厂，但因为一些原因不得不提前。本文主要记录了一些最近面试中经常被问到的问题，包括但不限于字节，真实面试中的问题比下面要多，但整体差不多，主要根据你的简历和项目来问；

一面（1小时）

小程序的实现原理
uni-app是怎么实现跨端的，uni-app代码转成小程序代码的原理
还有哪些跨端方案？uni-app 和 taro的区别
介绍下Redux中的reducer
React和Vue的区别
React的生命周期和官方为什么要改它的生命周期
Redux的原理
Redux和dva的区别
connect是怎么实现的
React Hooks用过吗，它解决了什么问题
Hooks为什么不能在循环和判断中使用，Hooks是怎么实现的
React项目中怎么优化
PureComponent为什么可以进行浅比较，shouldComponentUpdate是怎么进行浅比较的
父组件渲染子组件是否会渲染，类组件有PureComponent，函数组件怎么实现父组件渲染子组件不渲染
React Hook有什么问题，Vue3中是怎么解决这些问题的
为什么要用ts，接口是什么，泛型是什么
路由有哪几种，是怎么实现的（3种）
section是用来做什么的
了解SSO吗
Webpack打包原理
使用Webapck做过哪些优化
Webpack中主要有哪些配置
loader是什么，plugin是什么，写过loader和plugin吗，二者的区别
ES6的迭代器是怎么实现的
怎么实现继承
Javascript的数据类型（8种）
说说z-index有什么需要注意的地方，z-index: 0 和z-index：1的区别，z-index为0和1哪个元素在上面
什么是重绘和重排
服务端渲染的方案有哪些？next.js和nuxt.js的区别
cdn的原理
JSBridge的原理
一道关于Promise微任务宏任务打印顺序的问题

...
请为所有数组对象添加一个findDuplicate，用于返回该数组中出现频率>=n的元素列表

Array.prototype.findDup = function (count) {
  return this.reduce((re, val) => {
    let index = re.findIndex(o => o.val === val)
    if (index >= 0) {
      re[index].count++
    } else {
      re.push({ count: 1, val })
    }
    return re
  }, []).filter(o => o.count >= count).map(o => o.val)
}

二面（1小时15分钟）

项目中有做过哪些性能优化（最好从构建性能、传输性能、运行性能三个方面来说）
React diff算法是怎么实现的，传递diff算法的算法复杂度是多少
React Fiber是什么，是怎么实现的
你们项目是怎么发布的
你们的项目怎么进行分支管理的
一个大型项目多人协作你们是怎么保证代码质量的
你在项目中遇到哪些问题，是怎么解决这些问题的，这个项目参与人数多少，你负责哪部分内容
设计一个搜索组件，要考虑到所有边界情况怎么进行优化；
如果...，你该...做；
怎么再进行优化；
再优化；
更极致的优化（某种非常非常特殊的场景）
如果一个后台管理系统中有很多表格，你会怎么做（Hooks逻辑拆分 / 封装业务组件）

...
实现一个批量请求函数multiRequest(urls,maxNum)，最大并发数maxNum。每当有一个请求返回，就留下一个空位，可以增加新的请求。所有请求完成后，结果按照urls里面的顺序依次打出

const reqest = (url) => {
    return new Promise((resolve, reject) => {
      console.log('请求了')
        setTimeout(()=>{
          resolve(url)
        },1000)
    })
}

const multiRequest = (urls, maxNum) => {
    let i = 0;
    const ret = []; // 完成集合
    const executing = [];// 执行集合
    
    const enqueue = () => {
        if (urls.length === i) { // 判断是否全部执行完
            return Promise.resolve();
        }
        const p = Promise.resolve().then(() => reqest(urls[i++]));
        const e = p.then(() => executing.splice(0, 1));// 执行完从executin中剔除一个

        ret.push(p);
        executing.push(e);

        let r = Promise.resolve();

        if (executing.length >= maxNum) {// 判断executing中的长度是否大于等于限制数maxNum
            r = Promise.race(executing);
        }
        return r.then(() => enqueue());// 当 r = Promise.race 时会等到其中一个执行完才执行下一步
    }

    return enqueue().then(() => Promise.all(ret)) //全部执行完按顺序返回
}

深克隆

function deepClone(target) {
    if (typeof (target) !== 'object') {
        return target;
    }
    var result;
    if (Object.prototype.toString.call(target) == '[object Array]') {
        // 数组
        result = []
    } else {
        // 对象
        result = {};
    }
    for (var prop in target) {
        if (target.hasOwnProperty(prop)) {
            result[prop] = deepClone(target[prop])
        }
    }
    return result;
}

追问，怎么解决循环引用问题
可参考如何写出一个惊艳面试官的深拷贝?

三面（50分钟）

三栏布局，说出你能想到的所有方案
垂直居中，写出你知道的所有方案
两个div，都给margin：20px，这两个div的间距是多少？为什么会产生这种问题？怎么解决？（BFC）
怎么触发BFC，说出你能想到的所有方案
AST是什么，有没有了解过AST
说一下你知道的所有的跨端解决方案（taro/uni-app/flutter/electron/React-Native/weex）
了解过Serverless，什么是Serverless
你还知道哪些新的前端技术（微前端、Low Code、可视化、BI、BFF）
平时学习的途径有哪些
权限系统设计模型（DAC、MAC、RBAC、ABAC）
什么是微前端
Node了解多少，有实际的项目经验吗
Linux了解多少，linux上查看日志的命令是什么
给出一个二叉树,用一个函数确定是否有一条从根节点到叶子节点的路径，这个路径上所有节点的值加在一起等于给定的sum的值。(思路：DFS + 求差 + 递归) leetcode112

var hasPathSum = function(root, sum) {
  // 根节点为空
  if (root === null) return false;
  
  // 叶节点 同时 sum 参数等于叶节点值
  if (root.left === null && root.right === null) return root.val === sum;

  // 总和减去当前值，并递归
  sum = sum - root.val
  return hasPathSum(root.left, sum) || hasPathSum(root.right, sum);
};

HR

聊了20分钟左右，主要看下性格等软实力，正常沟通就好

总结

大厂技术栈主要是React，会React真的很占优势；
一面主要对你的简历整体做一个评估，对于某些点进行深入提问，整体考察下技术的广度和深度；
二面主要针对项目进行提问，并且会针对某些原理源码进行深入提问，即项目 + 技术深度；
三面主要考察你的知识边界，前端、后端、数据库、linux都会问，不会不用怕，就是看下你的知识边界在哪里；
算法是字节的特色，基本每次面试最后都会有1-2道算法题，做不出来没问题，主要看你的思路看解题过程，不会千万别放弃，面试官提示你思路；
算法别做太快，要体现出思考过程和解题思路，题意不懂就问。题目做太快面试官可能会认为你做过这道题就会给你再加一道；

学习过程

在面试前一个月整理了自己的笔记，针对面试中经常会问的一些问题做了个xmind总结,已上传到GitHub，仓库中还记录了一些学习过程中的笔记：仓库地址

数据结构和算法

JavaScript

腾讯课堂渡一教育JavaScript课程
JavaScript高级程序设计（红宝石）
你不知道的JavaScript
MDN

React

渡一教育袁进大佬讲的React课程和源码
React源码解析
拉钩修言-深入浅出React(在更)

Vue

Webpack

腾讯课堂渡一袁进大佬的进阶Webpack课程

Typescript

腾讯课堂渡一袁进大佬的进阶Typescript课程

学习心得

劳逸结合；
多培养自己发现问题，分析问题，解决问题的能力；
刻意练习，1000小时定律。（一万太长，改一千了）

字节跳动前端面试总结

背景

一面（1小时）

二面（1小时15分钟）

三面 （50分钟）

HR

总结

学习过程

数据结构和算法

JavaScript

React

Vue

Webpack

Typescript

学习心得

三面（50分钟）