前端面試手冊

崗位職責：

1．熟悉公司業務，能獨立高效高質地完成任務，負責功能的開發、測試、上線、維護；

2．負責推動、優化前端基礎架構、組件抽象，提升開發效率；

3．關注前端前沿技術發展，能夠將新知識傳遞給團隊，并且轉化到潛在項目中。

4．負責提升研發和運營效率的通用組件、工具和平臺能力的開發工作；

5．負責前端核心頁面性能優化，打造良好的用戶體驗

崗位要求

1. 三年以上前端領域開發經驗，參與過系統核心功能的模塊設計與開發，有參與過大型項目開發，并熟悉整體架構和設計原理；；
2. 熟悉W3C標準，熟悉ES5、ES6;
3. 精通html5和css3，熟悉響應式web設計技術，對Web標準和標簽語義化有深入理解；
4. 熟練使用Vue,React,Flutter,UniApp,Electron等框架之一；
5. 精通JavaScript、Ajax等JS技術，對Javascript面向對象編程具有深入的了解,理解工程化思想，對構建和持續集成有一定認識;
6. 熟悉前端工程化工具，如CI/CD流水線、Gulp、webpack、Rollup、Vite等；
7. 熟悉node.js，以及Web服務端開發優先
8. 熟練使用各種調試、抓包工具，能獨立分析、解決和歸納問題;
9. 有較強的敬業精神，責任心及良好的溝通能力和團隊合作精神，熱愛探索新技術
10. 加分項：
    1. 有客戶端／跨端技術（Android/iOS/Flutter/RN/Electron等）開發經驗；
    2. 在網頁中注入JS，定制功能。

• 基礎

1. 什么是閉包，以及如何/為什么使用閉包？

閉包是在函數返回后保持對函數中變量的訪問的一種方式。閉包通常用于數據隱私、封裝和創建具有持久狀態的函數。

2.描述一下 Array.forEach() 循環和 Array.map() 方法之間的主要區別以及為什么您會選擇其中一種方法？

主要區別在于 Array.forEach() 迭代數組的每個元素并對每個元素執行操作，但它不返回新數組。

另一方面，Array.map() 通過將函數應用于原始數組的每個元素來創建新數組。當您想要對每個元素執行操作而不返回新數組時，您可以選擇 Array.forEach() ；當您需要將數組轉換為新數組時，您可以選擇 Array.map() 。

3.描述事件冒泡

事件冒泡是一種機制，其中內部元素中發生的事件通過 DOM 層次結構中的父元素傳播或“冒泡”。它從最里面的元素開始，一直持續到文檔級別，一路觸發附加到每個父元素的事件處理程序。

4.解釋事件委托

事件委托是一種技術，您無需將事件偵聽器附加到各個元素，而是將單個事件偵聽器附加到將為其子元素處理事件的父元素。當您有大量元素或動態添加元素時，此方法非常有用，因為它可以提高性能并減少內存消耗。

5.CORS 代表什么以及它解決什么問題？

CORS 代表跨源資源共享。它是一種機制，允許從資源來源域之外的另一個域請求網頁上的資源。CORS 解決了瀏覽器強制執行的同源策略，該策略可防止腳本出于安全原因向不同域發出請求。

6.解釋let、var和const之間的區別

let 和 const 是在 ES6 中引入的，而 var 從 JavaScript 的早期版本開始就可用了。

let 和 const 具有塊作用域，這意味著它們僅限于聲明它們的塊（例如，在大括號內）。var 具有函數作用域，這意味著它可以在聲明它的整個函數中訪問。

const 與 let 類似，但用于在初始分配后不應重新分配的變量

7.匿名函數的典型用例是什么？

匿名函數，也稱為函數表達式，是在沒有指定名稱的情況下定義的函數。

它們通常用于需要一個函數作為另一個函數的參數的情況或創建自調用函數時。

匿名函數允許更簡潔的代碼，并且可以通過使函數定義更接近其用法來幫助提高代碼可讀性。

8.解釋同步函數和異步函數之間的區別。

同步函數逐步執行，每一行都等待前一行完成。異步函數允許在上一步完成之前執行到下一步。異步函數通常用于非阻塞操作。

9.函數式編程與面向對象編程相比有何優缺點？

函數式編程避免共享狀態和可變數據，使代碼更易于閱讀和調試。面向對象編程依賴于共享的主狀態，這可能會導致復雜性。

函數式編程還促進不變性并支持高階函數，而面向對象編程則強調封裝和多態性。

10.集合與數組有什么區別？

集合不能包含重復值，而數組可以。當唯一性很重要時，集合很有用。

11.您能解釋一下從您輸入網站 URL 到其在屏幕上完成加載的整個過程嗎？

當您輸入網站的 URL 時，瀏覽器會執行一系列步驟，包括 DNS 解析、建立 TCP 連接、發送 HTTP 請求、接收 HTTP 響應、解析和渲染網站內容以及加載其他資源（如果需要）。

12.如何識別瀏覽器中的內存泄漏？

識別瀏覽器中的內存泄漏涉及監視一段時間內的內存使用情況并分析堆快照。Chrome DevTools 等工具提供內存分析功能來跟蹤內存分配、檢測未使用的對象以及識別可能指示內存泄漏的長生命周期對象。

13.HTTP GET 和 POST 請求有什么區別？

HTTP GET 和 POST 請求都用于將數據從客戶端傳輸到服務器。但是，GET 請求包括附加到 URL 的請求參數，而 POST 請求包括消息正文中的請求參數。POST 請求對于傳輸敏感數據更加安全，因為參數在 URL 中不直接可見。

14.處理異步調用的方法有哪些?各有什么優缺點？

回調、promise、await 、async

回調提供了處理異步調用的傳統方法，但可能導致回調地獄并使代碼難以閱讀。

Promise 提供了更簡潔的語法，并允許通過鏈接和 catch 塊等功能更好地處理錯誤。

Async/await 是最近添加的功能，它通過使用異步函數和等待 Promise 來簡化異步代碼，使代碼看起來更加同步且更易于理解。

15.解釋一下?MVVM？

View 層是視圖層，也就是用戶界面。前端主要由 HTML 和 CSS 來構建 。

Model 層是指數據模型，泛指后端進行的各種業務邏輯處理和數據操控，對于前端來說就是后端提供的 api 接口。

ViewModel 層是由前端開發人員組織生成和維護的視圖數據層。在這一層，前端開發者對從后端獲取的 Model 數據進行轉換處理，做二次封裝，以生成符合 View 層使用預期的視圖數據模型

16.rpx、px、em、rem、%、vh、vw的區別是什么？

1.rpx ?相當于把屏幕寬度分為750份，1份就是1rpx

2.px 絕對單位，頁面按精確像素展示

3.em 相對單位，相對于它的父節點字體進行計算

4.rem 相對單位，相對根節點html的字體大小來計算

5.% 一般來說就是相對于父元素

6.Vh 視窗高度，1vh等于視窗高度的1%

7.Vm 視窗寬度，1vw等于視窗寬度的1%

二．React 面試題

1.Prop 和 State 有什么區別？

props 和 state 都是 React 組件中使用的普通 JavaScript 對象。props 從父組件傳遞到子組件，用于組件內不會更改的數據。另一方面，狀態在組件本身內進行管理，并且可以使用 setState 方法進行更新。props 是不可變的，而 state 可以更新。

2.React 組件中有哪些生命周期方法？

componentDidMount、componentWillMount、componentWillUpdate、componentDidUpdate、shouldComponentUpdate 和 componentWillReceiveProps。

這些方法允許您在組件生命周期的不同階段執行操作，例如初始化數據、更新 UI 或處理 prop 更改。

3.虛擬 DOM 和 Shadow DOM 實現。React 協調是如何工作的？

React 使用虛擬 DOM 來高效地更新和渲染組件。它創建實際 DOM 的輕量級表示，并執行比較算法來確定更新真實 DOM 所需的最小更改集。React 的協調過程使虛擬 DOM 更改與實際 DOM 保持一致，從而優化渲染。

三．vue面試題

1.說說你對 SPA 單頁面的理解，它的優缺點分別是什么？

SPA（ single-page application ）僅在 Web 頁面初始化時加載相應的 HTML、JavaScript 和 CSS。一旦頁面加載完成，SPA 不會因為用戶的操作而進行頁面的重新加載或跳轉；取而代之的是利用路由機制實現 HTML 內容的變換，UI 與用戶的交互，避免頁面的重新加載。

優點：

1. 用戶體驗好、快，內容的改變不需要重新加載整個頁面，避免了不必要的跳轉和重復渲染；
2. 基于上面一點，SPA 相對對服務器壓力小
3. 前后端職責分離，架構清晰，前端進行交互邏輯，后端負責數據處理

·

缺點：

1. 初次加載耗時多：為實現單頁 Web 應用功能及顯示效果，需要在加載頁面的時候將 JavaScript、CSS 統一加載，部分頁面按需加載；
2. 前進后退路由管理：由于單頁應用在一個頁面中顯示所有的內容，所以不能使用瀏覽器的前進后退功能，所有的頁面切換需要自己建立堆棧管理
3. SEO 難度較大：由于所有的內容都在一個頁面中動態替換顯示，所以在 SEO 上其有著天然的弱勢

1. v-show 與 v-if 有什么區別？

v-if?是真正的條件渲染，為真才會開始渲染條件塊

v-show?元素總是會被渲染，并且基于 CSS 的 “display” 屬性進行切換。

所以，v-if 適用于在運行時很少改變條件，不需要頻繁切換條件的場景；v-show 則適用于需要非常頻繁切換條件的場景。

1. 怎樣理解 Vue 的單向數據流？

所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態，從而導致你的應用的數據流向難以理解。額外的，每次父級組件發生更新時，子組件中所有的 prop 都將會刷新為最新的值。這意味著你不應該在一個子組件內部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制臺中發出警告。子組件想修改時，只能通過 $emit 派發一個自定義事件，父組件接收到后，由父組件修改。

1. computed 和 watch 的區別和運用的場景？

computed：?是計算屬性，依賴其它屬性值，并且 computed 的值有緩存，只有它依賴的屬性值發生改變，下一次獲取 computed 的值時才會重新計算 computed 的值；

watch：?更多的是「觀察」的作用，類似于某些數據的監聽回調 ，每當監聽的數據變化時都會執行回調進行后續操作；運用場景：

當我們需要進行數值計算，并且依賴于其它數據時，應該使用 computed，因為可以利用 computed 的緩存特性，避免每次獲取值時，都要重新計算；

當我們需要在數據變化時執行異步或開銷較大的操作時，應該使用 watch，使用 watch 選項允許我們執行異步操作 ( 訪問一個 API )，限制我們執行該操作的頻率，并在我們得到最終結果前，設置中間狀態。這些都是計算屬性無法做到的。

1. 談談你對 Vue 生命周期的理解？

Vue 實例完整的生命周期，從開始創建、初始化數據、編譯模版、掛載 Dom -> 渲染、更新 -> 渲染、卸載等一系列過程，我們稱這是 Vue 的生命周期。

（2）各個生命周期的作用生命周期描述

beforeCreate 組件實例被創建之初，組件的屬性生效之前

created 組件實例已經完全創建，屬性也綁定，但真實 dom 還沒有生成，$el 還不可用

beforeMount 在掛載開始之前被調用：相關的 render 函數首次被調用

mounted el 被新創建的 vm.$el 替換，并掛載到實例上去之后調用該鉤子

beforeUpdate 組件數據更新之前調用，發生在虛擬 DOM 打補丁之前

update 組件數據更新之后

activited keep-alive 專屬，組件被激活時調用

deadctivated keep-alive 專屬，組件被銷毀時調用

beforeDestory 組件銷毀前調用

destoryed 組件銷毀后調用

6.Vue 的父組件和子組件生命周期鉤子函數執行順序？

Vue 的父組件和子組件生命周期鉤子函數執行順序可以歸類為以下 4 部分：

加載渲染過程·

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

·

子組件更新過程

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

·

父組件更新過程

父 beforeUpdate -> 父 updated

·

銷毀過程

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

1. 在什么階段才能訪問操作DOM？

在鉤子函數 mounted 被調用前，Vue 已經將編譯好的模板掛載到頁面上，所以在 mounted 中可以訪問操作 DOM。

7.v-model 的原理？

我們在 vue 項目中主要使用 v-model 指令在表單 input、textarea、select 等元素上創建雙向數據綁定，我們知道 v-model 本質上不過是語法糖，v-model 在內部為不同的輸入元素使用不同的屬性并拋出不同的事件：

text 和 textarea 元素使用 value 屬性和 input 事件；

checkbox 和 radio 使用 checked 屬性和 change 事件；

select 字段將 value 作為 prop 并將 change 作為事件。

·

1. Vue 組件間通信有哪幾種方式？

?3 類通信：父子組件通信、隔代組件通信、兄弟組件通信

1）props / $emit?適用 父子組件通信

2）ref?與?$parent / $children?適用 父子組件通信

3）EventBus （$emit / $on）?適用于 父子、隔代、兄弟組件通信

4）$attrs/$listeners?適用于 隔代組件通信

5）provide / inject?適用于 隔代組件通信

8.vue-router 路由模式有幾種？

?路由模式：hash、history、abstract，

hash: 使用 URL hash 值來作路由。支持所有瀏覽器，包括不支持 HTML5 History Api 的瀏覽器；

history : 依賴 HTML5 History API 和服務器配置。具體可以查看 HTML5 History 模式；

abstract : 支持所有 JavaScript 運行環境，如 Node.js 服務器端。如果發現沒有瀏覽器的 API，路由會自動強制進入這個模式.

9.你有對 Vue 項目進行哪些優化？

1）代碼層面的優化

v-if 和 v-show 區分使用場景

computed 和 watch 區分使用場景

v-for 遍歷必須為 item 添加 key，且避免同時使用 v-if

長列表性能優化

事件的銷毀

圖片資源懶加載

路由懶加載

第三方插件的按需引入

優化無限列表性能

服務端渲染 SSR or 預渲染

·

2）Webpack 層面的優化

Webpack 對圖片進行壓縮

減少 ES6 轉為 ES5 的冗余代碼

提取公共代碼

模板預編譯

提取組件的 CSS

優化 SourceMap

構建結果輸出分析

Vue 項目的編譯優化

·

3）基礎的 Web 技術的優化

開啟 gzip 壓縮

瀏覽器緩存

CDN 的使用

使用 Chrome Performance 查找性能瓶頸

·

10.vue3.0 特性你有什么了解的嗎？

1）監測機制的改變

2）模板

3）對象式的組件聲明方式

四．UniApp面試題

1.如何進行頁面跳轉？

可以使用uni.navigateTo、uni.redirectTo和uni.reLaunch等方法進行頁面跳轉。

uni.navigateTo可以實現頁面的普通跳轉，

uni.redirectTo可以實現頁面的重定向跳轉，

uni.reLaunch可以實現關閉所有頁面，打開到應用內的某個頁面。

2.如何進行數據綁定？

可以使用雙花括號{{}}進行數據綁定，將數據動態展示在頁面上。

3.如何發送網絡請求？

使用uni.request方法發送網絡請求，通過設置url、method、data等參數來實現不同的請求。

4.如何進行數據緩存？

使用uni.setStorageSync方法進行數據緩存，將數據存儲到本地緩存中。

5.如何進行微信支付？

使用uni.requestPayment方法進行微信支付，通過設置支付參數來實現支付功能。

6.如何進行圖片的懶加載？

使用uni.lazyLoadImage組件實現圖片的懶加載，將圖片的src屬性設置為需要加載的圖片地址。

7.如何實現頁面跳轉？

使用uni.navigateTo方法實現頁面跳轉，通過設置url參數來指定跳轉的頁面路徑。

8.如何實現頁面間的數據傳遞？

可以使用uni.navigateTo方法的url參數中添加query參數來實現頁面間的數據傳遞。

9.選擇UniApp作為跨平臺開發的優缺點是什么？

優點：

1.跨平臺開發： UniApp 允許你在一個代碼庫中編寫應用，并將其編譯成多個不同平臺的應用，減少了開發成本和維護成本。

2.基于 Vue.js： 如果你熟悉 Vue.js，就能很容易上手 UniApp。Vue.js 的組件化開發和數據綁定特性在 UniApp 中也得以保留。

3.豐富的組件庫： UniApp 提供了豐富的組件庫，包括跨平臺和特定平臺的組件，方便快速開發應用。

4.性能優化： UniApp 會根據不同平臺進行代碼優化，同時也支持一些性能優化的特性，如懶加載、圖片壓縮等。

5.快速原型開發： 使用 Vue.js 的響應式設計，你可以快速創建原型，并在不同平臺上進行測試，加速開發迭代。

6.統一的 API 接口： UniApp 提供了統一的 API 接口，讓你可以在不同平臺上調用相同的接口，簡化了代碼編寫。

7.插件擴展： UniApp 支持插件擴展，你可以通過插件來增加功能，如地圖、支付等。

8.生態系統： UniApp 有一個不斷發展的社區和生態系統，可以分享經驗、解決方案和開源組件。

缺點：

1.平臺差異： 盡管 UniApp力求提供平臺無關的代碼，但不同平臺的差異還是會存在，可能需要做一些平臺特定的調整和兼容。

2.靈活度受限： 為了實現跨平臺兼容，有時可能會限制一些平臺特定的功能，降低了部分靈活度。

3.依賴編譯： 由于需要將代碼編譯成不同平臺的代碼，開發過程中可能需要依賴 UniApp 的編譯過程，一些開發者可能會感到束縛。

4.性能問題： 盡管 UniApp 進行了性能優化，但在某些復雜場景下，可能會存在性能問題，需要注意優化。

5.學習成本： 如果你之前沒有使用過 Vue.js，上手 UniApp 需要學習 Vue.js 的基本概念和語法。

6.擴展性限制： 對于一些復雜的功能和需求，可能需要額外的工作來進行擴展和定制。

10.頁面生命周期

1. onLoad：首次進入頁面加載時觸發，可以在 onLoad 的參數中獲取打開當前頁面路徑中的參數。

2. onShow：加載完成后、后臺切到前臺或重新進入頁面時觸發

3. onReady：頁面首次渲染完成時觸發

4. onHide：從前臺切到后臺或進入其他頁面觸發

5. onUnload：頁面卸載時觸發

6. onPullDownRefresh：監聽用戶下拉動作

7. onReachBottom：頁面上拉觸底事件的處理函數

8. onShareAppMessage：用戶點擊右上角轉發