題 1 ：什么是防抖和節流？有什么區別？如何實現？

防抖：觸發高頻事件后n秒內函數只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算是間

思路：每次觸發事件時都取消之前的延時調用方法

節流：高頻事件觸發，但在 n 秒內只會執行一次，所以節流會稀釋函數的執行頻率

思路：每次觸發事件時都判斷當前是否有等待執行的延時函數

題 2 ：get請求傳參長度的誤區、get和post請求在緩存方面的區別誤區：我們經常說get請求參數的大小存在限制，而post請求的參數大小是無限制的。

實際上 HTTP 協議從未規定 GET/POST 的請求長度限制是多少。對 get 請求參數的限制是來源與瀏覽器或 web 服務器，瀏覽器或 web 服務器限制了 url 的長度。為了明確這個概念，我們必須再次強調下面幾點:

• HTTP 協議未規定 GET 和 POST 的長度限制
• GET 的最大長度顯示是因為瀏覽器和 web 服務器限制了 URI 的長度
• 不同的瀏覽器和 WEB 服務器，限制的最大長度不一樣
• 要支持 IE，則最大長度為 2083byte，若只支持 Chrome，則最大長度 8182byte

補充補充一個 get 和 post 在緩存方面的區別：

• get 請求類似于查找的過程，用戶獲取數據，可以不用每次都與數據庫連接，所以可以使用緩存。
• post 不同，post 做的一般是修改和刪除的工作，所以必須與數據庫交互，所以不能使用緩存。因此 get 請求適合于請求緩存。

題 3：模塊化發展歷程

可從IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Module、

• 使用 visibility替換 display: none，因為前者只會引起重繪，后者會引發回流(改變了布局)把 DOM 離線后修改，比如：先把 DOM 給 display:none(有一次 Reflow)，然后你修改100次，然后再把它顯示出來不要把 DOM 結點的屬性值放在一個循環里當成循環里的變量

?for(let i = 0; i < 1000; i++) {? // 獲取 offsetTop 會導致回流，因為需要去獲取正確的值? console.log(document.querySelector('.test').style.offsetTop)?}

• 不要使用 table 布局，可能很小的一個小改動會造成整個 table 的重新布局
• 動畫實現的速度的選擇，動畫速度越快，回流次數越多，也可以選擇使用 requestAnimationFrame
• CSS 選擇符從右往左匹配查找，避免 DOM 深度過深
• 將頻繁運行的動畫變為圖層，圖層能夠阻止該節點回流影響別的元素。比如對于 video標簽，瀏覽器會自動將該節點變為圖層。

題 19：寫 React / Vue 項目時為什么要在列表組件中寫 key，其作用是什么？

vue 和 react 都是采用 diff 算法來對比新舊虛擬節點，從而更新節點。在 vue 的 diff函數中(建議先了解一下 diff 算法過程)。

在交叉對比中，當新節點跟舊節點頭尾交叉對比沒有結果時，會根據新節點的 key 去對比舊節點數組中的 key，從而找到相應的節點(這里對應的是一個 key => index 的 map 映射)。如果沒找到就認為是一個新增節點。而如果沒有 key，那么就會采用遍歷查找的方式去找到對應的舊節點。一種一個 map 映射，另一種是遍歷查找。相比而言，map 映射的速度更快。

題 20：React 中 setState 什么時候是同步的，什么時候是異步的？

在React中，如果是由React引發的事件處理(比如通過onClick引發的事件處理)，調用setState不會同步更新this.state，除此之外的setState調用會同步執行this.state。所謂“除此之外”，指的是繞過React通過addEventListener直接添加的事件處理函數，還有通過setTimeout/setInterval產生的異步調用。原因：在 React 的 setState 函數實現中，會根據一個變量isBatchingUpdates 判斷是直接更新 this.state 還是放到隊列中回頭再說，而 isBatchingUpdates 默認是 false，也就表示 setState 會同步更新 this.state，但是，有一個函數 batchedUpdates，這個函數會把 isBatchingUpdates 修改為 true，而當 React 在調用事件處理函數之前就會調用這個 batchedUpdates，造成的后果，就是由 React 控制的事件處理過程 setState 不會同步更新 this.state。

題 21：為什么虛擬 dom 會提高性能？

虛擬 dom 相當于在 js 和真實 dom 中間加了一個緩存，利用 dom diff 算法避免了沒有必要的 dom 操作，從而提高性能。具體實現步驟如下：1. 用 JavaScript 對象結構表示 DOM 樹的結構；然后用這個樹構建一個真正的 DOM 樹，插到文檔當中。2. 當狀態變更的時候，重新構造一棵新的對象樹。然后用新的樹和舊的樹進行比較，記錄兩棵樹差異。把 2 所記錄的差異應用到步驟 1 所構建的真正的DOM樹上，視圖就更新了。

題 22：清除浮動的方式有哪些？比較好的是哪一種？

常用的一般為三種：.clearfix, clear:both,overflow:hidden。比較好是 .clearfix，偽元素萬金油版本，后兩者有局限性。clear:both：若是用在同一個容器內相鄰元素上,那是賊好的,有時候在容器外就有些問題了, 比如相鄰容器的包裹層元素塌陷overflow:hidden：這種若是用在同個容器內,可以形成 BFC避免浮動造成的元素塌陷

題 23：分析比較 opacity: 0、visibility: hidden、display: none 優劣和適用場景結構：

display:none: 會讓元素完全從渲染樹中消失，渲染的時候不占據任何空間, 不能點擊，visibility: hidden:不會讓元素從渲染樹消失，渲染元素繼續占據空間，只是內容不可見，不能點擊

opacity: 0: 不會讓元素從渲染樹消失，渲染元素繼續占據空間，只是內容不可見，可以點擊繼承：display: none和opacity: 0：是非繼承屬性，子孫節點消失由于元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示。

visibility: hidden：是繼承屬性，子孫節點消失由于繼承了hidden，通過設置visibility: visible;可以讓子孫節點顯式。性能：displaynone : 修改元素會造成文檔回流,讀屏器不會讀取display: none元素內容，性能消耗較大

visibility:hidden: 修改元素只會造成本元素的重繪,性能消耗較少讀屏器讀取visibility: hidden元素內容

opacity: 0 ：修改元素會造成重繪，性能消耗較少聯系：它們都能讓元素不可見

題 24：css sprite 是什么,有什么優缺點

概念：將多個小圖片拼接到一個圖片中。通過 background-position 和元素尺寸調節需要顯示的背景圖案。

優點：

減少 HTTP 請求數，極大地提高頁面加載速度

增加圖片信息重復度，提高壓縮比，減少圖片大小

更換風格方便，只需在一張或幾張圖片上修改顏色或樣式即可實現

缺點：

圖片合并麻煩

維護麻煩，修改一個圖片可能需要重新布局整個圖片，樣式

題 25：link 與 @import 的區別

link是 HTML 方式， @import是 CSS 方式

link最大限度支持并行下載，@import過多嵌套導致串行下載，出現FOUC

link可以通過rel="alternate stylesheet"指定候選樣式

瀏覽器對link支持早于@import，可以使用@import對老瀏覽器隱藏樣式

@import必須在樣式規則之前，可以在 css 文件中引用其他文件

總體來說：link 優于@import

題 26：容器包含若干浮動元素時如何清理浮動

容器元素閉合標簽前添加額外元素并設置clear: both

父元素觸發塊級格式化上下文(見塊級可視化上下文部分)

設置容器元素偽元素進行清理推薦的清理浮動方法

題 27：display,float,position 的關系

如果display為 none，那么 position 和 float 都不起作用，這種情況下元素不產生框。

否則，如果 position 值為 absolute 或者 fixed，框就是絕對定位的，float 的計算值為 none，display 根據下面的表格進行調整。

否則，如果 float 不是 none，框是浮動的，display 根據下表進行調整。

否則，如果元素是根元素，display 根據下表進行調整。

其他情況下 display 的值為指定值 總結起來：絕對定位、浮動、根元素都需要調整display。

題 28：JS 的四種設計模式

工廠模式：簡單的工廠模式可以理解為解決多個相似的問題；

單例模式：只能被實例化(構造函數給實例添加屬性與方法)一次；

沙箱模式：將一些函數放到自執行函數里面，但要用閉包暴露接口，用變量接收暴露的接口，再調用里面的值，否則無法使用里面的值；

發布者訂閱模式：就例如如我們關注了某一個公眾號,然后他對應的有新的消息就會給你推送，代碼實現邏輯是用數組存儲訂閱者, 發布者回調函數里面通知的方式是遍歷訂閱者數組,并將發布者內容傳入訂閱者數組。

題 29：下面代碼的輸出是什么?

?const obj = { 1: "a", 2: "b", 3: "c" };?const set = new Set([1, 2, 3, 4, 5]);???obj.hasOwnProperty("1");?obj.hasOwnProperty(1);?set.has("1");?set.has(1);

truetruefalsetrue所有對象鍵(不包括Symbols)都會被存儲為字符串，即使你沒有給定字符串類型的鍵。這就是為什么obj.hasOwnProperty('1')也返回true。上面的說法不適用于Set。在我們的Set中沒有“1”：set.has('1')返回false。它有數字類型1，set.has(1)返回true。

題 30：下面代碼的輸出是什么？

?// example 1?var a={}, b='123', c=123;?a[b]='b';?a[c]='c';?console.log(a[b]);???---------------------?// example 2?var a={}, b=Symbol('123'), c=Symbol('123');?a[b]='b';?a[c]='c';?console.log(a[b]);???---------------------?// example 3?var a={}, b={key:'123'}, c={key:'456'};?a[b]='b';?a[c]='c';?console.log(a[b]);

這題考察的是對象的鍵名的轉換。

• 對象的鍵名只能是字符串和 Symbol 類型。
• 其他類型的鍵名會被轉換成字符串類型。
• 對象轉字符串默認會調用 toString 方法。

?// example 1?var a={}, b='123', c=123;?a[b]='b';?// c 的鍵名會被轉換成字符串'123'，這里會把 b 覆蓋掉。?a[c]='c';?// 輸出 c?console.log(a[b]);?????// example 2?var a={}, b=Symbol('123'), c=Symbol('123');?// b 是 Symbol 類型，不需要轉換。?a[b]='b';?// c 是 Symbol 類型，不需要轉換。任何一個 Symbol 類型的值都是不相等的，所以不會覆蓋掉 b。?a[c]='c';?// 輸出 b?console.log(a[b]);?????// example 3?var a={}, b={key:'123'}, c={key:'456'};?// b 不是字符串也不是 Symbol 類型，需要轉換成字符串。?// 對象類型會調用 toString 方法轉換成字符串 [object Object]。?a[b]='b';?// c 不是字符串也不是 Symbol 類型，需要轉換成字符串。?// 對象類型會調用 toString 方法轉換成字符串 [object Object]。這里會把 b 覆蓋掉。?a[c]='c';?// 輸出 c?console.log(a[b]);

這里小編是一個有著5年工作經驗的前端工程師，關于web前端有許多的技術干貨，包括但不限于各大廠的最新面試題系列、游戲項目源碼、最新前端路線等。需要的伙伴可以私信我，

發送【前端資料】

就可以獲取領取地址，免費送給大家。對于學習web前端有任何問題(學習方法，學習效率，如何就業)都可以問我。希望你也能憑自己的努力，成為下一個優秀的程序員！

總結

以上是生活随笔為你收集整理的开发工程师面试自我介绍_30道经典面试题，靠它我在一线拿到了20k的前端开发工程师岗位...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。