jsliang 求职系列 - 47 - 2020 面试题汇总

一 目录

不折腾的前端，和咸鱼有什么区别

目录
一 目录
二 前言
三 360
3.1 笔试题
3.2 面试题
四 bilibili
4.1 一面
4.2 二面
4.3 后续

二 前言

返回目录

2020 面试其实不止 2 家，但是一是我偷懒，二是我觉得如果小伙伴将 2020 求职系列认认真真看过了，一面题都不是问题，问题是二面问项目的。

所以希望小伙伴们看完这篇文章后，能审视下自己的项目经验，能不能做更好的提升。

三 360

返回目录

360 是搭高铁过去现场面的，顺带看看内推我的大佬。

3.1 笔试题

返回目录

1. 行内元素和块级元素
2. CSS 选择器
3. 创建、添加、移除、复制 DOM 节点
4. 数组 pop()、push()、shift()、unshift() 的作用
5. 判断变量类型的方法、差异和局限
6. 变量提升、函数提升、Event Loop 及 var 变量污染做打印题
7. 数组去重多种方式实现
8. 千分位分割数字：1234567890.11 -> 1,234,567,890.11
9. 手写防抖和节流
10. 实现柯里化 add(1)(2)(3)
11. 算法题：

有 N 天未打卡及漏打卡数组 missDays，有 M 张补打卡，总共有 allDays 天，使用补打卡，获得最长连续打卡天数。

例如：

• 输入：5, [10, 30, 55, 56, 90], 2, 120
• 输出：65

const getLongest = (M, missDays, N, allDays) => {

};
getLongest(5, [11, 32, 53, 84, 95], 2, 120); // 65

解题：

const getLongest = (M, missDays, N, allDays) => {
  // 第一部分：求连续天数区间

  // 1. 设置连续天数列表
  const area = [];

  // 2. 设置打卡区间 [0, allDays + 1]
  missDays.unshift(0);
  missDays.push(allDays + 1);

  // 3. 遍历丢失打卡记录，添加连续天数
  for (let i = 1; i < missDays.length; i++) {
    area.push(missDays[i] - missDays[i - 1] - 1);
  }

  // 4. 漏打卡 missDays：[0, 11, 32, 53, 84, 95, 121] -> 连续天数 area：[10, 20, 20, 30, 10, 25]

  // 第二部分：补打卡 > 漏打卡 快速通道

  // 5. 如果补打卡大于漏打卡，直接累加求值
  if (N > M) {
    return area.reduce((prev, next) => prev + next, 0) + M;
  }

  // 第三部分：求补打卡后最长连续天数

  // 6. 设置最大值
  let result = 0;

  // 7. 设置当前和
  let sum = 0;

  // 8. 设置队列
  const queue = [];

  // 9. 遍历连续区间，连续 N + 1 个数字求和，求最大
  for (let i = 0; i < area.length; i++) {

    // 10. 如果 queue 队列已经爆满，再添加就溢出，那就边添加边移除元素
    if (queue.length === N + 1) {

      // 10.1 队列添加一个元素
      queue.push(area[i]);
      
      // 10.2 sum 累加，然后减去队列移除的元素
      sum += area[i];
      const shift = queue.shift();
      sum -= shift;
    } else {

      // 10.3 queue 原始队列
      queue.push(area[i]); 

      // 10.4 sum 原始累加
      sum += area[i];
    }

    // 11. 求连续最大
    if (sum > result) {
      result = sum;
    }
  }

  // 12. 返回结果（需要加上补打的 2 天）
  return result + N;
};

// 漏打卡 missDays：[0, 11, 32, 53, 84, 95, 121]
// 连续天数 area：[10, 20, 20, 30, 10, 25]
console.log(getLongest(5, [11, 32, 53, 84, 95], 2, 120)); // 72
console.log(getLongest(5, [11, 32, 53, 84, 95], 3, 120)); // 88
console.log(getLongest(5, [11, 32, 53, 84, 95], 6, 120)); // 120

3.2 面试题

返回目录

1. 自我介绍
2. CSS 盒子模型
3. CSS 样式优先级
4. 垂直居中
5. 移动端多分辨率适配
6. 移动端 1px 问题
7. Cookie、SessionStorage、LocaleStorage
8. 登录态
9. Token
10. 实现动画效果（setTimeout、requestAnimationFrame）
11. 手机按钮点击触发哪些事件并详细解释一下（touchstart -> touchmove -> touchend -> click）
12. 手机点击事件的监听
13. 为什么 FastClick 库中在 touchend 上进行自定义事件，而不是其他事件呢
14. 常见 HTTP 状态码，204 和 304 区别？301 和 302 区别？
15. 浏览器同源策略，不同源会怎样？跨域会有什么限制？哪些操作要限制同源？
16. 如何实现跨域请求
17. 用 CORS 进行跨域，简单请求和复杂请求有什么不同？
18. 说一下什么是防抖和节流，说一下它们的使用场景。
19. 讲一下 Git Flow
20. 了解过排序算法吗？说一下冒泡排序和快速排序

四 bilibili

返回目录

bilibili 采用的是牛客网面试方式，毕竟是异地。

4.1 一面

返回目录

1. 自我介绍
2. 前端性能优化
3. 浏览器渲染过程
4. flat() 模拟手写实现
5. GPU 加速
6. ……不记得了

4.2 二面

返回目录

1. 自我介绍
2. HTTP 请求头大致有哪些字段
3. HTTPS
4. Vue 双向数据绑定
5. React Diff 比对详细
6. React 等 MV* 优势
7. 回流和重绘
8. 预加载
9. 项目相关（ECharts、微信小程序）
10. ……不记得了

4.3 后续

返回目录

二面后凉了。

分析：没回答好，个人比较懵逼。

---

jsliang 的文档库由 梁峻荣 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议 进行许可。
基于 github.com/LiangJunron… 上的作品创作。
本许可协议授权之外的使用权限可以从 creativecommons.org/licenses/by… 处获得。