[译]Front-end-Developer-Interview-Questions
翻譯自Front-end-Developer-Interview-Questions
對于有些不確定的翻譯其下面給出原文。
這份文件包含一系列用于面試審查求職者(候選人)的前端面試問題。這并不推薦把每個問題都問在同一個求職者(因為這會花幾個小時的時間)。從列表中抽取一些問題能夠幫助你審查你需要求職者具備的一些技能。
注: 牢記這里的許多問題答案是開放式的，能夠引導(dǎo)興趣性探討，相比于直接的答案這些東西能夠使你更加了解求職者的相關(guān)信息。
內(nèi)容表
<hr/>
常用問題
HTML問題
CSS問題
JS問題
測試問題
性能問題
網(wǎng)絡(luò)問題
代碼問題
興趣愛好
常用問題
你昨天/這周都有學(xué)什么？
是什么激發(fā)讓你對寫代碼感興趣(你喜歡寫代碼的動力是什么？)？
列舉一項你最近(在項目)中碰到的挑戰(zhàn)，你是如何解決的？
當(dāng)你在建一個web應(yīng)用程序或者網(wǎng)站時候，你會考慮哪些方面(UI，安全，性能，SEO，可維護性還是技術(shù)等)
說說你所喜歡的開發(fā)環(huán)境(OS，IDE...)？
如果你有五個不同的樣式表，你怎么樣最好地整合應(yīng)用到一個頁面上去呢？
你能描述下漸進增強和優(yōu)雅降級的區(qū)別么？
怎么對一個站點（頁面）資源進行優(yōu)化處理？
瀏覽器從同一個站點一次能下載多少資源？（例外情況） （不清楚TODO）
How many resources will a browser download from a given domain at a time?
What are the exceptions?說出三條方法去減少頁面加載時間(感知到的或者真是的加載時間)
Name 3 ways to decrease page load (perceived or actual load time).如果你在一個項目中別人都使用tabs而你使用space，你會怎么做？
描述下你怎么創(chuàng)建一個簡單的幻燈片播放頁面？
Describe how you would create a simple slideshow page.如果你今年能學(xué)習(xí)掌握一門技術(shù)(語言)，你覺得會是什么呢？
解釋標(biāo)準(zhǔn)和標(biāo)準(zhǔn)機構(gòu)的重要性？
Explain the importance of standards and standards bodies.什么是文檔樣式閃爍(Flash of Unstyled Content)？如何避免
解釋ARIA和screenreaders，怎么讓一個網(wǎng)站可理解？
Explain what ARIA and screenreaders are, and how to make a website accessible.說下相比于JavaScript動畫實現(xiàn)，CSS的動畫實現(xiàn)有什么優(yōu)點和缺點？
CORS是什么？它解決什么問題？
What does CORS stand for and what issue does it address?
HTML問題
doctype的作用？
標(biāo)準(zhǔn)模式和怪異模式的差異？
HTML和XHTML的差異？
像application/xhtml+xml這樣的服務(wù)頁面會有什么問題么？
你怎么實現(xiàn)一個頁面的多種語言(切換)?
哪些方面的東西是你在設(shè)計和開發(fā)多語言網(wǎng)站時必須要小心謹(jǐn)慎考慮到的？
哪些data-的屬性是有效的？
What are data- attributes good for?HTML5作為一個開放的Web平臺，HTML5的構(gòu)建塊是什么？
Consider HTML5 as an open web platform. What are the building blocks of HTML5?描述下cookie sessionStorage localStorage的區(qū)別？
描述下<script> <script async> <script defer>的區(qū)別？
為什么一般總是把CSS link放置于<head></head>，而把script放在</body>前？有什么例外么
什么是漸進渲染？
你之前使用過什么不同的HTML模板語言么？
Have you used different HTML templating languages before?
CSS問題
CSS中class和ID的區(qū)別？
CSS中resetting和normalizing的區(qū)別？你會選哪個，為什么？
描述下float和它的作用原理
描述下z-index以及層疊上下文是怎么形成的？
描述下BFC(Block Formatting Context)和作用原理？
有哪些清除技術(shù)(?)，它們分別適用于什么上下文環(huán)境？
What are the various clearing techniques and which is appropriate for what context?說下CSS Sprites（CSS壓縮）,怎么在一個頁面或者站點上實現(xiàn)？
你最喜歡的圖片替換技術(shù)，你是在什么時候用的？
你怎么著手處理特定的瀏覽器樣式問題（瀏覽器兼容）？
你是怎么樣讓你你的頁面在一些不支持一些特性的瀏覽器中跑起來的？用什么樣的技術(shù)/處理程序去實現(xiàn)？
How do you serve your pages for feature-constrained browsers?
What techniques/processes do you use?有哪些方法在視覺上隱藏內(nèi)容元素（以及讓其僅對screener reader有效？）
What are the different ways to visually hide content (and make it available only for screen readers)?你用過柵格系統(tǒng)么，如果用過，喜歡哪一種呢？
你用過/實踐過media queries或者mobile specific布局/CSS?
Have you used or implemented media queries or mobile specific layouts/CSS?熟悉SVG么？
怎么優(yōu)化web頁面的打印？
一些書寫高效CSS的"gotchas"是什么？
What are some of the "gotchas" for writing efficient CSS?CSS預(yù)處理器的優(yōu)點與缺點？說下你用過的喜歡的和不喜歡的預(yù)處理器。
你怎么實現(xiàn)非標(biāo)準(zhǔn)字體的網(wǎng)頁設(shè)計排版？
解釋下瀏覽器是怎么確定元素和CSS選擇器匹配起來的？
說一下偽元素與其對應(yīng)的作用功能？
說一下你對盒模型的理解以及你怎么讓瀏覽器通過CSS在不同的盒模型下渲染你的布局？
how you would tell the browser in CSS to render your layout in different box models.box-sizing:border-box是什么？它的好處是什么？
列舉下你記得的display屬性？
inline和inline-block的區(qū)別？
relative fixed absolute以及static來定位元素的區(qū)別？
CSS中的C是層疊的意思，對于被指定樣式的優(yōu)先級是怎么確定的呢？（舉一些例子）？你是怎么樣很好地利用這個機制？
在本地環(huán)境或者生產(chǎn)環(huán)境中，你用過哪些CSS框架？你是怎么改進和優(yōu)化的呢？
What existing CSS frameworks have you used locally, or in production? How would you change/improve them?你玩過新的CSS Flexbox或是Grid specs?
響應(yīng)式設(shè)計(responsive design)和自適應(yīng)設(shè)計(adaptive design)的區(qū)別？
你做過retina graphic（視網(wǎng)膜圖像）的處理么？是的話，你是用什么技術(shù)的呢？
你在什么情況下使用translate()代替absolute positioning絕對定位，反之，為什么？
JS問題
解釋下事件委托？
解釋下this在JavaScript中怎么工作的（機制）？
解釋下prototypal inheritance原型機城的工作原理？
對于AMD和CommonJS的比較和看法？
解釋下以下代碼為什么不能作為IIFE(匿名函數(shù)自調(diào)用)運行
你需要怎么改使之成為一個IIFE？
null undefined undeclared這些變量有什么區(qū)別？怎么這些檢查變量類型？
什么是閉包？你是怎么使用的，為什么使用?
匿名函數(shù)典型的應(yīng)用案例？
你是怎么組織你的代碼的？（模塊化還是類型繼承）
宿主對象(host object)和本地對象(native object)的區(qū)別
以下代碼有什么區(qū)別？
.call和.apply區(qū)別？
解釋下Function.prototype.bind?
什么時候使用document.write()?
feature detection feature inference以及UA String(用戶代理)的區(qū)別？
What's the difference between feature detection, feature inference, and using the UA string?盡你所知地解釋下AJAX？
解釋下JSONP的工作原理（為什么它不算是AJAX）
用過JavaScript Template（模板）么？如果用過，哪個庫？
解釋下hosting?
描述下事件冒泡(event bubbling)?
attribute和property的區(qū)別？
為什么說擴展內(nèi)置JavaScript對象(built-in Javascript Object)不是個好主意？
load和document ready事件區(qū)別？
==和===的區(qū)別？
解釋下關(guān)于JavaScript的同源策略(same-origin policy)?
實現(xiàn)如下代碼？
為什么稱之為Ternary expression(三元表達式/三目運算符？)，Ternary指什么？
什么是use strict(使用嚴(yán)格模式)？它的優(yōu)點和缺點？
for()循環(huán)100次，3的倍數(shù)輸出fizz，5的倍數(shù)輸出buzz，3和5的倍數(shù)輸出fizzbuzz?
為什么一般來說好的做法是使全局作用域保持原樣而不去改變之。
Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?為什么你會使用類似于load(功能)的事件？它會有什么缺點么？你知道什么其他替代方法么，為什么你用那些替代方法？
解釋下什么是單頁面應(yīng)用(a single page app)以及怎么進行SEO優(yōu)化（make one SEO-friendly）?
使用Promises以及/或者他們的polyfills的經(jīng)驗程度？（新技術(shù)么，完全沒了解）
What is the extent of your experience with Promises and/or their polyfills?使用Promises代替callbacks的利弊(優(yōu)缺點)？
編寫一種(其他)語言編譯成JavaScript的寫法(writing JavaScript code in a language that compiles to JavaScript)有什么優(yōu)點和缺點？
你用什么技術(shù)和工具調(diào)試JavaScript代碼？
你使用哪種語言構(gòu)造器(language constructions)來重復(fù)遍歷對象屬性和數(shù)組對象？
解釋下mutable和immutable對象的區(qū)別
舉一個JavaScript中immutable對象的例子？immutability的利弊？怎么用代碼實現(xiàn)immutability?解釋下同步方法(synchronous function)和異步方法(asynchronous function)的區(qū)別？
-
什么是event loop?
`call stack`和`take queue`的區(qū)別？
測試問題
測試代碼的利弊是什么？
你用什么工具來進行代碼功能測試？
單元測試和功能/集成測試的區(qū)別？
代碼風(fēng)格檢查工具(a coding style linting tool)的目的/作用？
性能問題
你用什么工具去發(fā)現(xiàn)檢查代碼中的性能缺陷？
有哪些方法去優(yōu)化網(wǎng)頁的滾動性能（website's scrolling performance）?
解釋下layout painting以及compositing的區(qū)別？
網(wǎng)絡(luò)問題
一般來說，為什么多域名指向(服務(wù))一個站點會更好？
Traditionally, why has it been better to serve site assets from multiple domains?盡你所知解釋下當(dāng)你在(瀏覽器)輸入域名到加載，到頁面呈現(xiàn)的整個過程？
Long-Polling長輪詢 WebSocket以及Server-Sent Events的區(qū)別？
解釋下下列請求和返回頭信息
>Diff. between Expires, Date, Age and If-Modified-...
Do Not Track
Cache-Control
Transfer-Encoding
ETag
X-Frame-Options什么是HTTP actions( HTTP 行為？)？列出你所知道的所有HTTP actions并解釋？
代碼問題
// Q1: foo的值 var foo = 10 + '20';// Q2: 如何實現(xiàn)如下函數(shù)？ add(2,5);//7 add(2)(5);// 7// Q3: 下面字符串返回值？ "i'm a lasagna hog".split("").reverse().join("");// Q4: window.foo值？ (window.foo || (window.foo = "bar"));// Q5: 下面兩個alert()結(jié)果var foo = "Hello"; (function() {var bar = " World";alert(foo + bar); })(); alert(foo + bar);// Q6: foo.length值 var foo = []; foo.push(1); foo.push(2);// Q7: foo.x值 var foo = {n: 1}; var bar = foo; foo.x = foo = {n: 2};// Q8:下列代碼輸出 console.log('one'); setTimeout(function() {console.log('two'); }, 0); console.log('three');Fun興趣問題
最近有在做什么cool的項目么？
你手頭喜歡你在用的開發(fā)工具中的那些點呢？
有寵物計劃么？哪種類型？
喜歡IE的那個特性？
喜歡咖啡么？
貢獻者
This document started in 2009 as a collaboration of @paulirish @bentruyman @cowboy @ajpiano@SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jonneal @sambreed and @iansym.
It has since received contributions from over 100 developers.
總結(jié)
以上是生活随笔為你收集整理的[译]Front-end-Developer-Interview-Questions的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Eclipse 引导阮卓项目 No pr
- 下一篇： 尚硅谷公开课--struts2--2--