>[danger]Vue-router中如何實現懶加載？
* 在**路由配置文件**中**使用[動態導入import()語句](http://www.hmoore.net/hanxuming/interview/3153556)，并用箭頭函數返回**實現路由懶加載。
* 配合的是**babel**中`@babel/plugin-syntax-dynamic-import`插件：用于轉換動態導入（Dynamic import）語法。此插件已在 [Vue-cli中提供的 Babel 插件：@vue/cli-plugin-babel](http://www.hmoore.net/hanxuming/interview/3153816)里面內置。
示例：
>參考鏈接
* [官網：路由懶加載](https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E8%B7%AF%E7%94%B1%E6%87%92%E5%8A%A0%E8%BD%BD)
* [動態導入import()語句](http://www.hmoore.net/hanxuming/interview/3153556)
* [Vue-cli中提供的 Babel 插件：@vue/cli-plugin-babel](http://www.hmoore.net/hanxuming/interview/3153816)
- 閱讀說明
- 更新日志
- 自研插件推薦
- 【一小時準備前端面試】
- 系列說明
- 2024年年初30道面試題沖刺金三銀四
- 1、從輸入URL到頁面加載完成的過程
- 2、請介紹一下Js中的單線程和事件循環
- 3、Js中實現繼承的幾種方式
- 4、介紹一下 Js 中bind(),call()和apply()的區別
- 5、介紹一下 Js 中的閉包及其使用場景
- 6、介紹一下Vue2與Vue3中的雙向數據綁定
- 7、介紹一下Vue中template模版的編譯原理
- 8、Vue2中的diff流程
- 9、Vue3中的diff流程
- 10、Vue中的組件間通信有哪些？
- 11、Vue-router中如何實現懶加載？
- 12、Vue3相對于Vue2進行了哪些優化？
- 13、介紹一下React Fiber
- 14、React中常用的高階組件有哪些？
- 15、React Hook為什么不能放到條件語句中？
- 16、React有哪些常用的hooks？
- 17、介紹下React中的useEffect
- 18、介紹一下Promise的狀態及其方法
- 19、介紹一下async/await 的實現原理
- 20、介紹一下let、const、var的區別
- 21、箭頭函數和普通函數有什么區別
- 22、Css中常用的垂直居中解決方案有哪些？
- 23、什么是BFC？
- 24、Css中移動端適配有哪些方案？
- 25、什么是Css中的回流（重排）與重繪？
- 26、常用的跨域解決方案有哪些？
- 27、Webpack中有哪些核心概念？
- 28、Vite 和 Webpack 的區別
- 29、Webpack常見的優化方案有哪些？
- 30、瀏覽器中強緩存與協商緩存的緩存機制
- Vue
- Vue中的虛擬DOM
- Vue中的虛擬DOM
- Vue中是如何將模版語法轉換為虛擬DOM的？
- Vue2中的diff流程
- Vue3中的diff流程
- Vue2與Vue3兩者Diff流程的區別
- 【阿里巴巴】Vue中虛擬dom變成實際 dom 是怎么發生的？
- 【阿里巴巴】怎么實現虛擬dom 和實際dom 的分離和銜接？
- Virtual Dom的優勢在哪里？
- 虛擬DOM真的比真實DOM性能好嗎
- 舉例介紹一下雙端比較算法
- 舉例介紹一下最長遞增子序列算法
- Vue的diff算法和React的diff算法的異同
- Vue中的雙向數據綁定
- Vue2與Vue3中的雙向數據綁定
- defineProperty和proxy的區別
- Vue2中v-model 的原理
- Vue2通過數組下標更改數組視圖為什么不會更新？
- Vue3通過數組下標更改數組視圖為什么會更新？
- Vue2中如何監聽(檢測)對象或者數組某個屬性的變化？
- Vue2中vm.$set 的實現原理
- Vue核心
- Vue2中的自定義指令
- Vue中的$nextTick及使用場景
- Vue中的組件間的通信有哪些？
- Vue中的過濾器
- Vue中的內置組件有哪些？
- Vue中的component動態組件
- Vue中的 keep-alive 組件
- Vue中的slot插槽
- Vue中的data屬性為什么是一個函數而不是一個對象？
- Vue渲染列表為什么要加key?
- Vue中的v-show 和 v-if有什么區別
- 為什么避免v-for和v-if在一起使用？
- Vue中常用的修飾符有哪些？
- Vue中 computed 和 watch 的區別
- Vue2中的extends
- Vue2中的Vue.extend
- 簡述Vue中mixin、extends 的覆蓋邏輯
- Vue2中怎么封裝自定義插件并使用？
- Vue中子組件可以直接改變父組件的數據嗎？
- Vue中的異步組件
- Vue中scoped的作用與原理
- Vue中beforeDestroy鉤子函數的作用
- mixin混入
- Vue2中的mixin混入
- Vue中mixin定義與組件相同變量以哪個為主？
- Vue中先執行父組件的生命周期還是 mixin 的生命周期？
- Vue-Router
- Vue-router中如何實現懶加載？
- Vue-router中使用懶加載的好處
- Vue-router中如何實現把組件按組分塊？
- Vue中異步組件與路由懶加載有什么關系
- Vue-router路由模式有幾種？
- Vue-router中兩種路由模式的區別
- Vue-router中history模式部署
- Vue-router中history路由模式的原理
- Vue-router中hash路由模式的原理
- Vue-router中的路由守衛有哪些？
- SPA與前端路由的關系
- Vue-router中$route 和$router 的區別
- Vue-router中跳轉有哪些方法？
- Vue-router中路由傳遞參數有哪些方法
- Vue-router中的命名視圖
- Vue-router中的嵌套路由
- Vue-router中的路由重定向和404
- Vue生態
- Vue項目中如何二次封裝axios？
- Vue-cli中assets文件夾和static文件夾的區別
- Vue-cli中的@vue/cli-plugin-babel庫
- Vuex中有幾個核心屬性？
- 頁面刷新時Vuex內數據丟失怎么處理？
- Vuex中的輔助函數有哪些？
- Axios的請求攔截和響應攔截底層實現原理是什么？
- Vue中的權限管理
- Vue項目中如何做權限管理？
- Vue中如何設計接口權限？
- Vue中如何設計按鈕權限？
- Vue中如何設計菜單權限？
- Vue中如何設計路由權限？
- Vue項目中如何解決跨越問題？
- Vue中的編譯流程
- Vue中template模版編譯原理
- 從編譯開始的整個Vue的流程
- Vue2的初始化過程中（new Vue(options)）都做了什么？
- Vue實例掛載的過程中發生了什么？
- Vue源碼分析
- Vue中$nextTick的原理？
- 單頁面應用
- 實現SPA單頁面應用的核心原理
- SPA單頁面應用，首屏加載有哪些優化方法？
- Vue中設置過哪些異常處理？
- Vue.use函數具體做了哪些事？
- Vue為什么采用異步渲染？
- Vue中性能優化(項目優化)有哪些？
- 從0到1自己構架一個Vue項目
- Vue項目進行 SEO 優化的常用方案
- Vue中動畫怎么實現？
- Vue3.0
- Vue3相對于Vue2進行了哪些優化？
- Vue3中組合式Api對比選項式Api的區別
- Vue3中組合式Api對比選項式Api的優勢
- Vue3中watch 和 watchEffect 的區別
- Vue3中render函數的作用
- Vue3中的setup語法糖
- Vue3中的ref、toRef、toRefs
- Vue3中的 reactive、 shallowReactive 函數
- Vue3中的生命周期
- Vue3中setup語法下怎么設置name屬性？
- Vue3中的自定義指令
- pinia：Vue3中的狀態管理庫
- Vue3中的v-model
- Vue3中怎么封裝自定義插件并使用？
- Vue3中createApp(App)創建應用實例過程中都發生了什么？
- Vue3中有哪些新的組件？
- Vue3中Composition API 和 React Hook的區別
- React
- React中的虛擬DOM
- React中的虛擬DOM
- React棧調和，diff算法說一下？和vue的diff算法有什么不同？key有什么用？
- React為什么要用虛擬dom呢？
- React Fiber
- React中的Fiber架構
- React Fiber在哪個過程是可以中斷的？
- React 核心
- React中的組件通信有哪些方法？
- React中的高階組件HOC
- React中常用的高階組件有哪些？
- React中的受控組件與非受控組件
- React中為什么要劫持事件？
- React中錯誤邊界的概念
- React中的Suspense組件
- JSX
- 什么是 JSX ？
- JSX有哪些使用規則？
- React的合成事件和事件委托機制，混用合成事件和原生事件誰會先執行？
- 【阿里巴巴】React框架的特點是什么，跟傳統的框架對比？
- 【阿里巴巴】React框架渲染層面有什么特別，跟document 的方式有什么區別嗎？
- React 類組件
- React16之后的生命周期
- React中的setState同步異步問題
- React中的setState是同步的還是異步的？
- React中類組件的性能優化
- React中的PureComponent
- React中手動實現shouldComponentUpdate
- React中的shouldComponentUpdate
- React Hooks
- React v16.8中的hooks
- React v18中的hooks
- React中函數組件使用哪些hook來代替生命周期
- React中如何拿到函數組件的實例？
- React中函數組件的性能優化
- React.memo：優化函數組件的性能
- React中useCallbck 和 useMemo的區別
- React中的useMemo和memo
- React Hook為什么不能放到條件語句中？
- React中實現自定義Hook
- React中常用的自定義Hook有哪些
- React hooks的使用限制有哪些？
- 介紹下React中的useEffect
- React中useEffect和useLayoutEffect區別
- React 中組件的優化方法
- React v18
- React v18有哪些新特性？
- React從16-18的變化
- React中如何實現keepalive,Offscreen(18實驗新特性)
- React生態
- Redux
- Redux的使用
- Redux的實現原理
- Redux中間件了解過嗎？
- React-router
- React-router-dom、React-router、history庫三者什么關系
- 路由的不同及原理
- React中狀態管理的方式除了redux，還有哪些？
- React原理
- React中useState的執行本質
- React中useState的底層實現原理
- React中useEffect的執行本質
- React中useCallback的執行本質
- React的渲染原理
- Vue 和 React 對比有什么不同？
- JavaScript
- Js中的異步
- Js中 同步任務 和 異步任務 的區別
- Js中的單線程與事件循環
- 什么是宏任務和微任務？
- Js中的異步機制
- script標簽中defer和async的區別
- Js中的XMLHTTPRequest對象
- Js中的fetch方法
- 瀏覽器的Eventloop 和 node的Eventloop區別
- script都要等待嗎？
- Js中async和defer的區別
- Js中的原型和原型鏈
- 什么是Js中的原型及原型鏈？
- Js中原型鏈的終點是什么？
- Js調用new的過程
- 說說面向對象的特性與特點
- Js中實現繼承幾種方式
- 后端一次性返回10萬條數據，如何處理？
- Js中的基礎數據類型
- Js中數據類型有哪些
- Js中引用數據類型和基本數據類型的區別是什么？
- Js中null 和 undefined 有什么區別？
- 什么是Js中Object屬性的可枚舉性 ？
- 什么是 Js 中的包裝類型？
- Js中為什么0.1+0.2 ! == 0.3，如何讓其相等 (精度丟失)？
- Js中{}和 [] 的 valueOf 和 toString 的結果是什么？
- Js中的基礎語句
- Js中for in 和 for of 的區別
- Js中includes和indexOf的區別
- Js中的函數
- Js中bind(),call()和apply()的區別
- Js中bind(),call()和apply()三者常用的使用場景
- 【阿里巴巴】Js中的call 使用的場景是什么樣？
- 如何判斷Js中 this 的指向？
- Js中的this指向
- 介紹下Js中function函數的this指向
- 什么是尾調用，使用尾調用有什么好處？
- Js中變量提升與函數提升的區別？
- 什么是Js中的函數柯里化？
- Js中的高級方法
- Js中的requestAnimationFrame
- Js中的getBoundingClientRect
- Js中的intersectionObserver
- Js中的createNodeIterator
- Js中的getComputedStyle
- Js中的閉包和作用域
- Js中的執行上下文？
- Js中執行上下文的類型
- Js中執行上下文棧是什么？
- Js中執行上下文的三個階段
- 什么是作用域？什么是自由變量？
- Js中作用域的常見應用場景
- Js中的作用域鏈
- Js中如何延長作用域鏈？
- 什么是閉包？閉包會用在哪兒？
- Js中閉包的作用
- Js中的閉包在項目中的引用場景，以及帶來的問題
- Js中閉包的使用場景
- Js中閉包的執行過程
- Js中的對象
- Js中創建對象有哪幾種方式？
- Js中的hasOwnProperty、instanceof方法
- Js中深淺拷貝區別
- Js中如何避免一個對象的屬性被修改？
- Js中的數組
- Js中數組的forEach和map方法有哪些區別？
- ES6中map、filter、reduce 怎么用？
- 數組中方法對于原數組的影響
- Js中數組的變異方法與非變異方法
- 什么是Js中的偽數組(類數組)？
- Js中類數組轉換成數組的方法有哪些？
- 如何遍歷Js中的類數組?
- Js中數組的遍歷方法有哪些？
- Js中的forEach如何跳出循環？
- Js中的類型判斷
- Js中判斷數據類型的方法有哪些？
- Js中typeof和instanceof的區別
- Js中判斷空對象
- Js中typeof null 的結果是什么，為什么？
- Js中怎么判斷值是不是為null？
- Js中typeof NaN 的結果是什么？
- Js中如何準確判斷一個變量不是數組？
- Js中類型如何進行類型轉換？
- Js中使用Object.prototype.toString.call()判斷數據類型
- Js中的事件
- 談談Js中的事件冒泡和捕獲
- Js中的瀏覽器事件機制
- Js中的dispatchEvent的自定義事件
- 什么是Js中的事件委托/事件代理？
- 如何對監聽scoll事件的優化？
- Js中 src 和 href 的區別
- Js中的本地存儲
- 介紹一下Js中cookie、sessionStorage、localStorage 的區別
- Js的執行流程
- Js中數據在棧和堆中的存儲方式
- Js的內存機制了解嗎？
- ECMAScript
- Promise相關
- Promise的狀態及其方法
- Promise優缺點
- 手寫實現Promise及思路
- 什么是Promise A+ 規范？
- Promise怎么進行超時控制？
- 控制并發的Promise的調度器
- PromiseLike及其判斷
- PromiseQueue
- 使用Promise異步加載一張圖片
- 使用Promise異步加載一個在線js sdk
- 手寫實現Promise（簡易版）
- 手寫實現Promise.all
- 手寫實現Promise.race
- async/await相關
- async/await 實現原理
- 判斷傳入的函數是否標記了async？
- async語法怎么捕獲異常？
- async函數的返回值
- 什么是頂層await？
- 如何用await讓程序停頓指定的時間(休眠效果)？
- 如果在async()前面加上await會不會影響輸出結果？
- Promise和async/await有哪些相似性？
- Es中的數據類型
- let、const、var的區別
- ES6中Map、Object 的區別
- Es6中字符串新增的方法
- Es6中的Symbol數據類型
- Es6中可以修改const聲明的對象的屬性嗎，為什么？
- 修改對象的迭代器，實現方法
- Es中的函數
- Es6中的箭頭函數
- 箭頭函數和普通函數有什么區別
- ES6中Map、WeakMap、Object 區別
- Es中的類
- Es6中 Class類 的本質是什么？
- 原型繼承 和 Class 繼承
- 如何將 Class類 轉換為 Function？
- Class類里面有一些成員變量和方法，轉成es5后，瀏覽器里面實際運行是什么樣？
- 如何判斷一個對象是否屬于某個類？
- Es6中的 Class類
- Es6 中的 Class類 如何實現繼承？
- 實現一個重試N次請求的方法
- Es中的迭代器與生成器
- 迭代器(iterator)和生成器(generator)的關系
- 常用的模塊化標準
- CommonJS和ES6 Module的區別是什么？
- 靜態導入與動態導入的區別
- Es中的解構賦值
- Es6有哪些新語法？
- 手寫Js
- 手寫Js中的重點方法
- Js中節流與防抖的實現
- Js中的深拷貝與淺拷貝
- 實現一個類型判斷的方法
- 【樹形結構】將樹形結構扁平化
- 【樹形結構】根據id 和 parentid 將數組數據轉成樹形結構
- Js中數組相關的方法實現
- 請寫至少三種數組去重的方法？
- 將兩個數組合并，去重，不要求排序，返回一維數組
- 如何找到數組中出現次數最多的字符串？
- 手寫打亂數組順序的方法
- 實現函數柯里化（Currying）
- 實現Js中的 Compose （組合）
- 實現Js中的 Pipe （管道）
- 實現斐波那契數列
- Js中如何判斷括號的正確性？
- 實現 add(1)(2)(3)(4)
- 用Promise實現圖片的異步加載
- 實現Object.defineProperty(簡易版)
- 實現Proxy數據劫持(簡易版)
- 實現路由(簡易版)
- 使用 setTimeout 實現 setInterval
- 使用setInterval實現setTimeout
- 提取出url 里的參數并轉成對象
- 將金額轉換為千分位表示法
- 一個嵌套對象，拍平對象，實現一個key對應一個簡單類型的值
- 寫一個函數，入參是一個類數組
- 反轉字符串
- 手寫實現Js
- 手寫實現Js中的new
- 手寫實現Js中的call
- 手寫實現Js中的apply
- 手寫實現Js中的bind
- 手寫實現Js中的instanceof
- 手寫實現Js中數組相關方法
- 手寫實現數組的map方法
- 手寫實現數組的filter方法
- 手寫實現數組的some方法
- 手寫實現數組的every方法
- 手寫實現數組的find方法
- 手寫實現數組的forEach方法
- 手寫實現數組的reduce方法
- 手寫實現數組的flat方法
- 手寫實現數組的push方法
- 手寫實現Js中的Object.create
- Js代碼執行分析
- js中執行++[[]][+[]] + [+[]] 輸出什么
- 微任務和宏任務
- Promise輸出順序（一）
- Promise輸出順序（二）
- Promise輸出順序（三）
- Promise輸出順序（四）
- async1輸出順序（一）
- async輸出順序（二）
- async與Promise
- 自執行輸出順序
- 無限遞歸一定會溢棧嗎
- (a == 1 && a == 2 && a == 3) 有可能是 true 嗎？
- TypeScript
- 配套教程
- Ts中的類型層級
- Ts中內置的工具類型
- Ts中常用的自定義工具類型
- Ts中的類型推斷、類型斷言、非空斷言
- Ts中type和interface的區別
- Ts中的any、unkonwn、never
- Ts中的數據類型
- Ts中的泛型
- TS中怎么給引入的第三方庫設置類型聲明文件？
- 說說對 TypeScript 裝飾器的理解？
- Css
- Css中的垂直居中
- Css中常用的垂直居中解決方案有哪些？
- Css中清除浮動的有哪些方式？
- BFC
- 回流與重繪
- 什么是Css中的回流與重繪？
- 哪些Css中的操作會導致回流？
- 哪些Css中的操作會導致重繪？
- Css中如何減少回流、重繪？
- documentFragment (文檔碎片)是什么？
- 多行文本省略
- Css中移動端適配有哪些方案？
- 常見的Css布局單位有哪些？
- Css中怎么解決瀏覽器兼容問題？
- 畫一條0.5px的線
- 在Retina屏幕的機型上，如何解決1px的問題？
- Chrome中如何設置小于12px 的文字？
- Css中如何優化動畫？
- Flex布局
- 聊聊你了解的Flex？
- Css中的定位
- 介紹一下Css中的定位
- Css中positon有哪些值
- 介紹一下Css中的粘性定位
- Css布局
- 三欄布局的實現
- 圣杯布局
- 雙飛翼布局
- 左側固定，右側自適應
- Css中的選擇器
- Css中的選擇器及其優先級
- Css中的連接器有哪些？
- Css中如何計算選擇器優先級?
- 介紹一下瀏覽器中的GPU
- Css中如何充分利用 GPU 加速渲染？
- Css中如何實現固定長寬比的元素？
- Css中可繼承與不可繼承屬性有哪些？
- Css中隱藏元素的方法有哪些？
- Css中 li 與 li 之間有看不見的空白間隔是什么原因引起的？如何解決？
- Css3中有哪些新特性?
- Css中實現圖形
- 實現一個三角形
- 實現一個扇形
- Css中如何畫三角形？
- Css黑暗主題如何適配？
- Css中的標準盒子模型和怪異盒子模型
- Less常見的語法與使用
- 網絡協議
- 從輸入 URL 到頁面加載完成
- 跨域問題
- 什么是瀏覽器的同源策略？
- 常用的跨域解決方案有哪些？
- HTTP中的optins預檢請求
- 什么情況下post請求會被發送兩次請求?
- 跨域的場景下一定會發OPTION嗎？
- HTTP基礎
- HTTP請求都有哪些方法？
- HTTP中常見的 header 頭有哪些？
- GET請求和POST請求的區別
- HTTP請求中Content-type內容類型有哪些？
- HTTP請求中的Cookie
- Cookie有哪些字段呢？為啥有一個http only？
- HTTP中的Keep-Alive有了解嗎？
- HTTP/1.0 和 HTTP/1.1 之間有哪些區別？
- HTTP協議的優點和缺點
- GET方法中URL長度限制的原因
- URL有哪些組成部分？
- HTTPS
- 什么是HTTPS協議？
- TLS/SSL的工作原理
- TLS/SSL 中什么一定要用三個隨機數，來生成"會話密鑰"？
- SSL 連接斷開后如何恢復？
- HTTPS通信（握手）過程
- HTTP和HTTPS協議有什么區別？
- 對稱加密、非對稱加密是什么，有什么區別？
- TLS握手做了什么？
- HTTPS的優缺點
- HTTPS是如何保證安全的？
- HTTPS協議是怎么實現安全性的，為啥可以實現完整性？
- HTTPS中使用RSA 算法來確保通信過程的安全性
- 介紹一下Https的加密過程
- HTTPS中證書的作用是什么？
- HTTP/2
- HTTP/2有哪些新特性
- HTTP/1.1 和HTTP/2 之間有哪些區別？
- HTTP2的頭部壓縮算法是怎樣的？
- WebSocket協議
- WebSocket連接是如何創建的？
- WebSocket 協議有哪些優點？
- WebSocket握手過程
- DNS協議
- DNS協議的解析流程
- DNS 為什么使用 UDP 協議作為傳輸層協議？
- DNS 協議是什么？
- TCP協議
- 簡述一下TCP協議的三次握手
- 簡述一下TCP協議的四次揮手
- TCP中為什么要進行四次揮手？
- TCP是如何保證傳輸的穩定性和可靠性的？
- TCP協議三層握手與四次揮手的區別
- TCP鏈接為什么會采用三次握手，而不是兩次或四次呢？
- 一個TCP連接能發幾個HTTP請求？
- TCP粘包是怎么回事，如何處理?
- TCP的滑動窗口
- TCP的隊首阻塞
- CDN 服務
- 談談 CDN 服務？
- CDN 一般放什么數據？
- 什么是正向代理和反向代理？
- 負載平衡的兩種實現方式？
- 即時通訊的實現，短輪詢、長輪詢、SSE 和 WebSocket 間的區別？
- 用戶登錄有哪些實現方案？
- 什么是單點登錄？
- 基于server端session的管理
- cookie-base的管理方式
- token-base的管理方式
- JWT
- 什么是 RESTFUL API ?
- 網絡分層是 5 層還是 7 層？
- 構建工具
- Webpack
- Webpack有哪些核心概念
- 【阿里巴巴】Webpack中具體要配哪些東西？
- Webpack構建流程簡單說一下
- Webpack 的熱更新原理
- Webpack中的優化
- Webpack常見的優化方案
- Webpack優化之減少打包時間
- Webpack優化之減少打包體積
- 如何對bundle體積進行監控和分析？
- Loader
- 有哪些常見的Loader？你用過哪些Loader？
- 【阿里巴巴】Webpack 怎么匹配到對應的loader的？
- 在實際工程中，配置文件上百行乃是常事，如何保證各個loader按照預想方式工作？
- 簡單描述一下編寫loader的思路？
- Webpack中babel-loader都做了哪些事情？
- Plugin
- 有哪些常見的Plugin？你用過哪些Plugin？
- 簡單描述一下編寫Plugin的思路？
- 說一說Loader和Plugin的區別？
- source map是什么？生產環境怎么用？
- Webpack中的模塊打包原理
- Webpack中的文件監聽原理
- Wepack中的代碼分割的本質是什么？
- 文件指紋
- 文件指紋是什么？怎么用？
- JS的文件指紋設置
- CSS的文件指紋設置
- 圖片的文件指紋設置
- dev的時候webpack做了什么事情？
- 什么是神奇注釋或者魔術注釋？
- Vite
- 解釋一下Vite的原理
- Vite 和 Webpack 的區別
- 介紹一下vite
- Babel
- 聊一聊Babel原理吧
- 【阿里巴巴】Webpack 中 babel 屬于什么，以什么樣的方式存在？
- 介紹一下core.js
- 瀏覽器
- 瀏覽器緩存
- 瀏覽器緩存機制
- 強制緩存和協商緩存使用場景是什么？
- 強緩存和協商緩存的區別
- 瀏覽器渲染相關
- 瀏覽器渲染過程是什么樣的？
- 1、瀏覽器接收到 HTML 文件并轉換為 DOM 樹的過程
- 2、將 CSS 文件轉換為 CSSOM 樹的過程
- 3、瀏覽器生成渲染樹的過程
- 為什么操作 DOM 慢？
- 什么情況阻塞渲染？
- 瀏覽器拿到html樹到渲染是什么樣的？
- 解析cssom會阻礙渲染流程嗎？
- 解析js會阻礙渲染流程嗎？為什么？
- 瀏覽器怎么加載資源的？
- 瀏覽器的垃圾回收機制
- 【馬上消費】如何最快的執行垃圾回收機制？
- 內存的生命周期
- 什么是瀏覽器的垃圾回收機制？
- 瀏覽器的垃圾回收的方式有哪些？
- 如何減少垃圾回收?
- v8垃圾回收處理機制
- v8引擎的垃圾回收算法講一下
- 常見瀏覽器所用內核有哪些？
- 介紹一下瀏覽器中的進程和線程
- 什么情況下會導致瀏覽器的內存泄露 ？
- Js是單線程還是多線程，瀏覽器如何支持多個Js線程？
- 如何避免內存泄露 ？
- 介紹下 Worker 線程
- Worker 線程有兩種你知道嗎？
- performance監控工具怎么用的？
- 性能優化
- 前端性能優化常用的方法有哪些?
- 瀏覽器中LightHouse v8/v9性能優化指標有哪些？
- SPA首屏加載速度慢的怎么解決？
- 如何優化LCP？
- 前端性能優化指標RAIL是什么？
- ssr優缺點，實現的具體過程
- 怎么分析性能？
- 數據結構與算法
- 棧
- 隊列
- 鏈表
- 鏈表反轉
- 判斷鏈表是否有環
- 找鏈表中點
- 鏈表中環的入口節點
- 集合
- 字典(哈希)
- 哈希找字符串
- 樹
- 樹解釋
- 二叉樹層序遍歷
- 圖
- 堆
- 排序
- 排序_冒泡排序
- 排序_插入排序
- 排序_希爾排序
- 排序_選擇排序
- 排序_歸并排序
- 排序_快速排序
- 排序_堆排序
- 各排序算法的穩定性，時間復雜度，空間復雜度
- 動態規劃
- 爬樓梯的最小成本
- 大廠算法題
- Js中的大數相加
- 最長遞增子序列
- 實現找到最大字符并輸出其個數
- Js中如何展開多維數組？
- 使用Js實現求解三數之和
- 使用Js求解連續子數組的最大和
- 一個數組里有一堆數字，拼接得到一個最大的數字
- 算法：合并共同區間
- 將一個url中的query字段轉換為map，注意value中的數據類型
- 翻轉一句英文句子，要求單詞順序翻轉，但是單詞本身字母間順序不變
- 版本號比較（1.2 & 1.4.3）
- 項目相關面試題
- 前端監控
- 實現前端監控 SDK 技術要點有哪些？
- 虛擬列表
- 什么是虛擬列表？
- 如何實現虛擬列表？
- 虛擬列表如何實現？
- 監聽scoll事件的優化
- 【阿里巴巴】如果要開發一個類似 cli 的交互命令行工具怎么實現？
- 如何對項目中的圖片進行優化？
- 常見的圖片格式及使用場景
- 如何實現圖片懶加載？
- 大文件上傳如何做分片上傳、斷點繼傳？
- 206狀態碼底層原理，分片上傳原理
- 移動端如何實現上拉加載，下拉刷新？
- Js中的設計模式
- 實現一個單例模式
- 實現一個發布訂閱模式
- 實現一個簡單工廠模式
- 實現一個適配器模式
- 實現一個裝飾模式
- 實現一個代理模式
- 實現一個外觀模式
- Node
- Node.js的三大特性
- Node.js中事件循環的流程
- Node.js中整個異步I/O的流程
- 模塊化規范中require和import的區別
- pnpm原理
- node是單線程的，如何讓他在多核CPU上跑滿？
- ESLint
- 【阿里巴巴】自定義lint 的工具怎么做的，就官方會有一些rules，怎么做一個自定義的一個 rules ？？
- Web安全
- 有哪些可能引起前端安全的問題?
- 如何防御 XSS 攻擊？
- CSRF工作過程
- 什么是 CSRF 攻擊？
- token為什么能夠解決CSRF？
- XSS 和 CSRF 區別和防范
- 什么是中間人攻擊？
- 瀏覽器有哪些安全措施？
- Canvas
- 1、渲染Canvas底層原理