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

一目录

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

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

二前言

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

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

三 360

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

3.1 笔试题

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

有 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 面试题

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

四 bilibili

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

4.1 一面

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

4.2 二面

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

4.3 后续

二面后凉了。

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

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

一目录

二前言