kuaishou

快手 1 面

• 实现一个 div，高度屏幕一半，内容垂直水平居中

• 浏览器渲染步骤过程，html 如何渲染出来的，具体步骤

• 304 啥意思，http 文件修改时间具体是怎么样子的，last-modify 怎么保证各端时间一致,和 etag 有什么区别

• px 转 rem 怎么实现,loader

• 你在项目里做了哪些具体的性能优化

  • 通过是否支持 type="module"，来判断是使用新的 js 还是兼容后的 js
  • 可视化区域渲染，减少渲染节点。
  • 通过拆包减少第一次加载速度，import，splitChunk
  • 静态资源通过 cdn，不打入 bundle，声明 external
  • 图片懒加载，http 升级 2.0。serverWork，拦截 http 请求
  • vue：
    • Object.freeze，冻结不需要改动的数据，减少劫持时间
  • react
    • hook 使用 React.memo，useMemo、useCallback 减少重复渲染
    • class 组件使用 pureComponent、shouldUpdateComponent 减少渲染

• 你怎么实现一个 loader，把 px 转成 rem

• 有效括号算法题

• 函数柯里化+Object.defineProperty

快手 2 面

• 你简单介绍一下你做过的项目

• 有哪些做的比较好的地方

• es6 模块，commonjs。改变内容实际运行结果

• tree-shaking 怎么实现的

• 你怎么带新人

• 三个有序数组的合并，最优解

• 实现一个类，限制接口并发

快手 3 面

• puppeteer 怎么做优化，通过主进程创建浏览器对象，子进程获取浏览器
• 子进程创建子页面，打开页面。
• script、async、defer
• 说说你觉得最有挑战的一个项目
• 你觉得哪个项目技术挑战最大
• 实现一个发布订阅模式
• 打点系统怎么设计的
• 为什么自己设计一套 cli，不使用 vue-cli
• 浏览器详细渲染过程，渲染过程中有哪些可以优化的

function compose(...args) {
  function mergeArr(arr1, arr2) {
    let result = [];
    let start1 = arr1.length - 1;
    let start2 = arr2.length - 1;
    while (start1 >= 0 && start2 >= 0) {
      if (arr1[start1] >= arr2[start2]) {
        result.push(arr1[start1]);
        start1--;
      } else {
        result.push(arr2[start2]);
        start2--;
      }
    }
    if (start1 !== 0) result = result.concat(arr1);
    if (start2 !== 0) result = result.concat(arr2);
    return result;
  }
  let first = args.shift();
  return args.reduce((pre, next) => {
    return mergeArr(pre, next);
  }, first);
}

• 并发，加添加

class TaskManager {
  constructor() {
    this.stack = [];
    this.task = [];
    this.limit = 10;
  }
  addTask(promise) {
    this.stack.push(promise);
    return new Promise((resolve) => {
      this.task.push((res) => {
        resolve(res);
      });
    });
  }

  run() {
    let run = (promise) => {
      promise().then((res) => {
        let callback = this.task.shift();
        callback(res);
        let nextPromise = this.stack.shift();
        run(nextPromise);
      });
    };
    this.stack.splice(0, this.limit + 1).forEach((promise) => {
      run(promise);
    });
  }
}