面試題

 

1.typescript 中 interface 與 type 有何區別

interface是接口，type是類型，本身就是兩個概念。只是碰巧表現上比較相似。 希望定義一個變量類型，就用type，如果希望是能夠繼承并約束的，就用interface。 如果你不知道該用哪個，說明你只是想定義一個類型而非接口，所以應該用type。

interface和type都可以用來聲明和約束變量類型結構，interface可以被繼承重載，type要想被繼承只能使用聯合&，而且interface的性能比type更好

 

 

2.閉包

閉包是一個函數, 其可以記住并訪問外部變量.

在函數被創建時, 函數的隱藏屬性 [[Environment]] 會記住函數被創建時的位置, 即當時的詞法環境 Lexical Environment

這樣, 無論在哪里調用函數, 都會去到 [[Environment]] 所引用的詞法環境

當查找變量時, 先在詞法環境內部查找, 當沒有找到局部變量時, 前往當前詞法環境所記錄的外部詞法環境查找

我知道的閉包的應用: 封裝私有變量和處理回調函數

 

3.詞法環境

 

• 全局環境
  沒有外部環境引用的詞法環境，外部環境引用為outer: null,擁有內建的object/ array對象等。在環境記錄器里的原型函數，還有全局對象
• 函數環境
  用戶定義的變量存儲在環境記錄器，外部引用outer可以為全局環境，也可以為包含此內部函數的外部函數

變量環境

• 用來處理var和function聲明的標識符

 

 

4.react diff 和vue diff 

React 的 diff 算法：

React 使用了一種叫做 “Reconciliation” 的 diff 算法。在比較新舊 Virtual DOM 時，React 會按照以下三種策略進行：

1. 元素類型不同：如果元素類型不同，React 會直接銷毀舊元素及其子元素，并創建新元素。
2. 元素類型相同，是 DOM 元素：React 會比較這兩個元素的屬性，并只更新變化的屬性。
3. 元素類型相同，是組件：如果組件類型相同，React 會調用組件的 render 方法生成新的 Virtual DOM，并遞歸地進行 diff。如果組件類型不同，React 會銷毀舊組件并創建新組件。

React 的 diff 算法默認假設不同類型的元素會產生不同的樹，而且開發者不會在同一位置改變元素的類型。因此，它在處理列表時，如果沒有手動添加 key，可能會造成不必要的元素重渲染。

Vue 的 diff 算法：

Vue 的 diff 算法是基于 “就地復用” 的策略。當新舊 Virtual DOM 進行比較時，Vue 會嘗試復用舊節點，并且根據需要進行更新。這使得 Vue 在處理列表時，即使沒有手動添加 key，也能盡可能地復用元素，避免不必要的元素重渲染。

然而，這種策略在某些情況下可能會導致問題。例如，如果你有一個列表，其中的元素可能改變類型，那么你需要手動添加 key 來告訴 Vue 哪些元素可以復用，哪些元素需要創建或銷毀。

總的來說，React 和 Vue 的 diff 算法都是為了提高渲染性能，但是它們在實現細節和優化策略上有所不同。在實際開發中，你需要根據你的應用的需求和性能要求來選擇使用哪一個。

 

5.vue3 computed watch

 

源碼角度 effect triger track

 

6.webpack vite 區別

Vite 開發esbuild

生產rollup

 

esm，rollup 

webpack  Hmr  

HMR（Hot Module Replacement），熱更新又稱熱替換，基于 webpack-dev-server。 第一步：webpack 對文件系統進行 watch 打包到內存中 第二步：devServer 通知瀏覽器端文件發生改變，在這一階段，sockjs 是服務端和瀏覽器端之間的橋梁，在啟動 devServer 的時候，sockjs 在服務端和瀏覽器端建立了一個 webSocket 長連接，以便將 webpack 編譯和打包的各個階段狀態告知瀏覽器 第三步：webpack-dev-server/client 接收到服務端消息做出響應 第四步：webpack 接收到最新 hash 值驗證并請求模塊代碼 第五步：HotModuleReplacement.runtime 對模塊進行熱更新 第六步：調用accept 方法，及時將新后的內容插入到頁面中

 

 

7.leader 時間分配

為什么離職

作為tl 如何管理團隊

 

8優化相關，

 面試的時候問頁面性能有哪些指標，卻經常得到合并文件、壓縮資源等優化手段的答案，是時候整體盤一下“性能指標”了。

1. 基本指標介紹

首先前端性能指標一般分為以下幾種：

• 首屏繪制（First Paint，FP）
• 首屏內容繪制（First Contentful Paint，FCP）
• 可交互時間（Time to Interactive，TTI）
• 最大內容繪制（Largest Contentful Paint，LCP)
• 首次有效繪制（First Meaning Paint, FMP）

 

9 ast 聯系 webpack 構建優化

了解swc嗎

tree-shaking 原理 ：esmodule 靜態分析 ast 剪枝

 

 

 

10 事件循環eventloop 

 

宏任務，微任務

 

 

11.已讀回執，多賬號登錄，正在輸入中狀態

12.對接在線的視頻流（m3u8） 

 

 

 

13.useLayoutEffect 和 useEffect 有什么區別

 

1. useLayoutEffect 相比 useEffect，通過同步執行狀態更新可解決一些特性場景下的頁面閃爍問題。
2. useEffect 可以滿足百分之99的場景，而且 useLayoutEffect 會阻塞渲染，請謹慎使用

14. hooks不能在if中使用

1. react 優化
2. redux 核心概念
3. Redux處理異步邏輯
4. uniapp 轉h5 生命周期。
5. Im交互 

 

20 postmessage，

1. worker 
2. react 19 Ioc forwardref 
3. 跨端dsbridge內部原理
4. sso實現

 

prefetch 與 preload 的區別是什么

 

<link rel="prefetch" href="style.css" as="style" />

<link rel="preload" href="main.js" as="script" />

1. preload 加載當前路由必需資源，優先級高。一般對于 Bundle Spliting 資源與 Code Spliting 資源做 preload
2. prefetch 優先級低，在瀏覽器 idle 狀態時加載資源。一般用以加載其它路由資源，如當頁面出現 Link，可 prefetch 當前 Link 的路由資源。（next.js 默認會對 link 做懶加載+prefetch，即當某條 Link 出現頁面中，即自動 prefetch 該 Link 指向的路由資源

 

Fiber

• Scheduler（調度器）—— 調度任務的優先級，高優任務優先進入Reconciler
• Reconciler（協調器）—— 負責找出變化的組件
• Renderer（渲染器）—— 負責將變化的組件渲染到頁面上

 

babel的轉換流程是什么樣的

首先讀取字符串，然后通過babel-parser將字符串代碼轉換成抽象語法樹AST，之后對該AST進行節點遍歷和轉換，生成新的AST，最后通過babel-generator將新的AST再轉換成新的代碼字符串。

babel包含哪幾個部分，核心包有哪些

包含腳手架cli、一些預設轉換規則preset、語法兼容模塊polyfill和插件plugin等。核心包主要有@babel/core、@babel/parser、@babel/traverse、@babel/generator等。

 

 

 

 

對 useCallback、useMemo 這兩個 hook 的理解，有什么樣的區別，適合在什么場景下使用

1. 是不是所有的變量或者函數都需要用這兩個 hook 進行包裹
1. 能不能量化一下，什么情況下需要使用
2. 包裹后性能一定會好嗎，為什么？
3. 有沒有更底層一點的理解

對類組件和函數組件的理解，它們的區別，什么情況下寫類組件更好，什么情況下寫函數組件更好

 

 

瀏覽器渲染過程

 

 

1. JS 為什么會有浮點精度問題，然后怎么去解決這個問題？
2. React 的任務調度是怎么做的
3. React 中怎么判斷出來瀏覽器剩余多少空間時間

4.HOC hoc怎么處理靜態屬性，跨層級ref等問題

• 5 高階組件怎么控制渲染，隔離渲染？
• 6 高階組件怎么監控原始組件的狀態？

 

1. 箭頭函數可以作為構造函數嗎？

 

webpack 是怎么處理 commonjs/esm

1. 跨域是服務器拒絕請求還是瀏覽器去拒絕的請求？

 

requestAnimationFrame 和 requestIdleCallback

 

渲染層和邏輯層 

 無感登錄

無感授權定位

 

 

Commonjs esm 區別

構建性能分析， 更快的 loader: swc

core-js 是做什么用的？

 

頁面緩存。

 

講一下setState之后發生了哪些事情

先講React的架構，包含了Renderer、Scheduler和Reconciler三部分，然后具體說了每一部分大概是做什么，之后講setState其實就是觸發組件的一次渲染過程，具體過程如下：

1. setState會生成一份新的組件內狀態數據并重新執行Reconciler中的render方法
2. render方法會根據JSX和最新的數據去創建一個新的fiber節點樹，每一個樹節點的創建都是Reconciler中的一個工作單元
3. 所有的創建fiber節點工作單元生成后，這些工作單元的執行和調度會由Scheduler中的任務隊列來執行
4. 任務隊列每次取出一個創建fiber節點的任務執行，執行完成之后會調用瀏覽器的requestIdeCallback方法來判斷當前刷新幀剩余時間是否夠執行下一個任務
5. 如果時間夠就執行下一個創建fiber節點任務，不夠的話就先將創建任務暫停，等下一個刷新幀繼續執行
6. 當所有的創建任務都執行完成之后，就生成了一棵新的fiber節點樹，之后就是通過新舊兩棵樹去做diff算法獲得要更新的樹，后面的diff和渲染部分這里就不多介紹了

 

vue3.0編譯做了哪一些優化？

Vue 3.0作為Vue.js的一次重大升級，其編譯器也進行了一些優化，主要包括以下幾方面：

1. 靜態樹提升： Vue 3.0 通過重寫編譯器，實現對靜態節點（即不改變的節點）進行編譯優化，使用HoistStatic功能將靜態節點移動到 render 函數外部進行緩存，從而服務端渲染和提高前端渲染的性能。
2. Patch Flag：在Vue 3.0中，編譯的生成vnode會根據節點patch的標記，只對需要重新渲染的數據進行響應式更新，不需要更新的數據不會重新渲染，從而大大提高了渲染性能。
3. 靜態屬性提升：Vue3中對不參與更新的元素，會做靜態提升，只會被創建一次，在渲染時直接復用。免去了重復的創建操作，優化內存。 沒做靜態提升之前，未參與更新的元素也在render函數內部，會重復創建階段。
   做了靜態提升后，未參與更新的元素，被放置在render 函數外，每次渲染的時候只要取出即可。同時該元素會被打上靜態標記值為-1，特殊標志是負整數表示永遠不會用于 Diff。
4. 事件監聽緩存：默認情況下綁定事件行為會被視為動態綁定（沒開啟事件監聽器緩存），所以每次都會去追蹤它的變化。開啟事件偵聽器緩存后，沒有了靜態標記。也就是說下次diff算法的時候直接使用。
5. 優化Render function：Vue 3.0的compile優化還包括：Render函數的換行和縮進、Render函數的條件折疊、Render函數的常量折疊等等。

總之，Vue 3.0通過多方面的編譯優化，進一步提高了框架的性能和效率，使得Vue.js更加高效和易用。

 

Vue3 響應式 ref reactive toref torefs  不知道。vue2 響應式缺陷，requestAnimationFrame不了解，settimeout  單線程，defer async

 

 

從輸入URL到頁面渲染加載的過程

 

Proxy 只會代理對象的第一層，Vue3 如何處理  沒答到點子

 

Vue3 解構丟失響應式   

 

Ref reactive 聯系 源碼。精度問題源碼不清楚。 事件循環   了解執行順序。 垃圾回收 新老生代不清楚 

 

優化手段  交易小程序 重復代碼 組件重復 倒計時一致，

體驗優化 異常兜底，防抖節流 

 

 

App通信，原理

 

 

 

 

Vue2 響應式缺陷 $set 原理 實現忘了，$nextTick 原理 隊列回調，=》微任務  事件循環 宏任務，微任務 熟悉，requestAnimationFrame 和 settimeout 區別，

setstate 深入了解，

 

Vue3響應式 proxy，vue2缺陷 數組變化，vue2 微任務  事件循環 宏任務沒答出。 從輸入URL到頁面渲染加載的過程 dns解析，瀏覽器渲染，ast 原理

 

 

轉碼工具

 

react和vue技術棧的對比 

 

小程序架構。

 

 

聊聊vue 或 react 的數據響應

Vue2 響應式的特點就是依賴收集，數據可變，自動派發更新，初始化時通過 Object.defineProperty 遞歸劫持 data 所有屬性添加 getter/setter，觸發 getter 的時候進行依賴收集，修改時觸發 setter 自動派發更新找到引用組件重新渲染

Vue3 響應式使用原生 Proxy 重構了響應式，一是 proxy 不存在 Vue2 響應式存在的缺陷，二是性能更好，不僅支持更多的數據結構，而且不再一開始遞歸劫持對象屬性，而是代理第一層對象本身。運行時才遞歸，用到才代理，用 effect 副作用來代替 Vue2 里的 watcher，用一個依賴管理中心 trackMap 來統一管理依賴代替 Vue2 中的 Dep，這樣也不需要維護特別多的依賴關系，性能上取得很大進步。

相比 Vue 的自動化，React 則是基于狀態，單向數據流，數據不可變，需要手動 setState 來更新，而且當數據改變時會以組件根為目錄，默認全部重新渲染整個組件樹，只能額外用 pureComponent/shouldComponentUpdate/useMemo/useCallback 等方法來進行控制，更新粒度更粗一些。

 

 

常見的前端架構包括以下幾種：

• 單頁面應用（Single Page Application, SPA）
• 優點：用戶體驗流暢，頁面無需重新加載；前后端分離，便于維護和擴展。
• 缺點：初次加載時間長；SEO優化相對困難；對服務器壓力較大。
• 應用場景：適用于需要高度交互性的應用，如社交網絡、在線辦公套件等。
• 微前端架構
• 優點：允許獨立開發和部署不同的前端部分；提高了系統的靈活性和可維護性。
• 缺點：架構復雜性增加；需要解決不同微前端之間的通信和樣式沖突問題。
• 應用場景：適合大型復雜應用，尤其是由多個團隊共同維護的項目。
• 分層架構
• 優點：通過代碼職責的拆分可以有效的將系統進行解耦，從而讓各自部分能夠很好的分工并且協同。
• 缺點：隨著頁面邏輯復雜度提升，數據更改容易混亂，還好出現了Redux、Mobx等數據流控制的框架，將數據管理進行了統一。
• 應用場景：只要不是靜態網頁，現代的web 應用，都會使用分層的架構。

 

 

Ref reactive 聯系 

Vue3 解構丟失響應式   

Vue3 proxy 區別聯系 

從輸入URL到頁面渲染加載的過程 dns解析，http請求 三次握手  cssom樹 

口述 promise 實現 

 

項目 

webassembly 和js快慢

在許多情況下，Wasm 比 JavaScript 更快，因為：

• 獲取 Wasm 花費的時間更少，因為它比 JavaScript 更緊湊，即使在壓縮時也是如此。
• 解碼 Wasm 比解析 JavaScript 花費的時間更少。
• 編譯和優化花費的時間更少，因為 Wasm 比 JavaScript 更接近機器代碼，并且已經在服務器端進行了優化。
• 不需要重新優化，因為 Wasm 內置了類型和其他信息，因此 JS 引擎不需要推測它何時優化它使用 JavaScript 的方式。
• 執行通常需要更少的時間，因為開發人員需要知道的編譯器技巧和陷阱更少，才能編寫出一致的高性能代碼，而且 Wasm 的指令集更適合機器。
• 由于內存是手動管理的，因此不需要垃圾收集。

 Keep-alive.  $Next-tick 實現

Esmodule commonjs  區別  答錯了 

 

Vue3 響應式 源碼沒有閱讀過  觀察 coding 

requestAnimationFrame 和 settimeout 區別  

Gis優化 衛星實時計算 重繪重排 虛擬列表實現 計算高度 

 

 

 

less sass 區別

Sass 是在服務端處理的，以前是 Ruby，現在是 Dart-Sass 或 Node-Sass，而 Less 是在客戶端處理的，需要引入 less.js 來處理 Less 代碼輸出 CSS 到瀏覽器，也可以在開發服務器將 Less 語法編譯成 CSS 文件，輸出 CSS 文件到生產包目錄，有 npm less、Less.app、SimpleLess、CodeKit.app 這樣的工具，也有在線編譯地址。

變量符不一樣，Less 是 @，而 Sass 是 $。

Sass 的功能比 Less 強大，基本可以說是一種真正的編程語言。Less 只是一套自定義的語法及一個解析器，為 CSS 加入動態語言的特性。

Less 相對 Sass 清晰明了，安裝便捷，易于上手，對編譯環境要求比較寬松，適合小型項目。Sass 更適用于復雜或大型項目。

輸出設置，Less 沒有輸出設置，Sass 提供 4 種輸出選項：nested/compact/compressed/expanded，輸出樣式的風格可以有 4 種選擇，默認為 nested。

Sass 支持條件語句，可以使用 if...else.../for...while...each循環等，Less 不支持。

Sass 引用的外部文件命名必須以 _ 開頭，Sass 會認為以 _ 文件是一個引用文件，不會將其編譯為 CSS 文件。Less 引用外部文件和 CSS 中的 @import 沒什么差異。

Less 中的變量運算可以帶或不帶單位，Sass 需要帶單位。

Sass 有工具庫 Compass，簡單說，Sass 和 Compass 的關系有點像 Javascript 和 jQuery 的關系，Compass 是 Sass 的工具庫。在它的基礎上，封裝了一系列有用的模塊和模板，補充強化了 Sass 的功能。Less 有 UI 組件庫 Bootstrap，Bootstrap 是 Web 前端開發中一個比較有名的前端 UI 組件庫，Bootstrap 的樣式文件部分源碼就是采用 Less 語法編寫。

 

函數柯里化 

 

rebase merge區別 

 

利用Vite進行快速的開發和構建。通過合理的Vite配置，如代碼分割、按需加載、壓縮等，優化打包體積和加載速度，

提高應用的性能 具體實踐

 

 

 

 

詢問 vue3.0編譯做了哪一些優化 webpack和vite區別  不行

 

setstate  之后發生了什么。Commonjs esm 區別      keep-alive 實現原理 

 

Vue3 源碼 沒讀過 keep-alive組件緩存  實現 nexttick 原理  js eventloop  事件循環 

 

 setstate 流程 fiber  更新  vue數據響應，computed watch 區別  redux vuex 

 

 

垃圾回收  新老生代 引用計數 標記清除  。

vue3.0編譯做了哪一些優化？ 編譯加速 靜態提升  tree-shaking  webpack  Hmr  原理

fiber 調度器。

 

Vue2 響應式  遞歸   缺點 對象屬性  vue3  proxy  Ref reactive  使用 源碼沒看過  橫向 聯系react useref  比較淺 

 

 

從輸入URL到頁面渲染加載的過程  渲染流程不是很熟悉 requestanimationframe 執行效率 settimeout 不準確 

 

Esmodule commonjs  區別  沒有深入了解 使用區別

 

 

react 實現 keep-alive  

 

useLayoutEffect 和 useEffect 有什么區別 

Redux狀態管理。 輕量，

setstate 

Lru 不清楚

二叉樹遍歷 

dfs bfs 

webpack splitchunk 分割  圖片壓縮  url-loader      rapack 

hmr 

小程序分包 cdn 

口述promise 實現 沒答出  race 實現 

 

 

Vue3 響應式 收集依賴 ref reactive  useRef 更新dom fiber 可中斷 優先級更新requestidlecallback

瀏覽器合成cssom  

Vue2 區別   

webpack vite 調優 

Spa 全部加載-路由 按需加載 splitchunk 調優 performance 術語

vite 配置 

webpack hmr 原理  

 

源碼 沒看過 vue3響應式 watch watchEffect  nexttick 做什么 

 

Vue3 特點 對比 vue2 

 沒讀過源碼。

react 事件合成。 setstate  細節 fiber  

webpack vite 區別。 配置簡單 

webpack 熱更新原理

Commonjs  esmodule 靜態

 

Vue3 響應式 區別vue2升級 

react hooks 和vue3 hooks   細節

usememo usecallback 做什么的 按需 

React 19相關特性 沒看

webpack vite 打包區別。升級點  

webpack 優化實踐 loader 使用 plugin 壓縮 splitchunk   tree-shaking 原理 hmr熱更新原理 不了解 

Babel 轉化  不了解 

Vite 開發環境 生產環境 

C端經驗 

項目架構 

工作流

 

Vue3 源碼 沒看過  hooks 區別  react hooks 

Vue2 源碼  

 

響應式區別 watcher，notify，

Vue3  proxy ref實現  不清楚 

Diff 算法 更新 靜態提升 

keep-alive 原理 ， 

react hooks  v-model  

webpack 優化實踐 壓縮  cdn  分包splitchunk   量化指標  請求數量  分析包體積 ；首屏 圖片  webpack忘記怎么做的，圖片懶加載 現在的方案 toc項目最近沒做。

安全性 xss，正則規格過濾，

 

 

彈幕實現人像露出  計算位置

播放器點擊進度，實現分片加載

播放器 指定區域展示內容 

記錄播放時間 心跳 多端登錄

MediaSource 是什么 sourcebuffer

 

跨端跨平臺編譯 實現  

 

瀏覽器渲染 

 

Vue3 響應式，react 響應式  框架方面一般 

分包 

彈幕實現人像露出  mask  碰撞檢測 

 

保活

 

Vue2/3 響應式 ref reactive 沒讀過源碼

 

react setstate requestIdeCallback不清楚 

webpack vite 區別 

 

webpack 優化 loader-css 

vite 優化 

前端安全。 Xss 輸入內容 明文加密

 

ref reactive   

Vue2 升級vue3 相關 兼容性問題 插件  

webpack 替換 vite  升級 

tree-shaking 

Esmodule commonjs  vite  不了解 

 

地圖類 保活 

shadowref

 

 

跨端開發 

選擇uniapp， 成本，

沒有用過vue3，沒有讀過源碼 

ref  reactive   ref基礎類型   ref實現 vue3 watchEffect

Vue2 keep-alive 原理  nexttick 做什么  

Esmodule commonjs  區別  沒有深入了解 使用區別   打包

Js 事件循環  了解 

webpack 優化 

原生 

 

項目優化 虛擬列表 實現 

 

沒有用過vue3 響應式相關 toref torefs 不清楚

 

computed  watch 

nexttick 不清楚原理 

Commonjs esmodule 

條件搜索 優化 table優化 

單點登錄 跨域 

 視頻播放 

 

源碼 

ref reactive 

watch 

watchEffect  聯動useEffect  

uselayoutEffect 

nexttick 

react 任務調度 

 

瀏覽器渲染流程： 

Webpack 圖片優化 ，

p-limit

 

 

 

Esmodule commonjs  區別  

 

Vue2 diff js 事件循環。setimeout    gc 

Vite不清楚 webpack 優化 按需加載 代碼壓縮 優化打包流程 

單點登錄 

 

ref  template  模版編譯    vue3 computed 緩存不清楚 vue3 diff  LRU 做什么 最長遞增子序列 忘記了

 

 

uselayouteffect  渲染  

 

hooks 不能在if

Setstate同步 合并事件  

 

調度器 不了解 

 

瀏覽器  緩存 機制  

強緩存  協商緩存  

 

webpack  項目優化 

 

Vue3 了解不多 vue2基礎 響應式 watch實現

nexttick  settimeout 

 

 

cicd webpack 優化 splitchunks  忘記了  壓縮 文件哈希 

首屏loading  

按需引入 

 

performance 

Esmodule commonjs 

vite 快  

 

monorepo Webpack 、vite 

https 

HTTP/HTTPS協議 HTTP1.0、1.1、2.0區別

 

 

Vue3 編譯優化 源碼 沒有看過   diff升級 不清楚   toref torefs

Vue2 升級點 組合式api 寫法  響應式更新   definemodel 和v-model區別

interface type 區別

 omit    

 

對稱加密 非對稱加密 不知道

Esmodule  commonjs 一般  webpack vite 區別  不多。webpack 優化 打包代碼分割 常規配置  ， es降級 babel 

monorepo 

小程序 分包 cdn 

 

Vue3 框架升級 

組合式api   mixin hooks  作用域 

響應式 

 

模版 diff  靜態節點 屬性

 

watch 

watchEffect  

 

Js 閉包 new function  作用域  gc   掌握比較一般

 

Esmodule commonjs 規范 require  同步 

esm 靜態  tree-shaking  

 

懶加載 jsonp 

項目優化 

小程序分包  

微信小程序 圖片懶加載  小程序 距離 

 

 

圖片加載優化 lcp