站酷一二面-前端

站酷整体面下来很累，也很爽。

二面完无后续。HR说最近技术很忙，还没评估，后续会通知。感觉自己表现还可以，蹲一个结果。

发现一个问题，就是我的电脑字体太小，共享屏幕的时候面试官看着都费劲。以后可以适当放大编辑器的字体

一面

10月12日 50min 感觉站酷的面试官可以的 👌

自我介绍

项目

介绍一下项目，技术栈、实现都可以讲
什么是SSG
SSR优势
官网网页怎么部署的
什么是react hooks，干什么的（像看看你到底会不会React）
useEffect实现了类组件的哪些生命周期 3个
useEffect第二个参数是对象，会更新吗

前端基础

css垂直水平居中
性能优化有哪些冲！
什么是useMemo, useCallBack
tree shaking原理（esm静态编译，AST）
http2新特性冲！
http2 server push和websocket
http3 基于什么
TCP三次握手
两次握手行吗
四次挥手

代码题

写快排

function quickSort(arr) {
  if (arr.length <= 1) return arr;
  let length = arr.length;

  const middleIndex = Math.floor(length / 2);
  const middle = arr[middleIndex];
  const left = [],
    right = [];

  for (let i = 0; i < length; i++) {
    if (i === middleIndex) continue;
    if (arr[i] > middle) right.push(arr[i]);
    else left.push(arr[i]);
  }

  return [...quickSort(left), middle, ...quickSort(right)];
}

console.log(quickSort([1, 4, 2, 8, 5]));

全排列 ----全军覆没
Promise.race

Promise.myRace = function (promises) {
  return new Promise((resolve, reject) => {
    promises.forEach((promise) => {
      promise
        .then((res) => {
          resolve(res);
        })
        .catch((e) => {
          reject(e);
        });
    });
  });
};

custom hook获取浏览器视口宽度

import { useEffect, useState } from "react";

export function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  const onWindowResize = () => {
    setWidth(window.innerWidth);
  };

  useEffect(() => {
    window.addEventListener("resize", onWindowResize);
  }, []);

  return width;
}

反问：

业务
聊到了低代码，搞定设计
server push
tree-shaking esm问题哈哈哈感觉面试官应该不是科班

二面

二面压力很大，也很爽。50min

面试官说我不回应人家哈哈哈，以后面试注意，活泼一点。

小程序
项目：怎么实现ssr的
详细介绍一下，重点是怎么做的（灵魂问题，完蛋了）
renderToString具体是怎么实现的
JSX渲染原理 _jsx函数在 react/runtime下好像

虚拟DOM
DIFF算法实现，由哪些算法实现
如果让你来实现diff算法
数据结构怎么样（因为diff答得不好）
路由匹配精准匹配、模糊匹配
什么是SSG
SEO优化做了哪些
搜索引擎基本原理，收录规则，Google Bing Baidu有什么区别（我不知道，没调研过）
说我做的SEO优化太浅了
第一次被diss music项目烂大街 hhhh，你这个项目跟别的有什么区别吗？
二叉树中序遍历 hhh
算法题，leetcode原题

// [1, 3, 4]  5
function func(target, arr) {
  let map = new Map()
  let res = []

  for (let i = 0; i < arr.length; i++) {
    let another = target - arr[i]
    if (map.has(another)) {
      let index = map.get(another)
      res.push([i, index])
    } else {
      map.set(arr[i], i)
    }
  }

  console.log(res)
}

func(4, [1, 3, 4])

实现Promise.AllSettled

下面的代码，有问题。网上的代码并没有区分先后顺序，这是改进后的。但是仍然需要改进什么时候resolve，目前还没有想到完美的方案。

Promise.IAllSettled = (promises) => {
  let res = new Array(promises.length).fill({});

  return new Promise((resolve, reject) => {
    promises.forEach((promise, i) => {
      promise.then(
        (res) => {
          res[i] = { value: res, status: "fulfilled" };
          if (res.length === promises.length) resolve(res);
        },
        (error) => {
          res[i] = { reason: error, status: "rejected" };
          if (res.length === promises.length) resolve(res);
        }
      );
    });
  });
};