【字节跳动】前端-技术中台一二面凉经

先说一下个人情况，双非，无实习经验，自己做了个垃圾项目，不知道怎么前几天怎么突然被捞起来，就参加面试了。

一面

一面面试官人挺好的，循循善诱，引导我回答问题。

1. 自我介绍
2. 看你 Vue 挺熟悉的，说一下Vue 双向数据绑定实现（Object.defineProperty 和 Proxy）
3. 表单输入内容，怎么更新到视图的呢？（我说了 v-model ，语法糖）
4. Vue 路由原理（hash 和 History 模式)
5. 说一下基本数据类型和引用类型
6. 检测数据类型的方式(typeof, instanceof, Object.prototype.toString.call())，然后写一下Object.prototype.toString.call()
7. 刚刚用到了 call ，和 apply和 bind 有什么区别(传参，使用方法)
8. 说一下浏览器渲染过程，我说了解析 DOM，处理 CSS，构建渲染树，最后绘制，这块说的很模糊，不一定对。
9. 引申：回流和重绘的区别
10. script 标签会阻塞解析吗？会，怎么异步加载？(async, defer)，有什么不同？(加载顺序)
11. 继续引申，如果现在有1000个div，怎么加载到页面上，怎么做，我说 Vue 由 虚拟 DOM 实现，他说原生呢？我说把节点的父元素从DOM 移除，添加到里面，然后再挂载回去。要是不能操作父元素呢？我不知道，就没继续问了。
12. 说输出，为什么(简单说了下事件循环)，结果是 2, 3, 5, 4, 1

    setTimeout(() => {
    console.log('1')
    })
    const promise = new Promise((resolve, reject) => {
    console.log('2')
    resolve()
    console.log('3')
    })
    console.log('5')
    promise.then(() => { console.log('4') })

13. 说下常用状态码
14. 状态码说到了304，说一下强缓存（Cache-control 和 Expire）和协商缓存 (Last-Modified 和 ETag)
15. 引申：前端文件协商缓存怎么实现的（Webpack 打包，动态生成文件名）
16. 最后写代码：
    解析 url，实现一个函数，其接受一个参数 url，返回解析query string后的对象。

输入：https://toutiao.com/home?a=q&b=w&c=e&a=r

输出： { a: [‘q’, ‘r’], b: ‘w‘, c: ‘e’ }

我说用 Map, 就让我开写了。当时脑子卡壳了，在某个地方卡了很久，最后提示我我才做出来。面试结束后我又看了下，发现其实还有问题，我和他都没看出来。。。
修改后的

function getQueries(url) {
  let queries = url.split("?")[1].split("&");
  const map = new Map();
  queries.forEach((item) => {
    // const key = item.split("=")[0];
    // const val = item.split("=")[1];
    const [key, val] = item.split("=");
    if (!map.has(key)) {
      map.set(key, val);
    } else {
      let currVal = map.get(key);
      map.set(key, [...currVal, val]);
    }
  });
  return Object.fromEntries(map);
}

最后问我 split 两次好不好，我说不好。问我知不知道解构，估计是觉得做的还不够好，没用到解构。

另附对象实现

function getQueries(url) {
  const queries = url.split("?")[1].split("&");
  const obj = {}
  queries.forEach((item) => {
    const [key, val] = item.split("=");
    if (!obj.hasOwnProperty(key)) {
      obj[key] = val
    } else {
      const currVal = obj[key]
      obj[key] = [...currVal, val]
    }
  });
  return obj
}

二面

一面刚刚结束不到10min，hr打电话通知马上二面

非常糟心，面试官全程心不在焉，都懒得敷衍的那种，估计是觉得我太垃圾。一开始摇头晃脑，到最后居然原地扭起来了，一点都不尊重人，我还得强颜欢笑，真的呵呵了

没啥说的，就问我些八股文，我回答完过几秒，然后毫无感情的嗯一下，又接着提问。中间还嫌弃我没经验，项目没啥亮点，我占用您宝贵的周末时间，真是不好意思呢。