web前端面試總結

 

最近在找高級web前端開發的工做，面試了好幾家公司。總結一下面試問題。

 

基礎技術問題

　　1.  React中定義組件的時候，在構造函數中，爲何須要使用super？

　　2. JS中基本數據類型和對象類型，內存分配有什麼不一樣？

　　3. Redux的reducer爲何要返回一個新對象？它的對象比較過程，在哪裏實現的？

　　4. Angular1.x 它的指令是什麼？實現一個指令有那幾個工做？

　　5. 講一下事件循環的過程。

　　6. XSS和CSRF攻擊。

　　7. 頁面性能優化方面的經驗。

　　8. 瀏覽器輸入url按下回車鍵，會發生什麼？

　　9. js做用域方面的知識點，能說多少說多少。

　　10. React高階組件的理解。

　　11. React 16有什麼新特性。fiber是什麼？user state 怎麼理解，做用是什麼？解決了一個什麼問題。

　　12. React 的diff算法的過程是什麼？

　　11. Vue和React 組件間通訊方式有哪些？

　　12. React能夠經過什麼方式達到Vue的slot功能？

　　13. Promise 是什麼？它內部怎麼實現的？

　　14. JS箭頭函數不能作什麼？

　　15.  如何作移動端適配？ px2rem是怎麼實現的？

　　16. Vue的數組操做，是怎麼實現雙向數據綁定的？原理是什麼？

　　17. WebSocket遇到過什麼坑？怎麼解決？

　　　　　　---- 服務端沒法監測出由於中間鏈路斷開致使都鏈接斷開，因此要採用ping pong機制來銷燬無用鏈接。

　　　　　　---- Web端選擇WebSocket鏈接時，爲了時間負載均衡，在前端隨機選擇一個鏈接地址，每一個websockets鏈接地址是隨機的。所以ws協議要在服務端支持跨域。

 

　　18. Webpack配置文件中的hash，chunkhash，contenthash 分別是什麼

　　19. 講一下React組件的生命週期。

　　20. 實現一個EventBus

　　21. 實現一個左中右三欄的頁面佈局，左右寬度固定，中間寬度隨瀏覽器變大而變大。

　　22. 實現一個footer佈局。若是content比較少，footer固定在頁面底部。若是content高度比較大，footer位於content最下方，隨頁面而滾動。

　　23. 會nodejs嗎？在哪些場景下會用到？

　　24. ES6相關知識知道哪些？Proxy知道嗎？WeakMap跟Map有什麼區別？何時能夠用到WeakMap？

　　25. DNS解析過程是怎麼樣的？

　　26. WebSocket是什麼？它跟HTTP有什麼不同？創建鏈接的過程是怎麼樣的？

　　27. React做用對VDOM的diff 計算以後，是怎麼渲染成真實DOM的？能不能減小DOM的重繪和重排

　　　　　　--- vdom是一個緩衝區，會攔截掉一些沒必要要對dom操做。可是diff以後，patch到dom樹上時，仍是使用屢次dom操做。

　　　　　　--- vdom有兩個做用，一個是dom到複用，避免dom的頻繁生成和銷燬。另外一個是diff算法可以比較出最小的dom操做數量。

 

 

　　28. 外聯的js件和css文件對DOM渲染會形成什麼影響。

　　29. 什麼是變量提高？什麼是函數提高？

　　　　　　--- 函數提高優先級高於變量提高。

　　　　　　--- 函數提高，就是代碼在編譯解釋但時候，會把函數定義提高到整個代碼片斷的最上方。

　　　　　　--- 變量提高，只會提高聲明，不會提高賦值操做。

　　30. 大家服務端爲何不用nodejs？nodejs跟java有區別是什麼？

　　　　　　--- nodejs 單線程，非組賽異步IO。 java 多線程 組賽同步。

　　　　　　--- nodejs 腳本語言，靈活，但很差維護。

　　31. HTTP header中跟緩存相關的有哪些字段，做用是什麼？

　　32. java中經常使用的線程池有哪些？

　　33. http2.0 的文件頭有哪些字段？

　　34. Angular1.x  Vue  React 有什麼不一樣點？分別適用什麼場景，若是作技術選型？

　　　　　　---  實現原理上各不相同。

　　　　　　---  組件化的支持程度上的差別。React 組件化支持程度更高。

　　　　　　--- HTML模版和JSX的使用差別。

　　　　　　--- 生態。ReactNative Weex

　　　　　　--- 雙向數據綁定和單向數據流，推崇的理念的差別。

　　　　　　React 比較適合多人配合開發的大型項目。可維護性更高。組件化程度更高，對TypeScript支持也更好。

　　　　　　

　　　　

　　35. webview中的頁面如何複用組件？

　　　　　　---  使用next.js框架，天生就支持多頁和服務端渲染，同時可以多頁中複用React組件。

　　36. 跨域通訊的知識點有哪些？

　　　　　　--- http response header 增長access control 字段

　　　　　　--- iframe proxy 。postMessage機制，

　　　　　　--- jsonp

　　　

　　　　　　

　　37. 講一講你github上的項目，都解決是什麼問題？

 

　　38. H5推廣頁面，遇到的坑？

　　　　　　--- H5推廣頁面遭遇羊毛黨薅羊毛的問題。採用網易滑動驗證碼。解決。

　　　　　　--- 業務上，經過轉帳記錄識別出羊毛黨，禁止體現。

                  --- 倒計時問題，手機鎖屏後setInterval中止。

 　 39. this指向什麼？

var o = {
	a:function(){
		[1,2,3].forEach(()=>{
			console.log(this)
		});
	}
}

var o = {
	a:function(){
		[1,2,3].forEach(function(){
			console.log(this)
		});
	}
}

　　40. 利用ES5作繼承的時候，function A(){}   function B(){}    B.prototype=new A();  到底作了一件什麼事？

 　  41. function foo(a,b){console.log(a,b)} ;  foo.bind({},1,2)(); 輸出什麼？bind函數的其餘參數

　　42. 箭頭函數的理解。

　　43. Promise對象的理解。 

      44.  Redux 三大原則。---  1. 單一數據源 2.狀態是隻讀的  3. 狀態修改由純函數完成。

　　45. Immutable.js  能夠優化React的性能，它是優化在哪一個階段？

　　46. for in 和for of的區別

　　47. a = ['a', 'b', 'c']   b = ['e', 'f', 'g']  合併兩個數組，不產生新數組。---- 利用push.apply實現

　　48. number轉成二進制。---- toString實現

　　49. Promise.all 有一個錯誤時候，結果是什麼？ --- 立刻報錯。

　　50. Function.prototype.foo = '111'; Object.prototype.foo = '222'; 這兩個屬性何時會生效。

　　51. VDOM 怎麼理解的？答案：1.多端渲染 2.便於維護

　　52. React/vue 在渲染列表時，使用key有什麼做用？

　　53. 瀏覽器中js文件執行順序。好比script標籤等。

　　54. 網易滑動驗證碼等原理是什麼？

　　55. ServiceWoker你用來作什麼？它是怎麼更新的。

　　           1. 作離線應用，斷網的狀況下，頁面仍然能打開，能夠繼續瀏覽本地的聊天記錄。

                 2. 它的更新主要是自動檢測到文件變化，觸發install事件。SkipWait

　　56. Web前端安全性的知識點。 CSRF, XSS 等

　　57. Immutable爲何能優化React性能？答案要點：對象子屬性會被複用。

　　58. webpack 使用過程當中遇到的問題。

   　　        1. webpack只能將全部代碼從入口文件開始，打包成若干個文件，沒法作到原目錄輸出。

　　59. redux 怎麼使用多個store。

　　　　　　答：1. react16  以前不行，只能使用combineReducer   

　　　　　　2. react16以後，可使用React.createContext建立多個context，每一個Provder中指定context和store，connect函數中也要指定context

 

 

 

編程題

　　　　1. 實現一個輪播圖（頭條二面）

　　　　2. 有序整數數組，找出兩個和等於88的整數

　　　　 3. 對字符串數組進行分組。例如arr = ["abc",'bca','jksd','bhbj'] 。 思路就是計算hash值

　　　　 4. 有一個字符串 str = "2[a]3[b]" ，寫一個函數，將其轉換成aabbb, 其餘用例：如：   2[3[a]4[b2[x]]]

 

 

 

業務理解問題

 

1.大家產品的Qps有多少，大家文件系統服務有多少G的數據。大家日活用戶是多少，註冊用戶是多少。

2.工做中遇到的最大的挑戰是什麼？

3. leader的理解。

4. 前端跟服務端的側重點是什麼

5. 如何經過工程化 去規範開發 。

6. 將來前端發展趨勢是怎麼理解的？

7. WebIM登陸過程是怎麼樣的，如何防止中間人攻擊。

8. 淘寶網爲何打開這麼快？它背後的技術有哪些有沒有思考過？

9. 文件模塊是怎麼設計的？有沒有參考業界主流的解決方案？爲何不參考？

10. 文件存儲爲何使用MongoDB GridFS？而不是使用其餘的分佈式文件系統的方案？

11. 爲何前端框架變化這麼快，有這麼多框架和技術。然而服務端java卻一直很穩，沒有出現這麼多框架呢

12. 推  拉  兩種模式適用的場景, 如何理解的。

13. 移動端app如何保活？

14. 若是發現一個接口壓力測試QPS上不去，可是服務器的CPU利用率卻很低。你怎麼排查這個問題？

　　   --- IO 的問題

15. 若是讓你設計一套通訊協議，你會考慮哪方面的問題？

　　   --- 性能，安全，可靠。

 

 

 

主動性相關的問題

　　1. 在以前作過的項目中，有沒有什麼功能或改進點是由你提出來的？

　　　　----- 利用阿里雲的函數計算功能做爲國內獲取服務器列表的 proxy

　　　　----- 利用阿里雲oss存儲靜態文件。

 

　　2. 當你以爲公司某個訪問量比較少的網站，頁面打不開了，你會怎麼作？

　　3. 有沒有關注過前端如今剛出現的一些新技術，有什麼見解。

　　

　　

 

管理方面的認知問題

　　1. 若是團隊成員目前的技術棧是React，有同事以爲vue比較好，想在項目中使用vue，你會怎麼作？

　　2. 新員工培養方面的經驗，以及如何團隊激勵怎麼作。

　　3. 當你不承認老闆的需求的時候，怎麼辦？

　　4. 怎麼理解Leader這個崗位？

　　　　　　--- 項目管理。對產品可以有足夠對認知，可以識別項目需求，以及能對產品做出將來規劃。 除完成需求外可以識別出項目長遠的技術規劃。

　　　　　　--- 進度管理。保障項目進度，合理安排員工工做，儘可能避免加班，減小非必要加班。

　　　　　　--- 工做分派。需求分解，難點識別。

　　　　　　--- 創建代碼規範和開發規範。經過技術手段和制度手段，創建開發規範和編碼規範 , 不定時對員工代碼進行review。

　　　　　　--- 加強團隊凝聚力。可以成爲團隊的主心骨。對不一樣部門的資源調度進行協調。

　　　　　　--- 激勵團隊。可以最大化對發揮每一個團隊成員對主動性，進而提升團隊工做激情和效率。

　

 

 

 

HR面問題

　　1. 幾家公司離職的緣由是什麼？

　　2. 幾家公司的薪資結構是怎麼樣的？指望薪資是多少？

　　3. 對咱們公司有什麼見解。

　　4. 對將來的發展規劃是怎麼樣的？

　　5. 更指望找一份什麼樣的工做？對於新工做更看重什麼？

　　6. 你有什麼問題想問個人嗎？