2022年字节跳动基础架构前端实习生凉经（4轮技术面+hr面）_小程序onready和onload

2022年字节跳动基础架构前端实习生凉经（4轮技术面+hr面）

原文：https://juejin.cn/post/7120516854203809829#heading-0

技术一面

因为我之前的项目经验有开发小程序的，所以一开始就问了小程序的问题

1、小程序onload和onready的区别

• onload：页面加载的时候触发，一个页面只会调用一次，并且可以在onload中获取到当前页面路径中的参数
• onshow：页面显示、切入前台时触发
• onready：页面初次渲染完成时触发，代表页面已经准备号了，可以和视图层进行交互了
  顺序：onload、onshow、onready

原生js的顺序刚好相反：document.ready —> window.onload

• document.ready是jquery中定义的方法：表示文档结构加载完成（不包含图片等非文章媒介文件），如果定义了多个document.ready的话就会按顺序的执行
• window.onload ： 包含图片在内的所有元素都加载完成了，但是onload不管定义多少个，都只执行一次（最后一个）

2、如何手动的触发当前页的onload

const pages = getCurrentPages()
const page = pages.pop()
page.onLoad()
1
2
3

3、如果有一个无限的数据列表，你要怎么渲染
参考：zhuanlan.zhihu.com/p/146791824

已有技术方案：react native的列表组件： flatlist

4、小程序架构

5、手写：instanceof是什么，实现一个

6、分别讲一下useState、useEffect、useContext是干嘛的

7、实现一个hook：useDebounce

function useDebounce(value: any, delay = 300) {
    const [debounceValue, setDebouncedValue] = useState(value)
    useEffect(() => {
        const handler = setTimeout(() => {
            setDebouncedValue(value)
        }, delay)
        return () => {
            clearTimeout(handler)
        }
    }, [value, delay])
    return debounceValue
}

export default useDebounce
1
2
3
4
5
6
7
8
9
10
11
12
13
14

8、实现一个继承，讲一下原型链、实例、组合继承

function A(opt) {
    this.name = opt.name
    this.age = opt.age
}
// A的函数方法
A.prototype.sayName = function() {
    console.log(this.name)
}
// B继承A的变量
function B(opt) {
    A.call(this, opt)
    this.sex = opt.sex
}

// B继承A的函数
B.prototype = A.prototype
B.prototype.sayAge = function() {
    console.log(this.age)
}

// 实例化B
const o2 = new B({
    name: "gogocj",
    age: "21",
    sex: "man"
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

8、讲一下跨域，以及如何解决

9、jsonp为什么要用script，script为什么可以，为什么不能用image这些呢？

利用script可以实现跨域访问
你想想：我们使用script标签的时候，有时可以直接引用外部资源，那么为何能够直接访问呢？就是因为script自带跨域
script标签里面的src属性跨域实现跨域访问
jsonp跨域只能用于get请求

function fn(data) {
    console.log('收到数据', data)
} 
const script = document.createElement('script')
script.src = 'http://localhost:8001/person?callback=fn'
// 标签插入到页面中
1
2
3
4
5
6

区别：

img只能单次发送get请求，不可访问响应内容（只是展现）
script可以对get请求进行解析
10、知道egg的插件有哪些吗？

11、插件和中间件的区别，什么叫做洋葱模型

12、能不能实现一个egg的插件

13、http和https的区别

技术二面

1、介绍一下你之前实习的项目（后面针对这个项目的方案和架构问了很多）

2、用纯react来实现一个SSR服务端渲染，你会怎么设计

3、你做的前端监控SDK实现了什么功能，原理是什么

4、ts的type和interface的区别

5、ts内置的高级类型Pick和Partial区别，能不能手写一下源码

6、能不能通过ts的类型编程实现加减法，手写一个看看

因为我简历上写了了解ts的类型编程，果然就考了

7 解释一下eventLoop

8、进程和线程的区别，听说过协程吗？

9、讲一下事件冒泡和捕获

10、react的事件代理机制可以描述一下吗

11、grid布局讲一下

12、display的几种属性，inline-block的特点是什么

13、addeventlistener第三个参数是什么

14、算法题：对二叉树从上到下进行遍历

技术三面

1、聊一下小程序的意义是什么和微信小程序架构是怎么样的

你对小程序的理解
为什么要有小程序
小程序的架构
2、之前实习做的项目难点在哪

3、聊一下微前端，webpack5的模块联邦

4、聊一下webpack的打包过程是怎么样的

5、webpack有哪些优化配置

6、手写：数组中哪些method会改变原数组，如何实现一个不改变元素组的splice
就是自己实现一个数组的splice方法，但是可以使用数组的slice和concat方法

7、for in和for of区别，下面代码的输出是什么

var arr = [1, 2, 3]
var obj = {key: 'value'}

function consoleIn(data) {
    for (let i in data) {
        console.log(i)
    }
}

function consoleOf(data) {
    for (let i of data) {
        console.log(i)
    }
}
consoleIn(arr)
consoleOf(arr)
consoleIn(obj)
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

8、手下一个判断类型的代码，typeof和instanceof区别是什么，下面代码输出是什么？

var arr = [1, 2, 3]
var arr2 = new Array();
typeof arr === ?
typeof Array === ?
typeof arr2 === ?
复制代码
1
2
3
4
5
6

答：

function getType(value) {
    let type = typeof value;
    if (type !== 'object') { // 如果是原始数据类型，直接返回
        return type;
    }
    // 如果是引用数据类型，再进一步判断，正则返回结果
    return Object.prototype.toString.call(value).replace(/^\[object (\S+)\]$/, '$1');
}
1
2
3
4
5
6
7
8

typeof 和 instanceof的区别 参考：juejin.cn/post/707157…

typeof只能准确判断原始数据类型和函数（函数其实是对象，并不属于另一种数据类型，但也能够使用 typeof 进行区分），无法精确判断出引用数据类型（统统返回 object）。
调用typeof null返回的是object，这是因为特殊值null被认为是一个对空对象的引用（也叫空对象指针）
instanceof 可以准确判断引用数据类型，但是不能正确判断原始数据类型
typeof 虽然可以判断原始数据类型（null 除外），但是无法判断引用数据类型（function 除外）
如果想准确判断引用数据类型，可以用instanceof运算符。
typeof 会返回一个运算数的基本类型，instanceof 返回的是布尔值
typeof和instanceof都有一定的弊端，并不能满足所有场景的需求。如果需要通用检测数据类型，可以使用Object.prototype.toString.call()方法：

Object.prototype.toString.call({}); // "[object Object]"
Object.prototype.toString.call([]); // "[object Array]"
Object.prototype.toString.call(666); // "[object Number]"
Object.prototype.toString.call('xxx'); // "[object String]"
复制代码
1
2
3
4
5

注意，该方法返回的是一个格式为"[object Object]"的字符串。

9、聊一下js的数据类型，基本数据类型和引用数据类型

10、手写：useDebounce和useThrottle

function useDebounce(fn, delay, dep = []) {
  const { current } = useRef({ fn, timer: null });
  useEffect(function () {
    current.fn = fn;
  }, [fn]);

  return useCallback(function f(...args) {
    if (current.timer) {
      clearTimeout(current.timer);
    }
    current.timer = setTimeout(() => {
      current.fn.call(this, ...args);
    }, delay);
  }, dep)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function useThrottle(fn, delay, dep = []) {
  const { current } = useRef({ fn, timer: null });
  useEffect(function () {
    current.fn = fn;
  }, [fn]);

  return useCallback(function f(...args) {
    if (!current.timer) {
      current.timer = setTimeout(() => {
        delete current.timer;
      }, delay);
      current.fn.call(this, ...args);
    }
  }, dep);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

11、你对字节基础架构的了解

12、HMR实现原理是什么

13、react处理数据流的时候要注意什么，可以从Hook的使用注意点出发

14、useState和useRef的区别

15、可以说一下CICD吗

16、流水线打包是一个怎么样的过程，各个节点的原子服务是怎么样的

技术四面

1、前端程序员素质题： PM有一个需求：要处理一个很大很大的数组，找到这个大数组里面的最大数字并显示的页面上，你作为前端owner要怎么做？

答：我从下面几个点回答了 【待完善】

2、react的fiber架构聊一下

3、docker的优势

4、redis的缓存雪崩怎么处理

5、nginx实现的原理，你知道node的cluster模块吗

HR面

自我介绍
前面几轮的技术面试感觉怎么样
为什么想搞前端
你对OKR的了解
你之前实习都做了什么
你之前实习的感悟以及收获
这次实习你想得到的是什么
后面秋招的话，你要怎么协调实习和秋招呢，你的看法是什么
平时学习渠道是什么
你对字节基础架构的了解
hr说：需要拉前四位面试官进群然后对其一下对我的情况，一周后出结果

有点小遗憾，等了一周的结果，满怀期望的，可能横向对比的时候不够优秀吧，还得继续努力！（今晚搞个小炸鸡778，安慰一下自己哈哈哈）

但是不得不说这段时间的面试收获很多，整理了15w字的typora文档前端面试资料，大家感兴趣的话，我后面可以发文章分享给大家，一起加油辣~