2020.11.22

一面

就简历上的内容展开问了一个问题，然后马上做题

实现 sum 函数使得以下表达式的值正确，即 sum 函数可以连续柯里化调用，当未传入任何参数时则返回之前调用的所有参数的和。

sum(); // 0
sum(1, 2, 3)(); // 6
sum(2, 3)(2)(); // 7
sum(1)(2)(3)(4)(); // 10
sum(2)(4, 1)(2)(); // 9

实现一个 SimpleEventEmitter，支持 trigger、once、on、off 方法

看到我简历上有写用到了 LRU 算法，让我实现了一个 LRUCache 的类. 问了一些关于 LRU 的问题，比如为什么要用双向链表，为什么要用哈希表，时间复杂度是多少等等

leetcode 532：给定一个整数数组和一个整数 k，你需要在数组里找到不同的 k-diff 数对，并返回不同的 k-diff 数对的数目（要求时间复杂度 O(n) ）

输入一个正整数数组，如果这个数组可以通过以下两种操作中的一种，使整个数组变成单调递增或递减，则返回最终的单调序列，否则返回 -1。这两种操作分别是

- 交换数组中某两个元素的值
- 指定数组中的某个严格子区间，将该区间进行递增或递减排序

这题最后因为时间关系没实现出来，只是说了说思路。

二面

说一下你所知道的性能优化手段

性能优化

数千条数据量的长列表，你认为如何渲染最高效

基于上面的问题拓展出

- 前端如何做性能检测？比如说检测页面卡顿，内存占用等等
- requestAnimationFrame 的执行时机？如果要用 requestAnimationFrame 做长列表渲染，如何保证你想要的任务能在一帧内完成（又由此拓展到一些 React Fiber 的思路，只是提了一嘴，没有需要深入）

leetcode 67: 二进制加法，简单难度

手写 bind。给了一段函数，让你覆盖掉 Function.prototype.bind 并且保证原来的运行结果还是正确的。主要得注意各种传参和返回值的处理

三面

三面是大 leader 面的，如果你的思路是对的，他会顺着你的回答来由浅入深步步提问，前后逻辑非常严密，知识广度和深度都有所考察

介绍下你原来团队为了提高代码健壮性做了哪些工作

如何检测到页面的白屏？如何优化首页渲染性能？如何检测并上报页面的卡死？（考察 EventLoop + Web Worker 相关，二面问的是卡顿如何上报，三面问的是卡死如何上报）

○ 原因：
  ■ 静态资源异常，特别是 html 与 js 文件 404，特别在 react、vue 的 csr 场景，主文件丢失会直接导致白屏
    ● 衍生开来，css、图片、异步 JavaScript 等非关键路径资源 404，会不会导致 白屏？
  ■ 运行时 bug，少见，但在小程序一类。。。场景中，需要特别关注
  ■ js 代码问题：
    ● 未处理异常：
      ○ undefine.xx，
      ○ obj()，
      ○ JSON.parse(obj) 或者非法 json 字符串
      ○ 现代 mvvm 框架中，单个组件未处理异常导致全局 crash
    ● 死循环
○ 如何检测：
  ■ load + beforeUnload，load 的时候在storage 记个状态，如果没有unload就证明crash了
  ■ 定时检测页面元素数量，低于阈值时表明可能出现白屏异常
  ■ serviceWorker
    ● Service Worker 有自己独立的工作线程，与网页区分开，网页崩溃了，Service Worker 一般情况下不会崩溃；
    ● Service Worker 生命周期一般要比网页还要长，可以用来监控网页的状态；
    ● 使用 postMessage 发送心跳信号
○ 如何预防：代码健壮性
  ■ 不要相信上游数据(接口、函数参数、上下文状态、store 等等)，做好必要的输入数据检测
  ■ try-catch：同步、异步(async-await) 均可，可以放在容易出错的可疑区域(如 JSON.parse)
  ■ 关注 npm 包的 breaking change
  ■ 主动抛出异常，在开发阶段及时发现异常
  ■ react 中使用 ErrorBoundary 兜底；vue 中使用 vue.config.errorHandler 或 renderError 等接口
  ■ 补充必要的单元测试，特别是边界值、非法值测试
  ■ 捕获未知异常，并主动上报：
    ● window.onerror：全局兜底，but无法捕获资源 or js 代码异常
    ● window.addEventListener('error', function(){}, true) 捕获静态资源错误，但资源异常不会冒泡，所以必须用捕获方式
    ● window.addEventListener("unhandledrejection", func)捕获异步异常
  ■ 跨域脚本做好跨域处理
    ● 客户端：在script标签增加crossorigin="anonymous"属性
    ● 服务端：静态资源响应头Access-Control-Allow-Origin: *

在你看来虚拟 DOM 是什么？它能解决什么问题并带来了什么收益（渲染性能、跨端）？你认为 React-native 在 native 这边做了什么工作？你知道目前主流框架的 SSR 原理吗？

先给了一个数组 arr 和 for 循环，问输出的 arr[i] 的结果；然后在保留 for 循环结构的同时让你改成间隔 1 秒输出数组各项元素。最后要求改成间隔时间是每次都调用传入的 reducer 动态计算的，实现一个这样的 function logger (arr: number[], timeWaitReducer: () => number) 函数的封装

实现一个请求函数 function ajax (url, wait, count)，在 wait 时间内无结果则进行重试，最多重试 count 次。要求不可使用 xhr 的 timeout 属性。如果 wait 的时间要尽可能排除掉 xhr pending 的时间可以怎么做？

问到 web worker 相关的时候三面面试官还让阐述下 web push 的原理

最后更新于11个月前

○ 原因： ■ 静态资源异常，特别是 html 与 js 文件 404，特别在 react、vue 的 csr 场景，主文件丢失会直接导致白屏 ● 衍生开来，css、图片、异步 JavaScript 等非关键路径资源 404，会不会导致白屏？ ■ 运行时 bug，少见，但在小程序一类。。。场景中，需要特别关注 ■ js 代码问题： ● 未处理异常： ○ undefine.xx， ○ obj()， ○ JSON.parse(obj) 或者非法 json 字符串 ○ 现代 mvvm 框架中，单个组件未处理异常导致全局 crash ● 死循环 ○ 如何检测： ■ load + beforeUnload，load 的时候在storage 记个状态，如果没有unload就证明crash了 ■ 定时检测页面元素数量，低于阈值时表明可能出现白屏异常 ■ serviceWorker ● Service Worker 有自己独立的工作线程，与网页区分开，网页崩溃了，Service Worker 一般情况下不会崩溃； ● Service Worker 生命周期一般要比网页还要长，可以用来监控网页的状态； ● 使用 postMessage 发送心跳信号 ○ 如何预防：代码健壮性 ■ 不要相信上游数据(接口、函数参数、上下文状态、store 等等)，做好必要的输入数据检测 ■ try-catch：同步、异步(async-await) 均可，可以放在容易出错的可疑区域(如 JSON.parse) ■ 关注 npm 包的 breaking change ■ 主动抛出异常，在开发阶段及时发现异常 ■ react 中使用 ErrorBoundary 兜底；vue 中使用 vue.config.errorHandler 或 renderError 等接口 ■ 补充必要的单元测试，特别是边界值、非法值测试 ■ 捕获未知异常，并主动上报： ● window.onerror：全局兜底，but无法捕获资源 or js 代码异常 ● window.addEventListener('error', function(){}, true) 捕获静态资源错误，但资源异常不会冒泡，所以必须用捕获方式 ● window.addEventListener("unhandledrejection", func)捕获异步异常 ■ 跨域脚本做好跨域处理 ● 客户端：在script标签增加crossorigin="anonymous"属性 ● 服务端：静态资源响应头Access-Control-Allow-Origin: *

hashtag一面

hashtag就简历上的内容展开问了一个问题，然后马上做题

hashtag实现 sum 函数使得以下表达式的值正确，即 sum 函数可以连续柯里化调用，当未传入任何参数时则返回之前调用的所有参数的和。

hashtag实现一个 SimpleEventEmitter，支持 trigger、once、on、off 方法

hashtag看到我简历上有写用到了 LRU 算法，让我实现了一个 LRUCache 的类. 问了一些关于 LRU 的问题，比如为什么要用双向链表，为什么要用哈希表，时间复杂度是多少等等

hashtagleetcode 532：给定一个整数数组和一个整数 k，你需要在数组里找到不同的 k-diff 数对，并返回不同的 k-diff 数对 的数目（要求时间复杂度 O(n) ）

hashtag输入一个正整数数组，如果这个数组可以通过以下两种操作中的一种，使整个数组变成单调递增或递减，则返回最终的单调序列，否则返回 -1。这两种操作分别是

hashtag二面

hashtag说一下你所知道的性能优化手段

hashtag数千条数据量的长列表，你认为如何渲染最高效

hashtag基于上面的问题拓展出

hashtagleetcode 67: 二进制加法，简单难度

hashtag手写 bind。给了一段函数，让你覆盖掉 Function.prototype.bind 并且保证原来的运行结果还是正确的。主要得注意各种传参和返回值的处理

hashtag三面

hashtag介绍下你原来团队为了提高代码健壮性做了哪些工作

hashtag如何检测到页面的白屏？如何优化首页渲染性能？如何检测并上报页面的卡死？（考察 EventLoop + Web Worker 相关，二面问的是卡顿如何上报，三面问的是卡死如何上报）

hashtag在你看来虚拟 DOM 是什么？它能解决什么问题并带来了什么收益（渲染性能、跨端）？你认为 React-native 在 native 这边做了什么工作？你知道目前主流框架的 SSR 原理吗？

hashtag实现一个请求函数 function ajax (url, wait, count)，在 wait 时间内无结果则进行重试，最多重试 count 次。要求不可使用 xhr 的 timeout 属性。如果 wait 的时间要尽可能排除掉 xhr pending 的时间可以怎么做？

hashtag问到 web worker 相关的时候三面面试官还让阐述下 web push 的原理

一面