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… 處得到。