當前位置:首頁 » 網頁前端 » 阿里前端面試測評
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

阿里前端面試測評

發布時間: 2022-10-22 20:28:11

1. 前端面試一問三不知怎麼辦

前端面試一問三不知的時候,千萬別慌亂,可以先停一停和面試官說這個問題你需要思考一下再回答,或者說你因為太緊張之類的一時想不起來答案。


有些面試官會直接電話過去要求面試,由於面試者(尤其是學生)處於弱勢方,可能並不會拒絕面試要求,但並不意味著面試者處於最佳的物理和精神狀態下,有可能會導致面試者不能很好的發揮自己原有的實力。所以如果面試官突然打電話過來。

沒有準備好的話,不要怕冒犯面試官,一定要另外約個時間,面試官肯定會再打過來的。遭到否定面試官有可能會否定你描述的一些東西,有可能是你字眼寫的太過,比如將「熟悉」的東西寫成了「精通」,勾起了面試官的「好奇」。

有可能故意試壓,考驗你的反應,但遇到否定的時候,不要急於反駁或者是手足無措,而是詢問自省和主動討論。氣場不和有的面試官性格嚴謹沉悶,而面試者可能思維活躍,整個面試過程可能會變成面試官不停的打斷面試者讓其思維聚焦。

而面試者感到思維不停被打斷,很是氣惱,影響發揮。這種情況不可避免,但遇到這樣的面試官,請保持謙和的態度,重點是展示自己技術的廣度、深度,氣場不和並不會產生決定性的影響,面試官也不會因為這樣的原因而給與錯誤的評判。

盡量留下好的印象。結束通知有的面試官會在面試結束後說:「我的問題問完了,如果有進一步消息的話,我們會再聯系你」。面試的大部分結果,其實當場就出來了,如果你感覺給出結果的時間點不夠明確,可以反問他:「如果三天內沒有聯系,是不是就代表沒有通過?」省得讓你懷有不確切的希望。

最後,還可以挽留下面試官,講講這場面試中你的一些疑惑,獲得面試官的反饋,也可以知道自己目前哪一方面做得不足。面試中面對不會的問題面試中遇到問題不會回答,這是非常正常的,畢竟大家在學習過程中遇到的問題,跟我們在工作中遇到的問題是非常不一樣的。

除此之外,我們看問題的角度,也是有差別很大的。舉個例子,很多人都在看ReactFiber,但是如果問你們,為什麼要有Fiber這個東西,可能很多人都回答不上來,因為大家只在社區裡面看到說,Fiber是怎麼工作的啊。

但是為什麼要有Fiber?如果沒有會怎樣,而這種思考,其實是非常底層的。我相信,很多人可能都沒有思考過。那如果遇到的問題不會,你可以先選擇不會,說我覺得自己沒有信心能答出這個問題,當然我更希望聽到你說。

我現在不會,但是你給我兩分鍾思考一下,我想一下這個問題有沒有答案?我覺得這是一個很好的思考習慣,首先你在面對不會的東西是坦然的,我當下不會,很正常,我之前沒有思考過這個問題嘛,那我們再花兩分鍾思考一下。

給一個初步的答案。所以說遇到問題,也不用不會就不會,也可以有一個積極的方式回應。從面試官的角度來說,面試中考察的題目,並不是僅僅考察這道題目本身,題目的對錯並不跟最終結果直接掛鉤。面試官更希望以題目為契機。

考察面試者分析問題,解決問題的能力,以及交流過程中所體現的邏輯推理和思維方式等。跟面試官聊業務業務跟項目是完全不一樣的東西,業務認知和思考也是很重要的一個考察點,這方面面試官可能會問兩個點:業務場景和技術突破。

業務場景:面試官會詢問面試者他們的產品、業務模式、商業模式等,了解下面試者對於產品的誕生、定位、發展的認知。技術突破:技術與業務相結合這點在阿里也是一直在說但鮮有人做的非常好的地方,所以有的時候也會考察面試者。

看看他們所做的技術是如何從業務出發、給業務帶來了哪些改變以及如何去評估兩者之間產生的結果。面試結束反向互動面試官在掛斷之前,基本會給與候選人反問的機會,一般會表述為「你有什麼要問我的嗎」?無論面試的怎樣。

都希望你能說出心中的疑惑,比如面試中的某個題目、整體的評價反饋、你的建議或者了解所負責的業務,所在的團隊等等,而從面試官的角度來看,如果候選人願意反問你問題,至少能證明他是個好學的人。所以不要放棄這個互動的機會。

面試反饋每場面試結束後,面試官都會在系統里留下面試反饋,如果面試失敗,簡歷會放在人才庫里,很多人會在其中撈取簡歷,以後的面試官也可以看到之前所有的面試記錄,之所以講到這一點,是希望大家在面試中能夠保持謙和積極的心態。

認真面對每一場面試,即使這場面試沒有成功,但如果展示了好的品質,也會增加被發掘的機會,為你以後面試成功鋪路。保持聯絡如果跟面試官聊的比較好,可以請求加個微信之類的,面試是一個長期的事情,哪怕此次面試沒有通過。

以後還可能面試進來的,與面試官保持聯絡。前端面試題筆記面試會了,面試題也不能落下,這套面試筆記除了有CSS、JS、Vue、React、性能優化、伺服器埠、設計模式、數據結構和演算法面試題外,加了手寫代碼面試題。

這下面試官讓我們寫代碼也不怕啦!CSS問題flex布局css3的新特性img中alt和title的區別用純CSS創建一個三角形如何理解CSS的盒子模型?如何讓一個div水平居中如何讓一個div水平垂直居中如何清除浮動。

2. 阿里巴巴的素質測評測的是什麼

阿里巴巴的素質測評測通過量表、面試、評價中心技術、觀察評定、業績考核等多種手段綜合測評人才素質的一種活動。

素質是測評的基本對象,測評即測量和評定,測量是測評主體運用多種測量技術和統計方法對測評者的功能或行為進行量化描述的過程。

素質測評雖然離不開測量與評定,但並不是測量與評定的機械相加,而是一種建立在對個體特徵信息「測」與「量」基礎上的分析判斷。

組織架構

2012年7月23日,阿里巴巴集團對業務架構和組織進行調整,從子公司制調整為事業群制,成立淘寶、一淘、天貓、聚劃算、阿里國際業務、阿里小企業業務和阿里雲共七個事業群。

2013年1月10日,阿里巴巴集團對業務架構和組織將進行調整,成立25個事業部,具體事業部的業務發展將由各事業部總裁(總經理)負責。新體系由戰略決策委員會(由董事局負責)和戰略管理執行委員會(由CEO負責)構成。

3. Web前端崗位面試題有哪些

前端面試題匯總,基本上會有四大類問題,具體如下:
一、HTML

1、Doctype作用?嚴格模式與混雜模式如何區分?它們有何意義?

2、HTML5 為什麼只需要寫 <!DOCTYPE HTML>?
3、行內元素有哪些?塊級元素有哪些? 空(void)元素有那些?
4、頁面導入樣式時,使用link和@import有什麼區別?
5、介紹一下你對瀏覽器內核的理解?
6、常見的瀏覽器內核有哪些?
7、html5有哪些新特性、移除了那些元素?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分 HTML 和 HTML5?
8、簡述一下你對HTML語義化的理解?
9、HTML5的離線儲存怎麼使用,工作原理能不能解釋一下?
10、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢?
11、請描述一下 cookies,sessionStorage 和 localStorage 的區別?
12、iframe有那些缺點?
13、Label的作用是什麼?是怎麼用的?(加 for 或 包裹)
14、HTML5的form如何關閉自動完成功能?
15、如何實現瀏覽器內多個標簽頁之間的通信? (阿里)
16、webSocket如何兼容低瀏覽器?(阿里)
17、頁面可見性(Page Visibility)API 可以有哪些用途?
18、如何在頁面上實現一個圓形的可點擊區域?
19、實現不使用 border 畫出1px高的線,在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。
20、網頁驗證碼是幹嘛的,是為了解決什麼安全問題?
21、tite與h1的區別、b與strong的區別、i與em的區別?

二、css

1、介紹一下標準的CSS的盒子模型?與低版本IE的盒子模型有什麼不同的?

2、CSS選擇符有哪些?哪些屬性可以繼承?
3、CSS優先順序演算法如何計算?
4、CSS3新增偽類有那些?
5、如何居中div?如何居中一個浮動元素?如何讓絕對定位的div居中?
6、display有哪些值?說明他們的作用。
7、position的值relative和absolute定位原點是?
8、CSS3有哪些新特性?
9、請解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場景?
10、用純CSS創建一個三角形的原理是什麼?

11、一個滿屏 品 字布局 如何設計?

三、常見兼容性問題?


  1. 1、li與li之間有看不見的空白間隔是什麼原因引起的?有什麼解決辦法?
    2、經常遇到的瀏覽器的兼容性有哪些?原因,解決方法是什麼,常用hack的技巧 ?
    3、為什麼要初始化CSS樣式。
    4、absolute的containing block計算方式跟正常流有什麼不同?
    5、CSS里的visibility屬性有個collapse屬性值是幹嘛用的?在不同瀏覽器下以後什麼區別?
    6、position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣?
    7、對BFC規范(塊級格式化上下文:block formatting context)的理解?
    8、CSS權重優先順序是如何計算的?
    9、請解釋一下為什麼會出現浮動和什麼時候需要清除浮動?清除浮動的方式
    10、移動端的布局用過媒體查詢嗎?
    11、使用 CSS 預處理器嗎?喜歡那個?
    12、CSS優化、提高性能的方法有哪些?
    13、瀏覽器是怎樣解析CSS選擇器的?
    14、在網頁中的應該使用奇數還是偶數的字體?為什麼呢?
    15、margin和padding分別適合什麼場景使用?
    16、抽離樣式模塊怎麼寫,說出思路,有無實踐經驗?[阿里航旅的面試題]
    17、元素豎向的百分比設定是相對於容器的高度嗎?
    18、全屏滾動的原理是什麼?用到了CSS的那些屬性?
    19、什麼是響應式設計?響應式設計的基本原理是什麼?如何兼容低版本的IE?
    20、視差滾動效果,如何給每頁做不同的動畫?(回到頂部,向下滑動要再次出現,和只出現一次分別怎麼做?)
    21、::before 和 :after中雙冒號和單冒號 有什麼區別?解釋一下這2個偽元素的作用。
    22、如何修改chrome記住密碼後自動填充表單的黃色背景 ?
    23、你對line-height是如何理解的?
    24、設置元素浮動後,該元素的display值是多少?(自動變成display:block)
    25、怎麼讓Chrome支持小於12px 的文字?
    26、讓頁面里的字體變清晰,變細用CSS怎麼做?(-webkit-font-smoothing: antialiased;)
    27、font-style屬性可以讓它賦值為「oblique」 oblique是什麼意思?
    28、position:fixed;在android下無效怎麼處理?
    29、如果需要手動寫動畫,你認為最小時間間隔是多久,為什麼?(阿里)
    30、display:inline-block 什麼時候會顯示間隙?(攜程)
    31、overflow: scroll時不能平滑滾動的問題怎麼處理?
    32、有一個高度自適應的div,裡面有兩個div,一個高度100px,希望另一個填滿剩下的高度。
    33、png、jpg、gif 這些圖片格式解釋一下,分別什麼時候用。有沒有了解過webp?
    34、什麼是Cookie 隔離?(或者說:請求資源的時候不要讓它帶cookie怎麼做)
    35、style標簽寫在body後與body前有什麼區別?

    四、JavaScript

    1、介紹JavaScript的基本數據類型。
    2、說說寫JavaScript的基本規范?
    3、JavaScript原型,原型鏈 ? 有什麼特點?
    4、JavaScript有幾種類型的值?(堆:原始數據類型和 棧:引用數據類型),你能畫一下他們的內存圖嗎?
    5、Javascript如何實現繼承?
    6、Javascript創建對象的幾種方式?
    7、Javascript作用鏈域?
    8、談談This對象的理解。
    9、eval是做什麼的?
    10、什麼是window對象? 什麼是document對象?
    11、null,undefined的區別?
    12、寫一個通用的事件偵聽器函數(機試題)。
    13、[「1」, 「2」, 「3」].map(parseInt) 答案是多少?
    14、關於事件,IE與火狐的事件機制有什麼區別? 如何阻止冒泡?
    15、什麼是閉包(closure),為什麼要用它?
    16、javascript 代碼中的」use strict」;是什麼意思 ? 使用它區別是什麼?
    17、如何判斷一個對象是否屬於某個類?
    18、new操作符具體幹了什麼呢?
    19、用原生JavaScript的實現過什麼功能嗎?
    20、Javascript中,有一個函數,執行時對象查找時,永遠不會去查找原型,這個函數是?
    21、對JSON的了解?
    22、[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解釋一下這段代碼的意思嗎?
    23、js延遲載入的方式有哪些?
    24、Ajax 是什麼? 如何創建一個Ajax?
    25、同步和非同步的區別?
    26、如何解決跨域問題?
    27、頁面編碼和被請求的資源編碼如果不一致如何處理?
    28、模塊化開發怎麼做?
    29、AMD(Moles/Asynchronous-Definition)、CMD(Common Mole

    Definition)規范區別?
    30、requireJS的核心原理是什麼?(如何動態載入的?如何避免多次載入的?如何 緩存的?)
    31、讓你自己設計實現一個requireJS,你會怎麼做?
    32、談一談你對ECMAScript6的了解?
    33、ECMAScript6 怎麼寫class么,為什麼會出現class這種東西?
    34、非同步載入的方式有哪些?
    35、documen.write和 innerHTML的區別?
    36、DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?
    37、.call() 和 .apply() 的含義和區別?
    38、數組和對象有哪些原生方法,列舉一下?
    39、JS 怎麼實現一個類。怎麼實例化這個類
    40、JavaScript中的作用域與變數聲明提升?
    41、如何編寫高性能的Javascript?
    42、那些操作會造成內存泄漏?
    43、JQuery的源碼看過嗎?能不能簡單概況一下它的實現原理?
    44、jQuery.fn的init方法返回的this指的是什麼對象?為什麼要返回this?
    45、jquery中如何將數組轉化為json字元串,然後再轉化回來?
    46、jQuery 的屬性拷貝(extend)的實現原理是什麼,如何實現深拷貝?
    47、jquery.extend 與 jquery.fn.extend的區別?
    48、jQuery 的隊列是如何實現的?隊列可以用在哪些地方?
    49、談一下Jquery中的bind(),live(),delegate(),on()的區別?
    50、JQuery一個對象可以同時綁定多個事件,這是如何實現的?
    51、是否知道自定義事件。jQuery里的fire函數是什麼意思,什麼時候用?
    52、jQuery 是通過哪個方法和 Sizzle 選擇器結合的?(jQuery.fn.find()進入Sizzle)
    53、針對 jQuery性能的優化方法?
    54、Jquery與jQuery UI有啥區別?
    55、JQuery的源碼看過嗎?能不能簡單說一下它的實現原理?
    56、jquery 中如何將數組轉化為json字元串,然後再轉化回來?
    57、jQuery和Zepto的區別?各自的使用場景?
    58、針對 jQuery 的優化方法?
    59、Zepto的點透問題如何解決?
    60、jQueryUI如何自定義組件?
    61、需求:實現一個頁面操作不會整頁刷新的網站,並且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案?
    62、如何判斷當前腳本運行在瀏覽器還是node環境中?(阿里)
    63、移動端最小觸控區域是多大?
    64、jQuery 的 slideUp動畫 ,如果目標元素是被外部事件驅動, 當滑鼠快速地連續觸發外部元素事件, 動畫會滯後的反復執行,該如何處理呢?
    65、把 Script 標簽 放在頁面的最底部的body封閉之前 和封閉之後有什麼區別?瀏覽器會如何解析它們?
    66、移動端的點擊事件的有延遲,時間是多久,為什麼會有? 怎麼解決這個延時?(click 有 300ms 延遲,為了實現safari的雙擊事件的設計,瀏覽器要知道你是不是要雙擊操作。)
    67、知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能講出他們各自的優點和缺點么?
    68、Underscore 對哪些 JS 原生對象進行了擴展以及提供了哪些好用的函數方法?
    69、解釋JavaScript中的作用域與變數聲明提升?
    70、那些操作會造成內存泄漏?
    71、JQuery一個對象可以同時綁定多個事件,這是如何實現的?
    72、Node.js的適用場景?
    (如果會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
    73、解釋一下 Backbone 的 MVC 實現方式?
    74、什麼是「前端路由」?什麼時候適合使用「前端路由」? 「前端路由」有哪些優點和缺點?
    75、知道什麼是webkit么? 知道怎麼用瀏覽器的各種工具來調試和debug代碼么?
    76、如何測試前端代碼么? 知道BDD, TDD, Unit Test么? 知道怎麼測試你的前端工程么(mocha, sinon, jasmin, qUnit..)?
    77、前端templating(Mustache, underscore, handlebars)是幹嘛的, 怎麼用?
    78、簡述一下 Handlebars 的基本用法?
    79、簡述一下 Handlerbars 的對模板的基本處理流程, 如何編譯的?如何緩存的?
    80、用js實現千位分隔符?(來源:前端農民工,提示:正則+replace)
    檢測瀏覽器版本版本有哪些方式?
    81、我們給一個dom同時綁定兩個點擊事件,一個用捕獲,一個用冒泡,你來說下會執行幾次事件,然後會先執行冒泡還是捕獲

4. 前端開發工程師面試題目大全

HTML

Doctype作用?嚴格模式與混雜模式如何區分?它們有何意義?


HTML5為什麼只需要寫?


行內元素有哪些?塊級元素有哪些?空(void)元素有那些?


頁面導入樣式時,使用link和@import有什麼區別?


介紹一下你對瀏覽器內核的理解?


常見的瀏覽器內核有哪些?


html5有哪些新特性、移除了那些元素?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分HTML和HTML5?


簡述一下你對HTML語義化的理解?


HTML5的離線儲存怎麼使用,工作原理能不能解釋一下?


瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢?


請描述一下cookies,sessionStorage和localStorage的區別?


iframe有那些缺點?


Label的作用是什麼?是怎麼用的?(加for或包裹)


HTML5的form如何關閉自動完成功能?


如何實現瀏覽器內多個標簽頁之間的通信?(阿里)


webSocket如何兼容低瀏覽器?(阿里)


頁面可見性(PageVisibilityAPI)可以有哪些用途?


如何在頁面上實現一個圓形的可點擊區域?


實現不使用border畫出1px高的線,在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。


網頁驗證碼是幹嘛的,是為了解決什麼安全問題?


title與h1的區別、b與strong的區別、i與em的區別?


CSS


介紹一下標準的CSS的盒子模型?低版本IE的盒子模型有什麼不同的?


CSS選擇符有哪些?哪些屬性可以繼承?


CSS優先順序演算法如何計算?


CSS3新增偽類有那些?


如何居中div?如何居中一個浮動元素?如何讓絕對定位的div居中?


display有哪些值?說明他們的作用。


position的值relative和absolute定位原點是?


CSS3有哪些新特性?


請解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場景?


用純CSS創建一個三角形的原理是什麼?


css多列等高如何實現?


一個滿屏品字布局如何設計?


經常遇到的瀏覽器的兼容性有哪些?原因,解決方法是什麼,常用hack的技巧?


li與li之間有看不見的空白間隔是什麼原因引起的?有什麼解決辦法?


為什麼要初始化CSS樣式?


absolute的containingblock計算方式跟正常流有什麼不同?


CSS里的visibility屬性有個collapse屬性值是幹嘛用的?在不同瀏覽器下以後什麼區別?


position跟display、margincollapse、overflow、float這些特性相互疊加後會怎麼樣?


對BFC規范(塊級格式化上下文:blockformattingcontext)的理解?


CSS權重優先順序是如何計算的?


請解釋一下為什麼需要清除浮動?清除浮動的方式


zoom:1的清楚浮動原理?


移動端的布局用過媒體查詢嗎?


使用CSS預處理器嗎?喜歡那個?


CSS優化、提高性能的方法有哪些?


瀏覽器是怎樣解析CSS選擇器的?


在網頁中的應該使用奇數還是偶數的字體?為什麼呢?


margin和padding分別適合什麼場景使用?


抽離樣式模塊怎麼寫,說出思路,有無實踐經驗?[阿里航旅的面試題]


元素豎向的百分比設定是相對於容器的高度嗎?


全屏滾動的原理是什麼?用到了CSS的那些屬性?


什麼是響應式設計?響應式設計的基本原理是什麼?如何兼容低版本的IE?


視差滾動效果,如何給每頁做不同的動畫?(回到頂部,向下滑動要再次出現,和只出現一次分別怎麼做?)


::before和:after中雙冒號和單冒號有什麼區別?解釋一下這2個偽元素的作用。


如何修改chrome記住密碼後自動填充表單的黃色背景?


你對line-height是如何理解的?


設置元素浮動後,該元素的display值是多少?(自動變成display:block)


怎麼讓Chrome支持小於12px的文字?


讓頁面里的字體變清晰,變細用CSS怎麼做?(-webkit-font-smoothing:antialiased;)


font-style屬性可以讓它賦值為「oblique」oblique是什麼意思?


position:fixed;在android下無效怎麼處理?


如果需要手動寫動畫,你認為最小時間間隔是多久,為什麼?(阿里)


display:inline-block什麼時候會顯示間隙?(攜程)


overflow:scroll時不能平滑滾動的問題怎麼處理?


有一個高度自適應的div,裡面有兩個div,一個高度100px,希望另一個填滿剩下的高度。


png、jpg、gif這些圖片格式解釋一下,分別什麼時候用。有沒有了解過webp?


什麼是Cookie隔離?(或者說:請求資源的時候不要讓它帶cookie怎麼做)


style標簽寫在body後與body前有什麼區別?


什麼是CSS預處理器/後處理器?


JavaScript


介紹JavaScript的基本數據類型。


說說寫JavaScript的基本規范?


JavaScript原型,原型鏈?有什麼特點?


JavaScript有幾種類型的值?(堆:原始數據類型和棧:引用數據類型),你能畫一下他們的內存圖嗎?


Javascript如何實現繼承?


Javascript創建對象的幾種方式?


Javascript作用鏈域?


談談this對象的理解。


eval是做什麼的?


什麼是window對象?什麼是document對象?


null,undefined的區別?


寫一個通用的事件偵聽器函數(機試題)。


["1","2","3"].map(parseInt)答案是多少?


關於事件,IE與火狐的事件機制有什麼區別?如何阻止冒泡?


什麼是閉包(closure),為什麼要用它?


javascript代碼中的"usestrict";是什麼意思?使用它區別是什麼?


如何判斷一個對象是否屬於某個類?


new操作符具體幹了什麼呢?


用原生JavaScript的實現過什麼功能嗎?


Javascript中,有一個函數,執行時對象查找時,永遠不會去查找原型,這個函數是?


對JSON的了解?


[].forEach.call($$("*"),function(a){a.style.outline="1pxsolid#"+(~~(Math.random()*(1<<24))).toString(16)})能解釋一下這段代碼的意思嗎?


js延遲載入的方式有哪些?


Ajax是什麼?如何創建一個Ajax?


同步和非同步的區別?


如何解決跨域問題?


頁面編碼和被請求的資源編碼如果不一致如何處理?


模塊化開發怎麼做?


AMD(Moles/Asynchronous-Definition)、CMD(CommonMoleDefinition)規范區別?


requireJS的核心原理是什麼?(如何動態載入的?如何避免多次載入的?如何緩存的?)


JS模塊載入器的輪子怎麼造,也就是如何實現一個模塊載入器?


談一談你對ECMAScript6的了解?


ECMAScript6怎麼寫class,為什麼會出現class這種東西?


非同步載入的方式有哪些?


documen.write和innerHTML的區別?


DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?


.call()和.apply()的作用和區別?


數組和對象有哪些原生方法,列舉一下?


JS怎麼實現一個類。怎麼實例化這個類


JavaScript中的作用域與變數聲明提升?


如何編寫高性能的Javascript?


那些操作會造成內存泄漏?


JQuery的源碼看過嗎?能不能簡單概況一下它的實現原理?


jQuery.fn的init方法返回的this指的是什麼對象?為什麼要返回this?


jquery中如何將數組轉化為json字元串,然後再轉化回來?


jQuery的屬性拷貝(extend)的實現原理是什麼,如何實現深拷貝?


jquery.extend與jquery.fn.extend的區別?


jQuery的隊列是如何實現的?隊列可以用在哪些地方?


談一下Jquery中的bind(),live(),delegate(),on()的區別?


JQuery一個對象可以同時綁定多個事件,這是如何實現的?


是否知道自定義事件。jQuery里的fire函數是什麼意思,什麼時候用?


jQuery是通過哪個方法和Sizzle選擇器結合的?(jQuery.fn.find()進入Sizzle)


針對jQuery性能的優化方法?


Jquery與jQueryUI有啥區別?


JQuery的源碼看過嗎?能不能簡單說一下它的實現原理?


jquery中如何將數組轉化為json字元串,然後再轉化回來?


jQuery和Zepto的區別?各自的使用場景?


針對jQuery的優化方法?


Zepto的點透問題如何解決?


jQueryUI如何自定義組件?


需求:實現一個頁面操作不會整頁刷新的網站,並且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案?


如何判斷當前腳本運行在瀏覽器還是node環境中?(阿里)


移動端最小觸控區域是多大?


jQuery的slideUp動畫,如果目標元素是被外部事件驅動,當滑鼠快速地連續觸發外部元素事件,動畫會滯後的反復執行,該如何處理呢?


把Script標簽放在頁面的最底部的body封閉之前和封閉之後有什麼區別?瀏覽器會如何解析它們?


移動端的點擊事件的有延遲,時間是多久,為什麼會有?怎麼解決這個延時?(click有300ms延遲,為了實現safari的雙擊事件的設計,瀏覽器要知道你是不是要雙擊操作。)


知道各種JS框架(Angular,Backbone,Ember,React,Meteor,Knockout...)么?能講出他們各自的優點和缺點么?


Underscore對哪些JS原生對象進行了擴展以及提供了哪些好用的函數方法?


解釋JavaScript中的作用域與變數聲明提升?


那些操作會造成內存泄漏?


JQuery一個對象可以同時綁定多個事件,這是如何實現的?


Node.js的適用場景?


(如果會用node)知道route,middleware,cluster,nodemon,pm2,server-siderendering么?


解釋一下Backbone的MVC實現方式?


什麼是「前端路由」?什麼時候適合使用「前端路由」?「前端路由」有哪些優點和缺點?


知道什麼是webkit么?知道怎麼用瀏覽器的各種工具來調試和debug代碼么?


如何測試前端代碼么?知道BDD,TDD,UnitTest么?知道怎麼測試你的前端工程么(mocha,sinon,jasmin,qUnit..)?


前端templating(Mustache,underscore,handlebars)是幹嘛的,怎麼用?


簡述一下Handlebars的基本用法?


簡述一下Handlerbars的對模板的基本處理流程,如何編譯的?如何緩存的?


用js實現千位分隔符?(提示:正則+replace)


檢測瀏覽器版本版本有哪些方式?


WhatisaPolyfill?


做的項目中,有沒有用過或自己實現一些polyfill方案(兼容性處理方案)?


我們給一個dom同時綁定兩個點擊事件,一個用捕獲,一個用冒泡。會執行幾次事件,會先執行冒泡還是捕獲?


使用JS實現獲取文件擴展名?


答案自己先慢慢找哈。

5. 阿里巴巴的招聘流程,技術崗位一般幾輪面試

阿里巴巴招聘技術崗位的流程:

依次進行三輪面試:初面、復面、以及hr面。

每通過一輪即可進入下一輪,三輪全過即為通過。

(5)阿里前端面試測評擴展閱讀

面試技巧

招聘中的「經典七問」

招聘過程中常要問到的問題極其釋義總結如下:

以往工作中您的職責是什麼?――如果描述不清,可見即使有相關工作經驗,其系統性全面性也值得懷疑。

請講一下您以往的工作經歷。――考察應聘者的語言組織及表達能力,以及描述的條理化。

您以往的工作經歷中最得意最成功的一件事是什麼?您的長處是什麼?――從應聘者的回答中,可了解他是注重個人成功還是注重團隊協作。

您感覺還有哪方面的知識、技能或能力需要提升?――「提升」一詞比較委婉,一方面考察其態度是否坦誠,另一方面,也為日後的員工培訓增強針對性。

對於新的工作崗位您有什麼設想?如何開展工作?――這涉及到員工的職業生涯設計,更有關員工工作的穩定性。

您離職的原因是什麼?――這是必須要問的問題,涉及員工和組織的融合性。

您對薪金待遇和福利有什麼要求?――這個問題的重要性更是不必多言。

6. 前端面試一問三不知怎麼辦

前端面試一問三不知的時候,千萬別慌亂,可以先停一停和面試官說這個問題你需要思考一下再回答,或者說你因為太緊張之類的一時想不起來答案。


有些面試官會直接電話過去要求面試,由於面試者(尤其是學生)處於弱勢方,可能並不會拒絕面試要求,但並不意味著面試者處於最佳的物理和精神狀態下,有可能會導致面試者不能很好的發揮自己原有的實力。所以如果面試官突然打電話過來。

沒有準備好的話,不要怕冒犯面試官,一定要另外約個時間,面試官肯定會再打過來的。遭到否定面試官有可能會否定你描述的一些東西,有可能是你字眼寫的太過,比如將「熟悉」的東西寫成了「精通」,勾起了面試官的「好奇」。

有可能故意試壓,考驗你的反應,但遇到否定的時候,不要急於反駁或者是手足無措,而是詢問自省和主動討論。氣場不和有的面試官性格嚴謹沉悶,而面試者可能思維活躍,整個面試過程可能會變成面試官不停的打斷面試者讓其思維聚焦。

而面試者感到思維不停被打斷,很是氣惱,影響發揮。這種情況不可避免,但遇到這樣的面試官,請保持謙和的態度,重點是展示自己技術的廣度、深度,氣場不和並不會產生決定性的影響,面試官也不會因為這樣的原因而給與錯誤的評判。

盡量留下好的印象。結束通知有的面試官會在面試結束後說:「我的問題問完了,如果有進一步消息的話,我們會再聯系你」。面試的大部分結果,其實當場就出來了,如果你感覺給出結果的時間點不夠明確,可以反問他:「如果三天內沒有聯系,是不是就代表沒有通過?」省得讓你懷有不確切的希望。

最後,還可以挽留下面試官,講講這場面試中你的一些疑惑,獲得面試官的反饋,也可以知道自己目前哪一方面做得不足。面試中面對不會的問題面試中遇到問題不會回答,這是非常正常的,畢竟大家在學習過程中遇到的問題,跟我們在工作中遇到的問題是非常不一樣的。

除此之外,我們看問題的角度,也是有差別很大的。舉個例子,很多人都在看ReactFiber,但是如果問你們,為什麼要有Fiber這個東西,可能很多人都回答不上來,因為大家只在社區裡面看到說,Fiber是怎麼工作的啊。

但是為什麼要有Fiber?如果沒有會怎樣,而這種思考,其實是非常底層的。我相信,很多人可能都沒有思考過。那如果遇到的問題不會,你可以先選擇不會,說我覺得自己沒有信心能答出這個問題,當然我更希望聽到你說。

我現在不會,但是你給我兩分鍾思考一下,我想一下這個問題有沒有答案?我覺得這是一個很好的思考習慣,首先你在面對不會的東西是坦然的,我當下不會,很正常,我之前沒有思考過這個問題嘛,那我們再花兩分鍾思考一下。

給一個初步的答案。所以說遇到問題,也不用不會就不會,也可以有一個積極的方式回應。從面試官的角度來說,面試中考察的題目,並不是僅僅考察這道題目本身,題目的對錯並不跟最終結果直接掛鉤。面試官更希望以題目為契機。

考察面試者分析問題,解決問題的能力,以及交流過程中所體現的邏輯推理和思維方式等。跟面試官聊業務業務跟項目是完全不一樣的東西,業務認知和思考也是很重要的一個考察點,這方面面試官可能會問兩個點:業務場景和技術突破。

業務場景:面試官會詢問面試者他們的產品、業務模式、商業模式等,了解下面試者對於產品的誕生、定位、發展的認知。技術突破:技術與業務相結合這點在阿里也是一直在說但鮮有人做的非常好的地方,所以有的時候也會考察面試者。

看看他們所做的技術是如何從業務出發、給業務帶來了哪些改變以及如何去評估兩者之間產生的結果。面試結束反向互動面試官在掛斷之前,基本會給與候選人反問的機會,一般會表述為「你有什麼要問我的嗎」?無論面試的怎樣。

都希望你能說出心中的疑惑,比如面試中的某個題目、整體的評價反饋、你的建議或者了解所負責的業務,所在的團隊等等,而從面試官的角度來看,如果候選人願意反問你問題,至少能證明他是個好學的人。所以不要放棄這個互動的機會。

面試反饋每場面試結束後,面試官都會在系統里留下面試反饋,如果面試失敗,簡歷會放在人才庫里,很多人會在其中撈取簡歷,以後的面試官也可以看到之前所有的面試記錄,之所以講到這一點,是希望大家在面試中能夠保持謙和積極的心態。

認真面對每一場面試,即使這場面試沒有成功,但如果展示了好的品質,也會增加被發掘的機會,為你以後面試成功鋪路。保持聯絡如果跟面試官聊的比較好,可以請求加個微信之類的,面試是一個長期的事情,哪怕此次面試沒有通過。

以後還可能面試進來的,與面試官保持聯絡。前端面試題筆記面試會了,面試題也不能落下,這套面試筆記除了有CSS、JS、Vue、React、性能優化、伺服器埠、設計模式、數據結構和演算法面試題外,加了手寫代碼面試題。

這下面試官讓我們寫代碼也不怕啦!CSS問題flex布局css3的新特性img中alt和title的區別用純CSS創建一個三角形如何理解CSS的盒子模型?如何讓一個div水平居中如何讓一個div水平垂直居中如何清除浮動。

7. 2019阿里前端面試題

干開發也有不少年頭了,其實每個開發人員應該都有總結和寫技術點的習慣,俗言說得好「好記性不如一個爛筆頭」。 

我是一枚女程序猿,很少發文章,並且我深知這是不對的,不管好與壞分享出來大家一起討論,總會把不好的變成好的,窄路變成寬路。哎,可能個人使然,但是發表出來的還是很少,都是在自己的工作筆記里每次記錄著技術心得和一些總結。總覺得發表出來萬一不好,被人取笑了怎麼辦。總之是一個愛多想的女程序員。

最近我以前一個同事在找工作,她面試了阿里,然後跟我聊了聊,說讓我多發表自己的文章,建立自己的社區,最好再多參與一些開源項目或者在git上多建一些自己的項目。這話我以前也聽過,但是就是執行上不徹底啊。

這不,我現在必須把自己以前寫好的或者接下來的每一點技術總結也好 經驗總結也好,都想寫出來,就當不為別人看,為自己也行!

話不多說了,她給我發了一道她面試阿里的題。我自己做了做。這是我目前想到的思路和寫法。歡迎有更好更優的方案發出來。我也可以學習。謝謝~

題目:

篩選筆試題 (請在半小時內完成):

var arr = [

   {name:'小米1', value: 1,  type: 2, date: '2018-06-07T08:00:01.589Z' },

   {name:'錘子T1', value: 1, type: 2, date: '2018-06-07T08:10:01.589Z' },

   {name:'小米2', value: 1, type: 4, date: '2018-06-07T20:00:01.589Z' },

   {name:'小米2', value: 4, type: 4, date: '2018-06-07T20:10:21.189Z' },

   {name:'小米4', value: 1, type: 4, date: '2018-06-07T08:00:01.560Z' },

   {name:'小米4', value: 2, type: 4, date: '2018-06-07T08:10:31.584Z' },

   {name:'小米6', value: 1, type: 3, date: '2018-06-07T08:00:01.589Z' },

   {name:'小米5s',value: 1, type: 4, date: '2018-06-07T08:00:01.589Z' },

   {name:'錘子T2', value: 1, type: 4, date: '2018-06-07T08:00:01.589Z' },

   {name:'錘子T1', value: 4, type: 4, date: '2018-06-07T08:06:01.589Z' },

   {name:'魅藍note5', value: 1, type: 4, date: '2018-06-07T08:00:01.589Z' },

   {name:'魅藍note2', value: 5, type: 4, date: '2018-06-02T08:07:01.589Z' },

   {name:'魅藍note2', value: 6, type: 4, date: '2018-06-07T08:00:01.589Z' },

   {name:'魅藍note3', value: 1, type: 4, date: '2018-06-05T08:00:01.589Z' },

   {name:'魅藍note', value: 1, type: 4, date: '2018-06-07T08:00:01.589Z' },

   {name:'oppor9', value: 7, type: 4, date: '2018-06-04T08:04:01.588Z' },

   {name:'華為p9', value: 1, type: 4, date: '2018-06-02T08:00:01.577Z' },

   {name:'華為p9', value: 2, type: 4, date: '2018-06-07T08:00:01.110Z' },

   {name:'華為p10', value: 1, type: 1, date: '2018-06-07T08:00:01.534Z' }

];

/**

* 請用您認為最優化的方式,將arr中的type為4的數據過濾出來,

* 然後按相同的 name + date(按天)合並value(value累加),

* 然後按 value 降序(從大到小)排序,

* 最後每行按照 "${name},${本地日期},售出${sum(value)}部" 的格式,如:"小米2,2017年06月08日,售出5部", 列印(console.log)出來。

* 可以使用第三方js庫,可以使用es6。

* 請在半小時內完成。

要求最後輸出結果樣例如下:

oppor9,2017年06月04日,售出7部

魅藍note2,2017年06月07日,售出6部

魅藍note2,2017年06月02日,售出5部

小米2,2017年06月08日,售出5部

......

*/

function printArray(arr){

}

我的解答:

function printArray(arr){

    const res = arr.filter(function(item, index, arr){

        item.date = item.date.split('T')[0]

        return item.type === 4

    })

    console.log(res)

    const newArr = []

    const temp = {}

    for(const i in res) {

        const key = `${res[i].name}@${res[i].date}`

        if (temp[key]) {

            temp[key] += res[i].value

        } else {

            temp[key] = res[i].value

        }

    }

    console.log(temp)

    for (const key in temp) {

        const tempObj = {}

        tempObj.name = key.split('@')[0]

        tempObj.date = key.split('@')[1]

        tempObj.value = temp[key]

        newArr.push(tempObj)

    }

    console.log(newArr)

    function compare(prop) {

        return function(a, b){

            const value1 = a[prop]

            const value2 = b[prop]

            return value2 - value1

        }

    }

    newArr.sort(compare('value'))

    console.log(newArr)

    newArr.forEach((item, index) => {

        const printStr = `${item.name},${item.date.split('-')[0]}年${item.date.split('-')[1]}月${item.date.split('-')[2]}日,售出${item.value}部`

        console.log(printStr)

    })

}

printArray(arr)

我有注意到時間那有點差異,題目數組里給的是2018,讓最後列印出來是2017年,我自己覺得是列印錯了。如果在現場我估計我會再問一下面試官這里是否不一樣。如果真不一樣,程序里在處理一下就行了

好了,此題完結。

8. 阿里巴巴的面試流程是什麼樣子的

在阿里巴巴面試通常會有3輪面試:

1、第一輪面試:

第一輪面試通常是電話面,面試官會提前打電話約定面試時間,在接到面試官電話時,不要緊張,如果自己尚未准備好面試,或者時間不方便,可以將時間約靠後一點,留下足夠的時間緩沖。

面試的時候不用太緊張,面試你的工程師通常就是你所應聘崗位所在團隊的成員,他是在為自己的團隊挑選隊友,因此,沒有理由為難你。

2、第二輪面試:

如果你順利通過第一輪面試,那麼,大約一周後,將進行第二輪面試。第二輪面試的面試官通常是團隊主管(不一定是你所應聘崗位所在的團隊,因為存在「交叉面「防作弊)。

第二輪面試如果是程序員會考察程序員的能力水平,通過筆試和問答做出最後的判斷。

3、第三輪面試:

在通過第二輪面試後,通常就進入到了技術「終面」,本輪通常由部門總監、HRD來面試。主要面試個人的心理素質,職業素養以及為人待物的能力。

如果面試者可以順利通過3論面試就可以收到來自阿里巴巴的offer了。

1、基礎知識的掌握

阿里的技術面試通常是一個由淺入深的過程。起初,面試官會根據崗位要求問一些技術相關的基礎問題。當然「基礎」二字的含義並不是簡單,如果沒有充分的准備和足夠的積累,也容易被拒絕。

根據面試經驗,超過一半的應聘者在這個環節被拒絕,因此,建議應聘者切勿「裸考」,否則留下一個「基礎不扎實」的面試記錄,短期內再應聘阿里的成功率就很低了。

2、應變能力

阿裡面試官會通過設計類問題來考查應聘者的「應變能力」。

例如,給一個具體的問題,要求應聘者給出設計方案,比如設計一個交通信號燈系統,一個中國象棋系統,一個問答系統,一個在線購物網站等等。要求畫出模塊圖,給出關鍵的API的定義或者類和類之間的關系。

9. 一份超全的Web前端工程師面試題!收藏~

今天小編為大家准備了一份超全的Web前端工程師面試題,准備換工作參加Web前端工程師面試的小夥伴們快來和小編一起看一看這些題目吧,希望能夠對你的面試有所幫助!

一、HTML


§Doctype作用?嚴格模式與混雜模式如何區分?它們有何意義?


§HTML5為什麼只需要寫?


§行內元素有哪些?塊級元素有哪些?空(void)元素有那些?


§頁面導入樣式時,使用link和@import有什麼區別?


§介紹一下你對瀏覽器內核的理解?


§常見的瀏覽器內核有哪些?


§html5有哪些新特性、移除了那些元素?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分HTML和HTML5?


§簡述一下你對HTML語義化的理解?


§HTML5的離線儲存怎麼使用,工作原理能不能解釋一下?


§瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢?


§請描述一下cookies,sessionStorage和localStorage的區別?


§iframe有那些缺點?


§Label的作用是什麼?是怎麼用的?(加for或包裹)


§HTML5的form如何關閉自動完成功能?


§如何實現瀏覽器內多個標簽頁之間的通信?(阿里)


§webSocket如何兼容低瀏覽器?(阿里)


§頁面可見性(PageVisibility)API可以有哪些用途?


§如何在頁面上實現一個圓形的可點擊區域?


§實現不使用border畫出1px高的線,在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。


§網頁驗證碼是幹嘛的,是為了解決什麼安全問題?


§tite與h1的區別、b與strong的區別、i與em的區別?


二、CSS


§介紹一下標準的CSS的盒子模型?與低版本IE的盒子模型有什麼不同的?


§CSS選擇符有哪些?哪些屬性可以繼承?


§CSS優先順序演算法如何計算?


§CSS3新增偽類有那些?


§如何居中div?如何居中一個浮動元素?如何讓絕對定位的div居中?


§display有哪些值?說明他們的作用。


§position的值relative和absolute定位原點是?


§CSS3有哪些新特性?


§請解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場景?


§用純CSS創建一個三角形的原理是什麼?


§一個滿屏品字布局如何設計?


§常見兼容性問題?


§li與li之間有看不見的空白間隔是什麼原因引起的?有什麼解決辦法?


§經常遇到的瀏覽器的兼容性有哪些?原因,解決方法是什麼,常用hack的技巧?


§為什麼要初始化CSS樣式。


§absolute的containingblock計算方式跟正常流有什麼不同?


§CSS里的visibility屬性有個collapse屬性值是幹嘛用的?在不同瀏覽器下以後什麼區別?


§position跟display、margincollapse、overflow、float這些特性相互疊加後會怎麼樣?


§對BFC規范(塊級格式化上下文:blockformattingcontext)的理解?


§CSS權重優先順序是如何計算的?


§請解釋一下為什麼會出現浮動和什麼時候需要清除浮動?清除浮動的方式


§移動端的布局用過媒體查詢嗎?


§使用CSS預處理器嗎?喜歡那個?


§CSS優化、提高性能的方法有哪些?


§瀏覽器是怎樣解析CSS選擇器的?


§在網頁中的應該使用奇數還是偶數的字體?為什麼呢?


§margin和padding分別適合什麼場景使用?


§抽離樣式模塊怎麼寫,說出思路,有無實踐經驗?[阿里航旅的面試題]


§元素豎向的百分比設定是相對於容器的高度嗎?


§全屏滾動的原理是什麼?用到了CSS的那些屬性?


§什麼是響應式設計?響應式設計的基本原理是什麼?如何兼容低版本的IE?


§視差滾動效果,如何給每頁做不同的動畫?(回到頂部,向下滑動要再次出現,和只出現一次分別怎麼做?)


§::before和:after中雙冒號和單冒號有什麼區別?解釋一下這2個偽元素的作用。


§如何修改chrome記住密碼後自動填充表單的黃色背景?


§你對line-height是如何理解的?


§設置元素浮動後,該元素的display值是多少?(自動變成display:block)


§怎麼讓Chrome支持小於12px的文字?


§讓頁面里的字體變清晰,變細用CSS怎麼做?(-webkit-font-smoothing:antialiased;)


§font-style屬性可以讓它賦值為「oblique」oblique是什麼意思?


§position:fixed;在android下無效怎麼處理?


§如果需要手動寫動畫,你認為最小時間間隔是多久,為什麼?(阿里)


§display:inline-block什麼時候會顯示間隙?(攜程)


§overflow:scroll時不能平滑滾動的問題怎麼處理?


§有一個高度自適應的div,裡面有兩個div,一個高度100px,希望另一個填滿剩下的高度。


§png、jpg、gif這些圖片格式解釋一下,分別什麼時候用。有沒有了解過webp?


§什麼是Cookie隔離?(或者說:請求資源的時候不要讓它帶cookie怎麼做)


§style標簽寫在body後與body前有什麼區別?


三、JavaScript


§介紹JavaScript的基本數據類型。


§說說寫JavaScript的基本規范?


§JavaScript原型,原型鏈?有什麼特點?


§JavaScript有幾種類型的值?(堆:原始數據類型和棧:引用數據類型),你能畫一下他們的內存圖嗎?


§Javascript如何實現繼承?


§Javascript創建對象的幾種方式?


§Javascript作用鏈域?


§談談This對象的理解。


§eval是做什麼的?


§什麼是window對象?什麼是document對象?


§null,undefined的區別?


§寫一個通用的事件偵聽器函數(機試題)。


§[「1」,「2」,「3」].map(parseInt)答案是多少?


§關於事件,IE與火狐的事件機制有什麼區別?如何阻止冒泡?


§什麼是閉包(closure),為什麼要用它?


§javascript代碼中的」usestrict」;是什麼意思?使用它區別是什麼?


§如何判斷一個對象是否屬於某個類?


§new操作符具體幹了什麼呢?


§用原生JavaScript的實現過什麼功能嗎?


§Javascript中,有一個函數,執行時對象查找時,永遠不會去查找原型,這個函數是?


§對JSON的了解?


§[].forEach.call($$("*"),function(a){a.style.outline="1pxsolid
#"+(~~(Math.random()*(1<<24))).toString(16)})能解釋一下這段代碼的意思嗎?


§js延遲載入的方式有哪些?


§Ajax是什麼?如何創建一個Ajax?


§同步和非同步的區別?


§如何解決跨域問題?


§頁面編碼和被請求的資源編碼如果不一致如何處理?


§模塊化開發怎麼做?


§AMD(Moles/Asynchronous-Definition)、CMD(CommonMole
Definition)規范區別?


§requireJS的核心原理是什麼?(如何動態載入的?如何避免多次載入的?如何緩存的?)


§讓你自己設計實現一個requireJS,你會怎麼做?


§談一談你對ECMAScript6的了解?


§ECMAScript6怎麼寫class么,為什麼會出現class這種東西?


§非同步載入的方式有哪些?


§documen.write和innerHTML的區別?


§DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?


§.call()和.apply()的含義和區別?


§數組和對象有哪些原生方法,列舉一下?


§JS怎麼實現一個類。怎麼實例化這個類


§JavaScript中的作用域與變數聲明提升?


§如何編寫高性能的Javascript?


§那些操作會造成內存泄漏?


§JQuery的源碼看過嗎?能不能簡單概況一下它的實現原理?


§jQuery.fn的init方法返回的this指的是什麼對象?為什麼要返回this?


§jquery中如何將數組轉化為json字元串,然後再轉化回來?


§jQuery的屬性拷貝(extend)的實現原理是什麼,如何實現深拷貝?


§jquery.extend與jquery.fn.extend的區別?


§jQuery的隊列是如何實現的?隊列可以用在哪些地方?


§談一下Jquery中的bind(),live(),delegate(),on()的區別?


§JQuery一個對象可以同時綁定多個事件,這是如何實現的?


§是否知道自定義事件。jQuery里的fire函數是什麼意思,什麼時候用?


§jQuery是通過哪個方法和Sizzle選擇器結合的?(jQuery.fn.find()進入Sizzle)


§針對jQuery性能的優化方法?


§Jquery與jQueryUI有啥區別?


§JQuery的源碼看過嗎?能不能簡單說一下它的實現原理?


§jquery中如何將數組轉化為json字元串,然後再轉化回來?


§jQuery和Zepto的區別?各自的使用場景?


§針對jQuery的優化方法?


§Zepto的點透問題如何解決?


§jQueryUI如何自定義組件?


§需求:實現一個頁面操作不會整頁刷新的網站,並且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案?


§如何判斷當前腳本運行在瀏覽器還是node環境中?(阿里)


§移動端最小觸控區域是多大?


§jQuery的slideUp動畫,如果目標元素是被外部事件驅動,當滑鼠快速地連續觸發外部元素事件,
動畫會滯後的反復執行,該如何處理呢?


§把Script標簽放在頁面的最底部的body封閉之前和封閉之後有什麼區別?瀏覽器會如何解析它們?


§移動端的點擊事件的有延遲,時間是多久,為什麼會有?怎麼解決這個延時?(click有300ms
延遲,為了實現safari的雙擊事件的設計,瀏覽器要知道你是不是要雙擊操作。)


§知道各種JS框架(Angular,Backbone,Ember,React,Meteor,Knockout)么?
能講出他們各自的優點和缺點么?


§Underscore對哪些JS原生對象進行了擴展以及提供了哪些好用的函數方法?


§解釋JavaScript中的作用域與變數聲明提升?


§那些操作會造成內存泄漏?


§JQuery一個對象可以同時綁定多個事件,這是如何實現的?


§Node.js的適用場景?


§(如果會用node)知道route,middleware,cluster,nodemon,pm2,server-side
rendering么?


§解釋一下Backbone的MVC實現方式?


§什麼是「前端路由」?什麼時候適合使用「前端路由」?「前端路由」有哪些優點和缺點?


§知道什麼是webkit么?知道怎麼用瀏覽器的各種工具來調試和debug代碼么?


§如何測試前端代碼么?知道BDD,TDD,UnitTest么?知道怎麼測試你的前端工程么(mocha,sinon,jasmin,
qUnit..)?


§前端templating(Mustache,underscore,handlebars)是幹嘛的,怎麼用?


§簡述一下Handlebars的基本用法?


§簡述一下Handlerbars的對模板的基本處理流程,如何編譯的?如何緩存的?


§用js實現千位分隔符?(來源:前端農民工,提示:正則+replace)


§檢測瀏覽器版本版本有哪些方式?


§我們給一個dom同時綁定兩個點擊事件,一個用捕獲,一個用冒泡,你來說下會執行幾次事件,然後會先執行冒泡還是捕獲。


四、其他問題


§原來公司工作流程是怎麼樣的,如何與其他人協作的?如何誇部門合作的?


§你遇到過比較難的技術問題是?你是如何解決的?


§設計模式知道什麼是singleton,factory,strategy,decrator么?


§常使用的庫有哪些?常用的前端開發工具?開發過什麼應用或組件?


§頁面重構怎麼操作?


§列舉IE與其他瀏覽器不一樣的特性?


§99%的網站都需要被重構是那本書上寫的?


§什麼叫優雅降級和漸進增強?


§是否了解公鑰加密和私鑰加密。


§WEB應用從伺服器主動推送Data到客戶端有那些方式?


§對Node的優點和缺點提出了自己的看法?


§你有用過哪些前端性能優化的方法?


§http狀態碼有那些?分別代表是什麼意思?


§一個頁面從輸入URL到頁面載入顯示完成,這個過程中都發生了什麼?(流程說的越詳細越好)


§部分地區用戶反應網站很卡,請問有哪些可能性的原因,以及解決方法?


§從打開app到刷新出內容,整個過程中都發生了什麼,如果感覺慢,怎麼定位問題,怎麼解決?


§除了前端以外還了解什麼其它技術么?你最最厲害的技能是什麼?


§你用的得心應手用的熟練地編輯器&開發環境是什麼樣子?


§對前端界面工程師這個職位是怎麼樣理解的?它的前景會怎麼樣?


§你怎麼看待WebApp、hybridApp、NativeApp?


§你移動端前端開發的理解?(和Web前端開發的主要區別是什麼?)


§你對加班的看法?


§平時如何管理你的項目?


§說說最近最流行的一些東西吧?常去哪些網站?


§如何設計突發大規模並發架構?


§說說最近最流行的一些東西吧?常去哪些網站?


§是否了解開源的工具bower、npm、yeoman、grunt、gulp,一個npm的包里的package.json
具備的必要的欄位都有哪些?(名稱、版本號,依賴)


§每個模塊的代碼結構都應該比較簡單,且每個模塊之間的關系也應該非常清晰,隨著功能和迭代次數越來越多,你會如何去保持這個狀態的?


§Git知道branch,diff,merge么?


§如何設計突發大規模並發架構?


§當團隊人手不足,把功能代碼寫完已經需要加班的情況下,你會做前端代碼的測試嗎?


§說說最近最流行的一些東西吧?平時常去哪些網站?


§知道什麼是SEO並且怎麼優化么?知道各種metadata的含義么?


§移動端(AndroidIOS)怎麼做好用戶體驗?


§簡單描述一下你做過的移動APP項目研發流程?


§你在現在的團隊處於什麼樣的角色,起到了什麼明顯的作用?


§你認為怎樣才是全端工程師(FullStackdeveloper)?


§介紹一個你最得意的作品吧?


§你有自己的技術博客嗎,用了哪些技術?


§對前端安全有什麼看法?


§是否了解Web注入攻擊,說下原理,最常見的兩種攻擊(XSS和CSRF)了解到什麼程度?


§項目中遇到國哪些印象深刻的技術難題,具體是什麼問題,怎麼解決?。


§最近在學什麼東西?


§你的優點是什麼?缺點是什麼?


§如何管理前端團隊?


§最近在學什麼?能談談你未來3,5年給自己的規劃嗎?


§
以上就是小編今天為大家分享的關於web前端工程師面試題的文章,希望本篇文章能夠對正准備學習編程技術的小夥伴們有所幫助。想要了解更多web前端相關知識記得關注北大青鳥web前端培訓官網哦!最後希望小夥伴們能夠好好准備這些問題的答案,在面試中取得好成績,成為一名優秀的web前端工程師!


§

10. 阿里巴巴web前端開發面試題

第一部分:用CSS實現布局


讓我們一起來做一個頁面


首先,我們需要一個布局。


請使用CSS控制3個div,實現如下圖的布局。

第二部分:用javascript優化布局


由於我們的用戶群喜歡放大看頁面


於是我們給上一題的布局做一次優化。


當滑鼠略過某個區塊的時候,該區塊會放大25%,


並且其他的區塊仍然固定不動。

提示:


也許,我們其他的布局也會用到這個放大的效果哦。


可以使用任何開源代碼,包括曾經你自己寫的。


關鍵字:


javascript、封裝、復用


第三部分:處理緊急情況


好了,我們的頁面完成了。


於是我們將頁面發布上網。


突然,晴天霹靂,頁面無法訪問了,這時候,你會怎麼做?


第一題個人實現:


___
______body,_iv{margin:0;padding:0;}
______.fl{float:_eft;_isplay:_nline;}
______.bc_C{background-color:#CCC;}
______.h120{height:120px;}
______.h250{height:250px;}
______.w120{width:120px;}
______.w220{width:220px;}
______.t130{top:130px;}
______.pa{position:_bsolute;}
______.mr10{margin-right:10px;}
______.mb10{margin-bottom:10px;}
___
___
______