zbwer's Blog

Appearance

字节跳动 - 商业化技术 ​

投递渠道: 简历直推

TIP

值得一提的是，这是我人生中第一场求职面试。当时看群友说组内要 25 届可以简历直推,就加好友发了简历,没想到单薄的简历通过了筛选,稀里糊涂地约面了.处女面给了字节,不出意外一面就挂了.

也算是打响前端面试第一枪哈哈哈哈哈

面试时间： 2023-07-26

一面

  1. 为什么选择前端？
  2. 聊了一下简历上写的获奖经历具体做了什么
  3. CSS 盒模型
  4. Github 发现最近在用 tailwindCSS 问我用起来的感受，有什么优点
  5. 有没有了解过模块化 CSS
  6. HTTP 状态码
  7. 由上一问的 304 引出浏览器的缓存机制
  8. js 原型链相关
  9. 判断数据类型有哪些方法
  10. Vue 响应式原理
  11. 同源策略与跨域解决方案
  12. webpack 和 npm 前端工程化相关

手撕代码：

  1. 给定形如 a.b.c.d 的字符串，构造一个对象如下: { a:{ b:{ c:{ d:null } } } }
  2. 合并两个有序数组

Momenta ​

投递渠道: BOSS 直聘

时间线

  • 2023-11-24 投递简历
  • 2023-11-28 下午一面,结束后立马约二面
  • 2023-11-29 上午二面,中午 OC
  • 2023-12-04 发放正式 Offer

一面

  1. 青训营经历简单介绍
  2. 手撕算法: 56. 合并区间,要求原地操作数组.
  3. 反问环节

二面

  1. 如何调试 hover 样式(我的回答是开发者工具中可以勾选,但是存在不够精确的问题)
  2. 除了使用 vercel 之外,有没有自己去尝试过部署前端项目
  3. 有没有用过 Docker
  4. 浏览器跨域解决方案
  5. 有没有用过 iframe 标签
  6. git rebase 有用过吗(没有,但是个人比较常用 git stash)
  7. 介绍一下青训营的项目 -> NPM 的扁平化安装机制
  8. 关于事件循环的一个场景题: 在 JavaScript 中，你在一段同步代码中创建了一个 Promise。然后，在代码的末尾，你编写了一个 while(flag)循环来阻塞程序的执行。你的计划是在 Promise 的回调函数中将 flag 设置为 false，这样就可以退出这个循环。然而，由于 JavaScript 的事件循环机制，这种做法在 JavaScript 中是行不通的。有没有什么方法可以让这种情况在 JavaScript 中成为可能。
  9. 前端工具链: Rollup / Webpack / Vite 的使用经验与理解
  10. UI 组件测试是否了解
  11. TailwindCSS 暗黑模式布局是如何实现的，常规 CSS 如何实现暗黑模式的布局
  12. 虚拟滚动技术如何实现的
  13. 项目中的防抖具体是如何实现与应用的
  14. 反问

滴滴 ​

投递渠道: BOSS 直聘

时间线

  • 2023-11-23 投递简历
  • 2023-11-29 约面
  • 2023-12-01 一面

一面

  1. 介绍一下青训营的项目,在其中扮演了怎样的角色
  2. CSS 定位有哪些 -> 讲讲 sticky
  3. Webpack 的使用情况
  4. 浏览器从输入 URL 到页面呈现的过程发生了什么
  5. 同源策略与跨域解决方案

手撕代码:

  1. 对象数组根据 key 值去重
json
[
  { "key": 1, "value": "Tom" },
  { "key": 1, "value": "Jack" },
  { "key": 2, "value": "Anna" }
]
  1. 嵌套对象数组根据 key 值去重
json
[
  {
    "key": 1,
    "value": "Tom",
    "children": [
      { "key": 4, "value": "John" },
      { "key": 4, "value": "Linda" }
    ]
  },
  { "key": 1, "value": "Jack" },
  { "key": 2, "value": "Anna", "children": [{ "key": 1, "value": "Jack" }] }
]
  1. 判断回文字符串

emmmm,八股答得也还行,手撕代码也全都做出来了,但是没有后续流程了...

零一跃动 ​

投递渠道: BOSS 直聘

面试时间： 2023-11-19

题外话

当天投递当天约面，之前在 BOSS 一直没人回复，更新简历后立马有人约面了！

建议在下午三点发起对话，好像回复率很高！

  1. 自我介绍
  2. 挑选一个项目进行详细介绍
  3. 项目的技术选型是怎么考虑的
  4. 说一下不同技术选型给你带来的体验

（这里我提到了 js 和 ts 在类型提示上的区别以及普通 css 与 tailwind 的区别）

  1. 项目中与后端接口联调的流程是怎样的
  2. 在你使用 tailwind 时遇见复杂的样式如何处理（老老实实回归普通 css）
  3. 盒子模型: content-box 与 border-box
  4. 防抖节流: 说一下应用场景与口胡实现原理
  5. 项目中用到过哪些组件通信的方式（答得感觉不是很满意，我真的只用过 props 与 emit 😭）
  6. 深拷贝实现方式（JSON 与手写深拷贝）
  7. 对 async/await 与 Promise 的理解（解决回调地狱的问题，语法糖提高代码可读性）
  8. 平常开发中如何进行代码调试
  9. Vue 中 key 的作用（与 diff 算法相关，为了更好的复用 DOM 节点，提高渲染性能）
    • 如果一个列表中有两个元素的 key 值相同，那么会带来什么影响（错误更新）
  10. 什么时候接触前端？对后端有了解吗？
  11. 反问。

半小时结束，当晚约线下详谈。

话树网络 ​

投递渠道: BOSS 直聘

时间线

  • 2023-11-15 下午投递，当晚发送笔试邮件
  • 2023-11-20 约面
  • 2023-11-24 面试
  1. 自我介绍
  2. 对于 H5 语义化标签的理解
  3. 逻辑像素与物理像素是什么，如何去调整？（答得不是很好）
  4. 单页面应用和服务端渲染应用的区别 ❌
  5. 如何实现一个简单的 loading 遮罩
  6. relative / absolute / fixed 定位的区别 🍧
  7. 实现一个元素的显示和隐藏，以及不同方法的区别 🍩
  8. 回流与重绘
  9. V-if 与 V-show 的区别
  10. Vue 中 key 的作用
  11. CSS 盒模型
  12. outline 属性是否会占用宽度
  13. flex: 1 是什么的简写，以及三个属性的含义 🏃‍♂️
  14. for...of... 与 for...in... 的区别
  15. Vue 修饰符 .prevent 与 .stop 的区别
  16. 事件冒泡与事件捕获
  17. 弱等于(==) 与 强等于(===) 的区别
  18. 类型转换 0 == false 的结果
  19. Vuex 与 Pinia 在设计上的优势与劣势
  20. Vuex 中有 Mutation 的操作，为什么 Pinia 中没有
  21. 用过 hooks 吗
  22. reactive 与 ref 在使用上有什么区别
  23. Vue 响应式原理（开始吟唱 🥰！）
  24. 设计模式相关，了解工厂模式吗
  25. 了解 CDN 吗？是为了解决什么问题，具体的原理是怎样的
  26. 怎样学习前端的
  27. 阅读英文文档有问题吗，开始闲聊....

结束后，约线下简单笔试。

卫翎科技 ​

投递渠道: BOSS 直聘

时间线

  • 2023-11-23 上午 hr 发起打招呼,遂投递简历,下午约面
  • 2023-11-27 一面
  • 2023-11-29 上午约二面, 下午二面

一面

  1. 自我介绍
  2. 字节青训项目中最有挑战或者收获的点
  3. lint-staged 的主要作用是什么(搭配 husky 在 commit 时进行代码检查,面试官补充说只对暂存区的代码进行检查)
  4. Vuex 与 Pinia 的区别 💤 (以为掌握了但答得并不好！)
  5. 为什么需要对 axios 进行二次封装
  6. 虚拟滚动是如何实现的
  7. 项目中的防抖技术做了什么
  8. CSS 中 px,rem,em 分别是什么
  9. 水平垂直居中的实现方式
  10. position 有哪些属性, absolute 是相对于谁的
  11. 盒模型
  12. 隐藏一个元素的方式: display(回流) / visibility(重绘) / opacity(硬件加速)
  13. flex 布局设置元素间隙的方式 gap
  14. JavaScript 中判断数据类型的方法
  15. this 的指向???完全不知道怎么说,让我看代码讲还可以
  16. 改变 this 指向的方法 -> call 与 apply 的区别
  17. 箭头函数有 this 吗?
  18. 讲讲原型和原型链
  19. 讲讲 Event Loop
  20. script 标签会阻塞 DOM 的解析吗 -> 有什么方式可以解决这个问题
  21. 讲讲你对 Promise 的理解
    1. Promise 三种状态: pending / fulfilled / rejected
    2. 链式调用是如何实现的: then 方法返回的是一个新的 Promise 对象
  22. 数据类型的隐式转换
    1. 发生时机：算术运算符 / 比较运算符 / 逻辑运算符 / if 语句
    2. "1" + 1 的结果("11")
    3. "2" - 1 的结果(1)

看代码说结果:

js
const promise = new Promise((resolve, reject) => {
  resolve("success1");
  reject("error");
  resolve("success2");
});

promise
  .then((res) => {
    console.log("then", res);
  })
  .catch((err) => {
    console.log("catch", err);
  });

// then success1
// Promise 状态改变后就不能再改变,虽然后面的代码还能继续执行.
js
var name = "World";
(function () {
  if (typeof name === "undefined") {
    var name = "Jack";
    console.log("Goodbye " + name);
  } else {
    console.log("Hello " + name);
  }
})();

// Goodbye Jack
// var 变量提升: 只提升定义不提升赋值,并且之提升到所在的作用域的顶部
js
function f1() {
  console.time("time span");
}

function f2() {
  console.timeEnd("time span");
}

setTimeout(f1, 100);
setTimeout(f2, 200);
function waitForMs(n) {
  var now = Date.now();
  while (Date.now() - now < n) {}
}
waitForMs(500);

// 在执行 setTimeout(f1, 100) 后会开启一个定时器,并在 100ms 后将 f1 放入宏任务队列, 但是回调函数 f1 并不会立即执行,而是等主线程空闲才会执行.
/**
 * 上述代码的执行过程是:
 * 1. 执行 setTimeout(f1, 100)
 * 2. 执行 setTimeout(f2, 200)
 * 3. 执行 waitForMs(500);
 * 4. 由于 waitForMs(500) 会阻塞主线程 500ms, 此时 f1 与 f2 已经被放入宏任务队列中会被取出并且立即执行,所以 time span 实际上是执行带来的延迟而非定时器的延迟.
 */

二面

  1. 为什么选前端
  2. 职业规划，对前端的发展方向有了解吗？
  3. Github 活跃一般是在看哪些内容？
  4. 介绍一下项目中最有挑战的点
  5. 对这份工作有什么期待
  6. 有没有关注 AI 相关的内容

emmm，其实就是氛围很轻松的闲聊。

结束后 hr 约线下详谈。

冰智科技 ​

投递渠道： BOSS 直聘

时间线

  • 2024-02-16 打招呼投简历
  • 2024-02-18 一面
  • 2024-02-24 二面

一面

  1. 自我介绍与实习经历介绍
  2. Vue3 生命周期
  3. v-if 与 v-show 的区别
  4. 什么是虚拟 DOM
  5. useState 和 useEffect 如何使用
  6. React 中 state 与 props 有什么区别（通常 state 的改变由网络请求或者用户操作引起，props 由父组件传递）
  7. key 的作用
  8. 实习：如何进行项目规范搭建
  9. 实习：如何进行性能优化
  10. 项目：介绍一下项目中如何使用 rollup 的
  11. 手写代码：现场其一个 react 项目并实现一个 TodoList

二面

  1. 垂直居中的几种方式
  2. flex 布局的几个属性及其含义
  3. 0.1 + 0.2 为什么不等于 0.3
  4. 如何理解闭包, 闭包的使用场景
  5. 什么是宏任务和微任务
  6. 事件循环机制, 并看代码说结果
  7. cookie , LocalStorage, SessionStorage 的区别
  8. http 状态码
  9. 由 304 状态码引发浏览器缓存机制, 协商缓存与强缓存
  10. 哪些资源需要进行 CDN 加速
  11. React 中为什么 hooks 不能在条件语句中使用?
  12. useEffect 使用场景, dependencies 的作用, 返回值的作用
  13. React 父子组件通信的方式
  14. Vuex 的使用场景与基本原理
  15. Vuex 状态变更如何引起视图更新, 原理是什么
  16. 虚拟 DOM
  17. webpack 中的 loader 与 plugin 的区别
  18. sourceMap 的作用
  19. 打包方面的性能优化
  20. 最近做的项目中遇到的难点, 如何解决的
  21. 青训营项目
  22. 算法：二叉树的层序遍历
  23. 反问, 提升空间： 工程化与框架原理

新旦智能 ​

投递渠道： BOSS 直聘

面试时间： 2024-02-19

  1. 自我介绍与实习经历
  2. 实习中的性能优化是如何做的
  3. 日常中遇到问题, 你会通过哪些渠道去解决
  4. 重绘与重排的区别
  5. Vue2 与 Vue3 的区别
  6. Vue 的响应式原理
  7. 如何理解响应式布局, 如何实现响应式的布局
  8. 原型与原型链的理解
  9. CDN 加速的概念与原理
  10. 对闭包的理解
  11. JavaScript 与 TypeScript 的区别

微软 ​

投递渠道： 牛客网友内推

时间线

  • 2024-02-21 一面
  • 2024-02-26 二面
  • 2024-02-27 三面

一面

  1. 自我介绍与实习经历
  2. 学业相关
  3. 算法：反转链表
  4. 算法：求一个数开方后的整数部分

二面

  1. 实习工作内容, 如何完善前端开发规范的
  2. for...in 与 for...of 的区别
  3. async/await 的理解
  4. 是否了解 AST ? 是否了解 ESLint 的原理

看代码说结果：

  1. 具名导入与默认导出
js
// utils.js
const sum = (a, b) => a + b;
export default sum;
export function minus(a, b) {
  return a - b;
}

// index.js
import * as sum from "./utils";
// 如何调用相关函数
// sum.default(1, 2)
// sum.minus(1, 2)
  1. var / let / const 的变量提升

let 与 const 都存在变量提升, 提升到块级作用域顶部, 但同时也存在暂时性死区的概念

  1. 给函数的属性赋值是否会报错
js
function fn() {}
fn.name = "fn";

算法题：给定一个数字, 你可以将该数字中的任意一种数字替换为另一种数字, 例如你可以将该数中的所有 0 替换为 1. 你只能将一种数字替换为另一种数字, 请问通过该替换操作能得到的最大值与最小值之差为多少？

三面

  1. 自我介绍与实习经历
  2. 是否了解过性能优化, 有哪些方式
  3. 原生实现 tooltip
  4. CSS 如何绘制一个三角形
  5. 算法：手写堆排序
  6. 算法：lc 168. Excel 表列名称

哔哩哔哩 ​

投递渠道： BOSS 直聘

时间线

  • 2024-02-20 投递简历
  • 2024-02-23 一面
  • 2024-02-27 二面

一面

  1. 为什么离职
  2. 如何学习前端的
  3. TypeScript 常见的工具函数
  4. flex 布局常用属性
  5. 如何理解 Promise, 有哪些常见的方法
  6. 原型与原型链的理解
  7. npm 版本 ^ 与 ~ 的区别: 前者兼容大版本, 后者兼容次版本
  8. npm 三位数版本号的含义: breaking change, feature, bug fix
  9. package-lock.json 的作用以及安装顺序: 如果与 package.json 冲突, 以 package.json 为准
  10. 跨域问题与解决方案
  11. rem 理解
  12. iframe 的作用与使用场景, 如何与父级通信, 如果遇到跨域问题如何解决
  13. 普通函数与箭头函数的区别, 箭头函数的 this 指向
  14. 对于闭包的理解
  15. 实习业务介绍
  16. 项目难点
  17. 项目中遇到的性能优化是如何做的
  18. 前端性能优化有哪些方向
  19. 竞态问题如何解决, 点击 TabA, 数据未返回又点击 TabB, 数据返回了, 如何保证数据的正确性
  20. 浏览器缓存
  21. 如何实现七天免登陆

二面

  1. 实习工作内容描述, 如何进行性能优化
  2. 怎么从 vue 转到 react 的？
  3. 介绍青训营项目
  4. 青训项目：npm 安装机制
  5. CSS：position 有哪些值, 分别代表什么意思, 分别相对于谁定位
  6. CSS: 如何实现一个正方形
  7. 手写代码, 原生实现一个点击 tab 切换的效果
  8. 事件委托与 react 中的事件机制

百度 ​

部门：质量效能

投递渠道： BOSS 直聘

时间线

  • 2024-02-27 一面
  • 2024-02-27 二面
  • 2024-03-06 三面

一面

  1. 实习经历业务介绍
  2. Vue 响应式原理, 开始吟唱 😎
  3. Vue 常见的指令
  4. V-if 与 V-show 的区别
  5. 输入 URL 到页面展示的过程
  6. 定义 CSS 的三种方式
  7. CSS 选择器与优先级
  8. get 请求与 post 请求的区别, 传参格式与传参位置有什么区别
  9. 跨域问题与解决方案
  10. 设计实现七天免密登录
  11. 算法：括号合法性判断

二面

  1. 为什么离职
  2. 输入 URL 到页面展示的过程（怎么又问一遍
  3. 手写代码，原生实现输入框输入时, p 标签中同步显示输入内容
  4. 用过哪些 Linux 命令
  5. 看代码说结果:
js
var i = 0;
for (i = 1; i <= 3; i++)
  setTimeout(function () {
    console.log(i);
  }, 0);
// 4 4 4
// 解释: 先执行完 for 循环, i 的值变为 4, 然后再执行宏任务
  1. 什么是 XSS 攻击
  2. 如何理解 Promise, 有哪些常见的方法

三面

  1. 实习难点
  2. React 与 Vue 的区别
  3. 新项目技术选型, 可以从哪些维度考虑使用 React 或者 Vue

腾讯 ​

投递渠道： 简历被捞

部门：QQ

时间线

  • 2024-03-01 简历被捞，遂约面
  • 2024-03-07 一面
  • 2024-03-08 二面
  • 2024-03-11 三面

一面

  1. 实习经历与难点介绍
  2. 实习过程中的依赖升级是如何做的
  3. npm 扁平安装机制如何处理版本冲突
  4. package-lock.json 的作用
  5. 类型体操：泛型函数
  6. 算法：LRU 缓存
  7. content-type 有哪些值, 分别代表什么?

二面

  1. 实习业务介绍
  2. React18 有哪些新特性（直接用的就是 18 版本，遂回答刷视频看到过的 React 19 的新特性）
  3. 常用的 hooks 有哪些
  4. React Fiber 架构了解吗
  5. Vue 组件通信方式
    1. props 与 emit
    2. provide 与 inject
    3. expose 与 ref
    4. 全局状态管理
  6. Vuex 实现原理
  7. 输入 URL 到页面展示的过程
  8. 解析 HTML 时遇见 script 标签如何处理，script 的 defer 与 async 的区别
  9. 了解过哪些性能优化方案
  10. Vue-router 的实现原理
  11. http1.0 / 1.1 / 2.0 的区别
  12. cookie 的作用与常见属性
  13. 开发中如何查看网络请求
  14. 项目开发中用过哪些 ts 特性
  15. 状态码 301/302/403 含义
  16. package.json 作用与常见字段含义
  17. package-lock.json 作用
  18. node 模块解析机制
  19. FPS 帧率的概念 ❌
  20. Vue 中如何定义一个组件（没搞懂这个问题的意思，只回答了 SFC
  21. 常用 Vue 指令
  22. Vue3 中的 setup 函数具有什么作用？
  23. 算法：大数减法
  24. Github 仓库中的 qq 机器人项目做了什么
  25. get 与 post 请求的区别
  26. https 的加密过程（TLS 四次握手）
  27. TSL 加密过程是比较消耗性能的，对于 QQ 这样的大型应用，有没有什么好的方案可以优化
  28. Web 安全：XSS 攻击与 SQL 注入
  29. Vue2 与 Vue3 响应式原理的区别

三面

  1. 实习过程中比较有技术含量的地方
  2. 做可视化有什么心得
  3. 项目深挖：字节青训 - 依赖分析工具
    1. 你这个工具与市面上同类产品比较有什么优势？这个优势是如何实现的？具体的技术细节？
    2. 单测覆盖率如何测量的？具体是如何编写单元测试的？
    3. Web UI 中具体布局是怎样的？展示了包的哪些信息？
    4. 具体是如何判断某个包在项目中存在版本冲突的？技术细节？如果一个包存在多版本冲突，在 Web UI 中如何展示？
    5. 自己开发过程中项目出现多版本冲突的情况是如何处理的？（引申到实习中处理依赖迁移时遇到的问题）
  4. 了解哪些性能优化手段
  5. 常见的应用层协议有哪些？传输层呢？
  6. （上一问衍生）SSE 的原理？
  7. HTTP 2 与 https 的关系
  8. QUIC 协议了解吗？
  9. 工具链： ESLint 与 Prettier 的应用场景，自己的项目中具体做过哪些配置？
  10. 心算题：5 点 15 分时针与分针的夹角 67.5°
  11. 平常有使用过 AI 吗？

经常在用，平常也写过小玩具，例如将 GPT 接入飞书机器人，实现自动回复。遂询问我对 GPT 的接口做了哪些拓展，讲了下如何实现上下文历史记忆，又问我这个做法与网络中的开源项目有什么区别。

  1. 是否有其他公司 offer 以及到岗时间

京东 ​

投递渠道： 学姐内推

部门：CCO 体系

时间线

  • 2024-03-15 一面
  • 2024-03-20 上午 二面
  • 2024-03-20 下午 三面

一面

  1. 实习业务与个人技术栈介绍
  2. 实习中印象深刻的点
  3. 可视化中是否有做过性能优化
  4. 如何学习前端知识的？对未来的规划是什么？
  5. flex 布局常见属性及其取值：justify-content / align-items / flex-direction / flex-wrap
  6. 场景：利用 flex 使得文本与 icon 水平垂直居中
  7. CSS 权重（最开始幻听成 CSS 全称了，哈哈哈太尴尬了）
  8. position 有哪些值，含义是什么
  9. 自己开发过程中在哪用到过媒体查询？（移动端适配与打印样式）
  10. js 数据类型有哪些？（基本数据类型与引用数据类型）
  11. 口头描述如何实现深拷贝
  12. 原型与原型链
  13. 递归实现从 1 加到 100
  14. 对于 Promise 的理解：解决回调地狱，链式调用，异步编程
  15. async/await 如何搭配 Promise 使用？（本身是一个语法糖，不同的编码风格）
  16. Vue2 与 Vue3 的区别（组合式 API 与响应式原理）
  17. 组件通信：props / emit / provide / inject / ref / vuex
  18. watch 与 computed 的区别
  19. 什么时候使用 interface 与 type
  20. git 拉取项目到提交 PR 的流程
  21. 如何进行版本回退

二面

  1. React 中如何实现样式隔离？（CSS Modules）
  2. JavaScript 操作 DOM 具有哪些 API？
    1. 创建 DOM ：createElement
    2. 插入 DOM ：appendChild / insertBefore
    3. 删除 DOM ：removeChild
    4. 查找 DOM ：getElementById / querySelector...
    5. 修改 DOM ：innerHTML / innerText / textContent
  3. useCallBack 与 useMemo 的使用场景
  4. React 中父组件想要调用子组件的方法可以怎么做？forwardRef & useImperativeHandle
  5. useEffect 使用场景。不传递第二个参数会怎么样？（会导致每次渲染都会执行）如何清理副作用？（返回一个清理函数）
  6. 常用的 TypeScript 类型有哪些？
  7. 对于 Promise 的理解
  8. 实现发布订阅模式
  9. 在构造函数中定义方法（或者属性）与在原型链上定义方法（或者属性）有什么区别？
  10. 了解哪些 CSS 单位
  11. npm 如何登陆注册表（npm login --registry=xx）
  12. npm 发包流程：
    1. 本地测试：npm link
    2. 更新版本号：npm version major|minor|patch
    3. 发布包：npm publish --access=public
  13. 平常是否有记录技术博客？
  14. 声明响应式变量的方式有哪些？
  15. watch 多个属性如何处理？深度监听如何处理？
  16. Vue 生命周期

三面

  1. 实习经历介绍？为什么离职？
  2. 实现响应式布局的几种方案
  3. 跨域问题与解决方案
  4. http 各种请求方式的作用与区别
  5. 口述实现防抖节流
  6. 设计一个简单的登录鉴权流程
  7. 手头上需求比较多并且可能无法按时交付的情况下怎么办？
  8. 在写某个需求时如果你觉得你的技术方案比较好，但是 mentor 与你意见不一致，你会怎么做？