站酷一二面-前端

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

二面完无后续。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);
        }
      );
    });
  });
};

• Map时间复杂度，什么顺序 ？ 我说是添加的顺序，Map数据结构有待研究
• 有其他offer吗
• 期望找一个什么样的实习
• 对大厂小厂有什么倾向 （谁不想去大厂
• 爱好，哪里人
• 可以出校实习吗，可以实习多久，什么时候开始

反问：

• 问面试官在公司怎么做SEO，针对不同的搜索引擎做专门的适配
• SEO是前端的事吗
• Map有序吗，跟引擎有关，版本不同，有差异
• 对象到底是不是有序的
• 虚拟DOM