抖音前端三面面經(jīng)

概括

過去一年跳槽了兩次，最近的一年都在面試，失敗了很多次，也拿了很多offer，騰訊，字節(jié)，蝦皮，滴滴都oc，最終人生的第三方份工作選擇了騰訊，工作空閑之余，把最近一年的面經(jīng)整理一下。

聯(lián)系我：Chan-FE 可騰訊內(nèi)推～

抖音三面面經(jīng)title list

介紹一個項目難點，如何解決的
介紹一下webpack tapable模塊
loader pitch有使用過嗎，介紹一個它的應用
style-loader原理
簡單介紹一下SSR的原理
SSR內(nèi)存泄漏的話如何排查
項目FCP、CLS的統(tǒng)計標準是什么，具體做了什么使得CLS指標得到下降
除了技術上的優(yōu)化，業(yè)務上有什么設計使得整體架構更合理嗎（結合技術和業(yè)務來說）
https的主動推送主要推送什么資源，需要全部都推送嗎
怎么檢測客戶端是否兼容webp格式
技術選型
React fiber的優(yōu)勢在哪里
loadsh get的實現(xiàn)
實現(xiàn)一個const
1萬張圖片，并發(fā)下載10張，最快的方法下載完成

項目+八股

1.介紹一個項目難點，如何解決的

項目打包過慢，排查原因：輸出緩存的tapable同步鉤子報錯，導致緩存失效

2.介紹一下webpack tapable模塊

同步和異步兩種
提供了阻斷、瀑布、循環(huán)等流程控制
異步提供了串型、并行兩種控制方式和回調(diào)、promise兩種實現(xiàn)方式
https://www.cnblogs.com/dennisj/p/14538668.html

3.loader pitch有使用過嗎，介紹一個它的應用

四種loader: post、inline、normal、pre
兩種執(zhí)行階段 pitching和normal階段
Pitching 階段: loader 上的 pitch 方法，按照 后置(post)、行內(nèi)(inline)、普通(normal)、前置(pre) 的順序調(diào)用。
Normal 階段: loader 上的常規(guī)方法，按照 前置(pre)、普通(normal)、行內(nèi)(inline)、后置(post) 的順序調(diào)用。模塊源碼的轉(zhuǎn)換，發(fā)生在這個階段。
應用style-loader
參考：https://juejin.cn/post/7037696103973650463

4.style-loader原理

css-loader 負責解析 CSS 文件的 @import 和 url() 依賴，并將 CSS 轉(zhuǎn)換為 JavaScript 模塊；style-loader 則負責將模塊內(nèi)容注入 DOM。如果不使用pitch，style得到的入?yún)⑹莏s代碼，而不是處理好的css代碼，style-loader 通過 Webpack 的 pitch 方法實現(xiàn)熔斷。默認情況下，loader 從右向左執(zhí)行（如 css-loader → style-loader），但 pitch 方法允許從左向右執(zhí)行。style-loader 的 pitch 方法會先執(zhí)行，先直接跳過后續(xù) loader 的默認處理流程，轉(zhuǎn)而通過 require 手動調(diào)用 css-loader 獲取 CSS 內(nèi)容（后面loader將通過inline loader的形式執(zhí)行）

5.簡單介紹一下SSR的原理

將傳統(tǒng)單頁面應用（SPA）的渲染過程從客戶端轉(zhuǎn)移到服務器端，通過動態(tài)生成完整的 HTML 頁面解決首屏加載性能與 SEO 問題。服務器在渲染可以執(zhí)行組件定義的 數(shù)據(jù)預取邏輯，將異步獲取的數(shù)據(jù)直接嵌入 HTML 中。客戶端收到 HTML 后，會先快速展示靜態(tài)內(nèi)容（提升首屏速度），隨后加載客戶端 JavaScript 文件。框架通過 Hydration 機制 將事件綁定、狀態(tài)管理等邏輯“注入”已渲染的靜態(tài) DOM，使其具備交互能力。

6.SSR內(nèi)存泄漏的話如何排查

比較堆棧信息，第三方工具實時監(jiān)控內(nèi)存變化

7.項目FCP、CLS的統(tǒng)計標準是什么，具體做了什么使得CLS指標得到下降

FCP：用戶首次看到頁面中元素的時間
CLS：頁面渲染過程中非預期布局波動的計算分數(shù)
降低cls

8.除了技術上的優(yōu)化，業(yè)務上有什么設計使得整體架構更合理嗎（結合技術和業(yè)務來說）

業(yè)務：

關鍵資源去配置化，減少網(wǎng)絡請求
簡化業(yè)務流程

技術：

優(yōu)化打包機制，均衡切割chunk
合并接口，減少網(wǎng)絡請求
整合全局token,減少非必要的鑒權校驗
https做資源推送，搭配容器做緩存

9.https的主動推送主要推送什么資源，需要全部都推送嗎

首屏關鍵資源（字體、樣式等），動態(tài)資源需要謹慎推送
若推送的資源已被瀏覽器緩存，會造成重復傳輸。
推送過多資源會占用帶寬，反而拖慢頁面加載速度。

10.怎么檢測客戶端是否兼容webp格式

canvas的toDataURL判斷
請求頭Accept字段判斷
加載一個1像素的空白webp圖片判斷
使用picture標簽做兼容
https://juejin.cn/post/6844903858028675079

11.技術選型

hybird架構
RN原生控件渲染
flutter自研渲染引擎
其他跨段方案

12.React fiber的優(yōu)勢在哪里

大任務拆分成小任務
兩顆diff樹相互引用，減少diff導致的崩潰
增加指針指向父元素、兄弟元素，空間換時間
閉包+鏈表使得函數(shù)組件擁有了數(shù)據(jù)持久化的能力，hook開始發(fā)展

算法

13.loadsh get的實現(xiàn)

//lodash的get方法
function get(object, path, defaultValue = 'undefined') {
    //構造數(shù)組,將'['和']'替換成'.'
    let newPath = [];
    newPath = path.replace(/\[/g, '.').replace(/\]/g, '').split('.');

    return newPath.reduce((a, b) => {
        return (a || {})[b]
    }, object) || defaultValue
}

//測試
const obj = {
    a: {
        b: [{
            c: 1
        }]
    }
}


console.log(get(obj, 'a.b[0].c[1].e[2][1].e', 0));
console.log(get(obj, 'a.b[0].c', 0));
console.log(get(obj, 'a.b.c', 0));
console.log(get(obj, 'a', 0));

14.實現(xiàn)一個const

function _const(key, value) {
    const desc = {
        value,
        writable:false
    };

    Object.defineProperty(window, key, desc);

}

_const('obj', {a: 1});   //定義obj
obj.b = 2;               //可以正常給obj的屬性賦值
obj = {}                //拋出錯誤，提示對象read-only

15.1萬張圖片，并發(fā)下載10張，最快的方法下載完成

const data = [
  {
    url: '/a',
    time: 200
  },
  {
    url: '/b',
    time: 1000
  },
  {
    url: '/c',
    time: 100
  },
  {
    url: '/d',
    time: 800
  },
  {
    url: '/e',
    time: 300
  },
]

const loadUrl = (item) => {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, item.time, item.url);
  });
}

const downLoad = (data, limit) => {
  // 截取前 limit 個數(shù)據(jù), 
  const promiseList = data.splice(0, limit).map((item, index) => {
    return loadUrl(item).then((res) => {
      console.log(res);
      return index;
    });
  });

  (async () => {
    let p = Promise.race(promiseList);
    for(let i = 0; i < data.length; i++) {
      p = p.then(index => {
        promiseList[index] = loadUrl(data[i]).then((res) => {
          console.log(res);
          return index;
        });
        return Promise.race(promiseList);
      })
    }
  })()
}

downLoad(data, 2);

搞了個公眾號*********，感興趣的可以關注一下～

#面經(jīng)#