好程式設計師分享HTML5精品技術文章--前端崗位需求分析

　　 好程式設計師 分享 HTML5 精品技術文章 --前端崗位需求分析 ， 各位小夥伴大家好，根據多年豐富的面試經歷和崗位分析，對前端面試的技術棧，各大公司面試特點，進行簡要的分析 ，隨著我的秀髮越來越少可以說我們積累的經驗越來越多，在此給大家進行一個簡要的分享。

　　 先說前端必備的技能， html ， css ， JavaScript ， jQuery（原始碼部分） ， nodejs ， vue ， react ，設計模式， 這些技術棧還是要具備的，當然框架的話2選一即可。

　　 現在大公司的要求絕大多數以原生 JavaScript為根本，例如騰訊，阿里等網際網路頭部企業，在面試前端時對原生的要求非常之高，而且以騰訊為代表的一系列公司非常喜歡讓你在面試過程之中手寫程式碼，所以如果準備面試騰訊的小兄弟們，一定要提前做好準備。

　　 列舉我們最熟悉的騰訊吧，我們先看一下 q - q音樂前端工程師招聘的要求:

　　

·  　　 至少三年以上從事 JavaScript開發的經歷；

·  　　 紮實的 javascript 基礎知識；

·  　　 能夠熟練運用 HTML、CSS、JavaScript 開發高效能的web應用程式；

·  　　 熟悉 Web效能最佳化, 有效能最佳化實踐經驗；

·  　　 具有良好的程式碼風格、介面設計與程式架構意識；

·  　　 具有良好的溝通能力和團隊合作精神；

·  　　 思路清晰，優秀的分析問題和解決問題的能力；

·  　　 加分項 :計算機專業或軟體工程等相關專業；

·  　　 掌握伺服器端程式語言並有實踐經驗；

·  　　 持續堅持寫技術部落格 1年以上；

·  　　 對開源專案有貢獻；

·  　　 github個人原創專案有50個星以上；

·  　　 在著名業界技術大會有過分享

·  　　 良好的借力意識 (站在巨人的肩膀上)；

·  　　 良好的軟體工程意識；

·  　　 對技術有持續的熱忱和激情；

·  　　 熱愛音樂。

　　 我們可以根據需求分析出哪些東西那 ？

　　

　　 首先聊一下騰訊的背景， 騰訊前端是以原生 JavaScript為主，所以對JavaScript的要求一定會很高， 那麼這個高要求和高標準大概有多高那 ，面試官通常會以豐富的經驗給你各種各樣的組合拳， 這一套又一套的組合拳著實打的新手摸不著頭腦 ? 我們先來分析一套原生組合拳 :

　　

原生 javaScript組合拳  

　　

問 : 基本型別和引用型別的區別。

答 : 基本型別是儲存在棧之中的值，引用型別是儲存在堆中資料的地址。

　　

問 : 可以舉例說明一下JavaScript之中的引用型別有哪些麼？

答 :  Object ， function ， Array ， Set ， Map

　　

　　 當然了，面試 JavaScript 肯定離不開原型鏈和作用域鏈，那麼什麼是作用域鏈那 ?這個其實是說來話長的一個話題，因為在這裡給大家闡述下我個人的一些理解 :

　　  

　　 函式在執行的過程之中會產生一個臨時儲存資料的物件， 這個物件我們稱之為 activeObject， 簡稱AO ， 每個函式在執行時都會在棧裡面存上這麼一個東西，以便於儲存期中的區域性變數。但是js有全域性變數的概念，也就是在區域性中可以訪問全域性的資料，怎麼訪問那？ 當然是由內自外的冒泡訪問，但是如何由內自外，這個以包含關係決定訪問順序就是傳說中的作用域鏈。

　　 接著來說原型鏈， 這個是例項物件訪問方法和共用資料的一個順序，也是由內自外的。

　　 接著會順著繼續向下問一些關於閉包，記憶體洩漏的問題。

　　 閉包問題， 其實就是兩個函式巢狀，產生了兩個巢狀的活動物件，子活動物件儲存了父級活動物件的屬性，從而導致外部函式的區域性變數被子活動物件儲存的一種 JavaScript特性。

　　 用程式碼表示一下 :

　　

　　 function outer(){

　　   var freeVar = “hello”

　　 }

　　

　　 這是一個外部函式會產生一個 AO ， 這個AO是因為outer 函式執行而建立出來的，所以我們暫時命名為 AO(outer).

　　 閉包自然少不了函式的巢狀 ：

　　

　　 function outer(){

　　   var freeVar = “hello”;

　　   function inner(){

　　   console.log(freeVar);

　　   }

　　   return inner;

　　 }  

　　 但凡是在 AO(outer)內部建立的函式引用了外部的變數那麼妥了，閉包就產生了。

　　 收起你的黑人問號臉，來看一下我的解釋 :

　　 Inner函式執行時當然也會產生AO ，那麼這個AO我們取名叫做AO(inner), ok 在這個ao中我們幹了些啥? 是不是引用了外部函式的變數 freeVar ?

　　 對啊，肯定用了，但是你只是用了 freeVar 這麼簡單麼 ? no,no,no , 其實在內部函式之中我們引用的是 AO(outer).freeVar。

　　 好了我們這個時候來看一下， AO是個啥 ? 是個物件啊， 既然是物件那這貨是不是一個引用型別，引用型別存在於記憶體之中不? 存在，那麼恭喜你，這個AO.freeVar 不會想普通的區域性變數在函式結尾被刪除了， 而是被保留在了記憶體之中。 這，就是閉包。

　　 基本上這一套下來，你對 JavaScript的理解，對JavaScript原理和機制的理解面試官也就瞭解的比較透徹了 ， 接下來會考察一些知識的廣度，當然這些問題都是比較簡單隨意也是比較容易得到答案的，所以在後面的部分我就只列舉問題。

　　

　　 佈局和頁面效能 :

　　 這個就是考察基本功的時候了， 佈局可以說是一個前端最常用的技能，所以會根據各種需求提問 ,當然同樣重要的還有一些最佳化細節，比如:

　　 重繪和迴流分別都是什麼 ， 哪個效能消耗的多？ 應該如何去提高效能 ?

　　 各種居中。

　　 名稱空間和命名方式。

　　 移動端 rem佈局，百分比佈局，響應式佈局。

　　 HTML標籤的語義化

　　 JavaScript多執行緒。

　　 http請求最佳化

　　

　　 演算法設計模式

　　 基本排序演算法的理解，比如快排，冒泡等排序演算法總要知道一個吧 ， 這種東西提前準備總是沒壞處 。

　　 設計模式這種東西就是一個沒啥卵用的大框框， 但是有寫設計模式確實很有借鑑的意義，比如觀察者模式，策略模式，可以讓程式碼更加優 (zhuang)雅(bi)清晰。

　　 Ok ， 今天的面試分析暫時就進行到這裡，其實在面試過程中問到專案業務的情況也非常多見，因為前端面試的多樣性，每次大公司的面試其實都是對我們技術棧和學習能力的一次挑戰，在不斷的進步和學習之中，完善自我，持續進步，豐富自己的經驗，願世界和平，秀髮長存。