前端工作面試問題
前言
這是無意間看到的關於前端面試的問題的總結,感覺很不錯,大家可以借鑑下,找工作的同學可以瞧瞧,工作中的同學可以自己想想看這些知識是否瞭解或者熟悉,給自己前端技術一個小的檢測。
常見問題:
-
你在昨天/本週學到了什麼?
-
編寫程式碼的哪些方面能夠使你興奮或感興趣?
-
在製作一個Web應用或Web站點的過程中,你是如何考慮他的UI、安全性、高效能、SEO、可維護性以及技術因素的?
-
談談你喜歡的開發環境。(例如作業系統,編輯器,瀏覽器,工具等等。)
-
你最熟悉哪一套版本控制系統?
-
你能描述一下當你製作一個網頁的工作流程嗎?
-
你能描述一下漸進增強和優雅降級之間的不同嗎?
- 如果提到了特性檢測,可以加分。
-
請解釋一下什麼是“語義化的 HTML”。
-
你如何對網站的檔案和資源進行優化?
- 期待的解決方案包括:
- 檔案合併
- 檔案最小化/檔案壓縮
- 使用 CDN 託管
- 快取的使用
- 其他
- 期待的解決方案包括:
-
為什麼利用多個域名來提供網站資源會更有效?
- 瀏覽器同一時間可以從一個域名下載多少資源?
-
請說出三種減少頁面載入時間的方法。(載入時間指感知的時間或者實際載入時間)
-
如果你參與到一個專案中,發現他們使用 Tab 來縮排程式碼,但是你喜歡空格,你會怎麼做?
- 建議這個專案使用像 EditorConfig (http://editorconfig.org/) 之類的規範
- 為了保持一致性,接受專案原有的風格
- 直接使用 VIM 的 retab 命令
-
請寫一個簡單的幻燈效果頁面
- 如果不使用JS來完成,可以加分。
-
你都使用哪些工具來測試程式碼的效能?
- Profiler, JSPerf, Dromaeo
-
如果今年你打算熟練掌握一項新技術,那會是什麼?
-
Long-Polling, Websockets, SSE(Server-Sent Event) 之間有什麼區別?
-
請談一下你對網頁標準和標準制定機構重要性的理解。
-
什麼是 FOUC(無樣式內容閃爍)?你如何來避免 FOUC?
-
請儘可能完整得描述下從輸入URL到整個網頁載入完畢及顯示在螢幕上的整個流程
HTML相關問題:
-
doctype
(文件型別)的作用是什麼? -
瀏覽器標準模式和怪異模式之間的區別是什麼?
-
使用 XHTML 的侷限有哪些?
- 如果頁面使用 'application/xhtml+xml' 會有什麼問題嗎?
-
如果網頁內容需要支援多語言,你會怎麼做?
- 在設計和開發多語言網站時,有哪些問題你必須要考慮?
-
data-
屬性的作用是什麼? -
如果把 HTML5 看作做一個開放平臺,那它的構建模組有哪些?
-
請描述一下 cookies,sessionStorage 和 localStorage 的區別?
-
請描述一下
GET
和POST
的區別?
CSS 相關問題:
-
描述下 “reset” CSS 檔案的作用和使用它的好處。
-
解釋下浮動和它的工作原理。
-
列舉不同的清除浮動的技巧,並指出它們各自適用的使用場景。
-
解釋下 CSS sprites,以及你要如何在頁面或網站中使用它。
-
你最喜歡的圖片替換方法是什麼,你如何選擇使用。
-
討論CSS hacks,條件引用或者其他。
-
如何為有功能限制的瀏覽器提供網頁?
- 你會使用哪些技術和處理方法?
-
有哪些的隱藏內容的方法(如果同時還要保證螢幕閱讀器可用呢?)
-
你用過柵格系統嗎?如果使用過,你最喜歡哪種?
-
你用過媒體查詢,或針對移動端的佈局/CSS 嗎?
-
你熟悉 SVG 樣式的書寫嗎?
-
如何優化網頁的列印樣式?
-
在書寫高效 CSS 時會有哪些問題需要考慮?
-
使用 CSS 前處理器的優缺點有哪些?(SASS,Compass,Stylus,LESS)
- 描述下你曾經使用過的 CSS 預處理的優缺點。
-
如果設計中使用了非標準的字型,你該如何去實現?
- Webfonts (字型服務例如:Google Webfonts,Typekit 等等。)
-
解釋下瀏覽器是如何判斷元素是否匹配某個 CSS 選擇器?
-
解釋一下你對盒模型的理解,以及如何在 CSS 中告訴瀏覽器使用不同的盒模型來渲染你的佈局。
-
請解釋一下
* { box-sizing: border-box; }
的作用, 並且說明使用它有什麼好處? -
請羅列出你所知道的 display 屬性的全部值
-
請解釋一下 inline 和 inline-block 的區別?
-
請解釋一下 relative、fixed、absolute 和 static 元素的區別
-
你目前在使用哪一套CSS框架,或者在產品線上使用過哪一套?(Bootstrap, PureCSS, Foundation 等等)
- 如果有,請問是哪一套?如果可以,你如何改善CSS框架?
-
請問你有使用過 CSS Flexbox 或者 Grid specs 嗎?
- 如果有,請問在效能和效率的方面你是怎麼看的?
JS相關問題:
-
解釋下事件代理。
-
解釋下 JavaScript 中
this
是如何工作的。 -
解釋下原型繼承的原理。
-
你是如何測試JavaScript程式碼的?
-
AMD vs. CommonJS?
-
什麼是雜湊表?
-
解釋下為什麼接下來這段程式碼不是 IIFE(立即呼叫的函式表示式):
function foo(){ }();
.- 要做哪些改動使它變成 IIFE?
-
描述以下變數的區別:
null
,undefined
或undeclared
?- 該如何檢測它們?
-
什麼是閉包,如何使用它,為什麼要使用它?
-
請舉出一個匿名函式的典型用例?
-
解釋 “JavaScript 模組模式” 以及你在何時使用它。
- 如果有提到無汙染的名稱空間,可以考慮加分。
- 如果你的模組沒有自己的名稱空間會怎麼樣?
-
你是如何組織自己的程式碼?是使用模組模式,還是使用經典繼承的方法?
-
請指出 JavaScript 宿主物件和原生物件的區別?
-
指出下列程式碼的區別:
function Person(){} var person = Person(); var person = new Person();
-
.call
和.apply
的區別是什麼? -
請解釋
Function.prototype.bind
的作用? -
你何時優化自己的程式碼?
-
你能解釋一下 JavaScript 中的繼承是如何工作的嗎?
-
在什麼時候你會使用
document.write()
?- 大多數生成的廣告程式碼依舊使用
document.write()
,雖然這種用法會讓人很不爽。
- 大多數生成的廣告程式碼依舊使用
-
請指出瀏覽器特性檢測,特性推斷和瀏覽器 UA 字串嗅探的區別?
-
請儘可能詳盡的解釋 AJAX 的工作原理。
-
請解釋 JSONP 的工作原理,以及它為什麼不是真正的 AJAX。
-
你使用過 JavaScript 模板系統嗎?
- 如有使用過,請談談你都使用過哪些庫,比如 Mustache.js,Handlebars 等等。
-
請解釋變數宣告提升。
-
請描述下事件冒泡機制。
-
"attribute" 和 "property" 的區別是什麼?
-
為什麼擴充套件 JavaScript 內建物件不是好的做法?
-
為什麼擴充套件 JavaScript 內建物件是好的做法?
-
請指出 document load 和 document ready 兩個事件的區別。
-
==
和===
有什麼不同? -
你如何從瀏覽器的 URL 中獲取查詢字串引數。
-
請解釋一下 JavaScript 的同源策略。
-
請描述一下 JavaScript 的繼承模式。
-
如何實現下列程式碼:
[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
-
描述一種 JavaScript 中實現 memoization(避免重複運算)的策略。
-
什麼是三元表示式?“三元” 表示什麼意思?
-
函式的引數元是什麼?
-
什麼是
"use strict";
? 使用它的好處和壞處分別是什麼?
jQuery 相關問題:
-
解釋"chaining"。
-
解釋"deferreds"。
-
你知道哪些針對 jQuery 的優化方法。
-
請解釋
.end()
的用途。 -
你如何給一個事件處理函式名稱空間,為什麼要這樣做?
-
請說出你可以傳遞給 jQuery 方法的四種不同值。
- 選擇器(字串),HTML(字串),回撥函式,HTML元素,物件,陣列,元素陣列,jQuery物件等。
-
什麼是效果佇列?
-
請指出
.get()
,[]
,eq()
的區別。 -
請指出
.bind()
,.live()
和.delegate()
的區別。 -
請指出
$
和$.fn
的區別,或者說出$.fn
的用途。 -
請優化下列選擇器:
$(".foo div#bar:eq(0)")
程式碼相關的問題:
modulo(12, 5) // 2
問題:實現滿足上述結果的modulo函式
"i'm a lasagna hog".split("").reverse().join("");
問題:上面的語句的返回值是什麼? 答案:"goh angasal a m'i"
( window.foo || ( window.foo = "bar" ) );
問題:window.foo 的值是什麼? 答案:"bar" 只有 window.foo 為假時的才是上面答案,否則就是它本身的值。
var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);
問題:上面兩個 alert 的結果是什麼 答案: "Hello World" 和 ReferenceError: bar is not defined
var foo = []; foo.push(1); foo.push(2);
問題:foo.length 的值是什麼? 答案:2
有趣的問題:
-
你編寫過的最酷的程式碼是什麼?其中你最自豪的是什麼?
-
在你使用過的開發工具中,最喜歡哪個?
-
你有什麼業餘專案嗎?是哪種型別的?
-
你最愛的 IE 特性是什麼?
其他參考資料:
- http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before
- http://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/
- http://css-tricks.com/interview-questions-css/
- http://davidshariff.com/quiz/
- http://blog.sourcing.io/interview-questions
相關推薦
前端工作面試問題(下)
JS相關問題: 解釋下事件代理。 在傳統的事件處理中,你按照需要為每一個元素新增或者是刪除事件處理器。然而,事件處理器將有可能導致記憶體洩露或者是效能下降——你用得越多這種風險就越大。JavaScript事件代理則是一種簡單的技巧,通過它你可以把事件處理器新增到一個父級元素上,這
前端工作面試問題(上)
前段時間專心整理一下關於前端的面試問題。感謝耐心盡責的楷豪和聞東師兄最近給我們的指導和建議。大家可以通過這些問題,大家可以順便看以下自己的水平。 我也利用課餘時間(三天沒安排課程的下午晚上)嘗試寫下自己的答案,水平有限,望體諒。 暫時只提供上半部分,下半部經過一段時間努力,也已經更新“前端工作面試
前端工作面試問題
前言 這是無意間看到的關於前端面試的問題的總結,感覺很不錯,大家可以借鑑下,找工作的同學可以瞧瞧,工作中的同學可以自己想想看這些知識是否瞭解或者熟悉,給自己前端技術一個小的檢測。 常見問題: 你在昨天/本週學到了什麼? 編寫程式碼的哪些方面能夠使你興奮或感興趣? 在製作一個W
前端工作面試HTML相關問題
Q: 請描述一下 cookies,sessionStorage 和 localStorage 的區別? A: sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web請求之間儲存資料。有了本地資料,就可以避免資料在瀏覽器和伺服器間不
針對移動端的前端工作流
提高 gem 下載 最終 時間 img github 通過 即使 在移動端項目的開發中,我們會遇到諸如移動端技術選型、移動端適配、預處理器語言的使用規範和編譯、各種繁瑣的工作(壓縮、合並、內聯、雪碧圖、CSS前綴……)等問題,在一遍又一遍的重復勞動
對即將入職前端工作的新人有哪些建議?
over 方法 get 原型 交流 完全 div bbs 建議 3個詞吧溝通,努力,多看。 1、溝通。溝通是在工作當中是很重要的一個環節,溝通好了事半功倍,溝通不好事倍功半。在網站開發的整個環節當中前端能接觸到的有產品,設計,後臺,測試這些崗位的人。產品會根據客戶
前端跳槽面試必備技巧
通過 target class idt html 課程 工作 AR 失敗 <ignore_js_op> 第1章 課程介紹很多同學對面試不夠了解,不知道如何準備,對面試環節的設置以及目的不夠了解,因此成功率不高。通常情況下校招生面試的成功率低於1%,而社招的面試成
起點沒有選對,想找好的前端工作只能越找越累
如何 開始 行業 量化 mage type 可能 有一個 watermark 一、到底什麽才是一份好的前端工作? 自從開始做咨詢,就不斷有人問我:“老師,前端這個行業行業怎麽樣啊?有發展嗎?”或者是:“老師,做IT,算不算一份好工作啊?”工作,是一個永恒的話題:沒工作的人
程序員找工作面試會遇到哪些坑
更多 怎麽 方向 沒有 作用 一般來說 推薦 關註 很大的 前言 我在JD工作已經有四個多月了,加班一直都比較多,不是因為工作量太大,而是因為自己不會的東西太多。電商行業的確是一個很鍛煉人的地方。 2018年4月份,我寫的那篇文章《裸辭兩個月,海投一個月,從Android轉
9-4前端vue面試的問題
route 面試 作用 項目 冒泡 router 提問 mixin 原理 就沒有什麽順序了,肖師傅的一些提問: 1- 配置文件中proxyTable的作用 2-@import ‘~styles/mixins.styl‘ ~的作用 3-vue模擬的本地中訪問地址的url
2018前端個人面試總結
小程序 工作效率 ria 定向 總結 結構 聲明變量 def hidden 前言: 最近一直在面試,我把面試的5家公司面試題,選擇了一些來總結說明,如有問題,歡迎各位小夥伴給與指正 有些題的答案是百度,有些則是我自己的理解,有些題是開放題,沒有標準答案,根
三年前端,面試思考(已拿到頭條、螞蟻、美團offer)
背景介紹 985本科,軟體工程專業,前端。 工作三年半,第一家創業公司,半年。 第二家前端技術不錯的公司,兩年半。 第三家,個人創業半年。 可以看出,我是個很喜歡折騰的人,大學期間也做過很多專案,非常願意參與到產品中去。技術上勉強合格,不過獨自負責過很複雜的前端專案,所以一般基礎面試題還有專案經歷都
三年前端,面試思考(二)
為什麼還有(二) 沒有想到上一篇 《三年前端,面試思考》 有這麼多前端同學看到。 在評論區也有很多鼓勵和質疑的聲音,而且群裡面交流的同學兩天就達到了700人。 群裡有同學問了很多問題,同時希望我再分享一些面試技巧,在這篇文章中我也一併梳理出來。 相關面試題解答 《100*100的 canvas 佔多少記
是否Web前端工作越來越難找了?
出來找工作的學生抱怨著現在前端的人太多了,自己投出的簡歷猶如石沉大海,連面試通知都收不到。不少小夥伴也怨聲載道,一定是前端已經飽和了,找工作越來越難了。而事實真的如此嗎? web前端開發 Web前端需求量 可以看到市場上仍對前端人才有著緊迫的需求,在很多小夥伴抱怨“前端的人怎
記一次前端大廠面試
前言 2年工作經驗的頁面仔,最近參加了幾家杭州大廠的面試,順利的拿到了自己心儀的offer,積累了一些高頻重點面試題,記錄給有需要的同學們。 我把面試題歸納整理分為兩類,一種是基礎試題: 主要考察前端技基礎是否紮實,是否能夠將前端知識體系串聯。一種是開放式問題: 考察
[譯] 以面試官的角度來看 React 工作面試
原文地址:A React job interview — recruiter perspective. 原文作者:Bartosz Szczeciński 譯文出自:掘金翻譯計劃 本文永久連結:github.com/xitu/gold-m… 譯者:子非 校對者:Cal
前端js面試中的常見的演算法問題
雖說我們很多時候前端很少有機會接觸到演算法。大多都互動性的操作,然而從各大公司面試來看,演算法依舊是考察的一方面。實際上學習資料結構與演算法對於工程師去理解和分析問題都是有幫助的。如果將來當我們面對較為複雜的問題,這些基礎知識的積累可以幫助我們更好的優化解決思路。下面羅列在前端面試中經常撞見的幾個問
寫一份gulp常用配置檔案,構建前端工作流
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
CNN找工作面試基礎知識
一、特徵圖大小計算方式 卷積中的特徵圖大小計算方式有兩種,分別是‘VALID’和‘SAME’。 根據tensorflow中的conv2d函式,我們先定義幾個基本符號 1、輸入矩陣 W×W,這裡只考慮輸入寬高相等的情況,如果不相等,推導方法一樣,不多解釋。 2、filter矩陣 F×F,卷
web前端之面試送分題
前端入門很容易,簡單地用html搭一個頁面框架;會用一些css基本樣式;懂得用jquery的dom互動,就基本可以挺著胸說自己是個前端工程師了。 但是前端提升異常艱難,演算法、資料結構、oop;javascript、dom、css、html5這些僅僅是標配;效能優化、安全性、程式碼