1. 程式人生 > >HTML5學習路線資料,HTML5前端面試的技術棧

HTML5學習路線資料,HTML5前端面試的技術棧

百分比 頁面 是個 能力 問號 喜歡 包含 激情 舉例

各位小夥伴大家好,現如今前端程序員編程可是相當的吃香。根據多年豐富的面試經歷和崗位分析,對前端面試的技術棧,各大公司面試特點,進行簡要的分析 ,隨著我的秀發越來越少可以說我們積累的經驗越來越多,在此給大家進行一個簡要的分享。

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

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

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

· 至少三年以上從事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 , 今天的面試分析暫時就進行到這裏,其實在面試過程中問到項目業務的情況也非常多見,因為前端面試的多樣性,每次大公司的面試其實都是對我們技術棧和學習能力的一次挑戰,在不斷的進步和學習之中,完善自我,持續進步,豐富自己的經驗,願世界和平,秀發長存。

HTML5學習路線資料,HTML5前端面試的技術棧