19年面试总结
常見問題：
?
l?編寫代碼的哪些方面能夠使你興奮或感興趣？
l?你最近遇到過(guò)什么技術(shù)挑戰(zhàn)？你是如何解決的？
l?在制作一個(gè)網(wǎng)頁(yè)應(yīng)用或網(wǎng)站的過(guò)程中，你是如何考慮其?UI、安全性、高性能、SEO、可維護(hù)性以及技術(shù)因素的？
l?請(qǐng)談?wù)勀阆矚g的開發(fā)環(huán)境。
l?你最熟悉哪一套版本控制系統(tǒng)？
l?你能描述當(dāng)你制作一個(gè)網(wǎng)頁(yè)的工作流程嗎？
l?假若你有?5 個(gè)不同的樣式文件 (stylesheets), 整合進(jìn)網(wǎng)站的最好方式是?
l?你能描述漸進(jìn)增強(qiáng)?(progressive enhancement) 和優(yōu)雅降級(jí) (graceful degradation) 之間的不同嗎?
l?你如何對(duì)網(wǎng)站的文件和資源進(jìn)行優(yōu)化？
l?瀏覽器同一時(shí)間可以從一個(gè)域名下載多少資源？
l?有什么例外嗎？
l?請(qǐng)說(shuō)出三種減少頁(yè)面加載時(shí)間的方法。(加載時(shí)間指感知的時(shí)間或者實(shí)際加載時(shí)間)
l?如果你參與到一個(gè)項(xiàng)目中，發(fā)現(xiàn)他們使用?Tab 來(lái)縮進(jìn)代碼，但是你喜歡空格，你會(huì)怎么做？
?
l?請(qǐng)寫一個(gè)簡(jiǎn)單的幻燈效果頁(yè)面。
l?如今年你打算熟練掌握一項(xiàng)新技術(shù)，那會(huì)是什么？
l?請(qǐng)談?wù)勀銓?duì)網(wǎng)頁(yè)標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)重要性的理解。
?
l?什么是?FOUC (無(wú)樣式內(nèi)容閃爍)？你如何來(lái)避免 FOUC？
l?請(qǐng)解釋什么是?ARIA 和屏幕閱讀器 (screenreaders)，以及如何使網(wǎng)站實(shí)現(xiàn)無(wú)障礙訪問 (accessible)。
l?請(qǐng)解釋?CSS 動(dòng)畫和 JavaScript 動(dòng)畫的優(yōu)缺點(diǎn)。
l?什么使?CORS，以及其要解決的問題？
HTML 相關(guān)問題：
?
l?doctype(文檔類型) 的作用是什么？
l?瀏覽器標(biāo)準(zhǔn)模式?(standards mode) 和怪異模式 (quirks mode) 之間的區(qū)別是什么？
l?HTML 和 XHTML 有什么區(qū)別？
l?如果頁(yè)面使用?'application/xhtml+xml' 會(huì)有什么問題嗎？
l?如果網(wǎng)頁(yè)內(nèi)容需要支持多語(yǔ)言，你會(huì)怎么做？
l?在設(shè)計(jì)和開發(fā)多語(yǔ)言網(wǎng)站時(shí)，有哪些問題你必須要考慮？
l?data-屬性的作用是什么？
l?如果把?HTML5 看作做一個(gè)開放平臺(tái)，那它的構(gòu)建模塊有哪些？
l?請(qǐng)描述?cookies、sessionStorage?和?localStorage?的區(qū)別。
?
簡(jiǎn)析：共同點(diǎn)：都是保存在瀏覽器端，且同源的。
?
區(qū)別：
?
1.cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶，即cookie在瀏覽器和服務(wù)器間來(lái)回傳遞。而sessionStorage和localStorage不會(huì)把數(shù)據(jù)發(fā)送給服務(wù)器，僅在本地保存。
?
2.cookie還有path的概念，可以限制cookie只屬于某個(gè)路徑下。
?
3.存儲(chǔ)大小限制也不同，cookie數(shù)據(jù)不能超過(guò)4k。sessionStorage和localStorage可以達(dá)到5M或更多。
?
4.數(shù)據(jù)有效期不同，sessionStorage僅在當(dāng)前瀏覽器窗口關(guān)閉前有效localStorage始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存。Cookie在設(shè)置的過(guò)期時(shí)間之前一直有效。
?
5.作用域不同，sessionStorage在不同的瀏覽器窗口間不能共享，即使是同一個(gè)頁(yè)面。localStorage在所有同源窗口中都是共享的。Cookie也是同源窗口共享的。
?
l?請(qǐng)解釋?<script>、<script async>?和?<script defer>?的區(qū)別。
l?為什么通常推薦將?CSS?<link>?放置在?<head></head>?之間，而將 JS?<script>?放置在?</body>?之前？你知道相關(guān)解釋嗎？
l?什么是漸進(jìn)式渲染?(progressive rendering)？
l?你用過(guò)哪些不同的?HTML 模板語(yǔ)言？
?
CSS 相關(guān)問題：
?
l?CSS 中類 (classes) 和 ID 的區(qū)別。
l?請(qǐng)問?"resetting" 和 "normalizing" CSS 之間的區(qū)別？你會(huì)如何選擇，為什么？
l?請(qǐng)解釋浮動(dòng)?(Floats) 及其工作原理。
l?描述z-index和疊加上下文是如何形成的。
l?請(qǐng)描述?BFC(Block Formatting Context) 及其如何工作。
l?列舉不同的清除浮動(dòng)的技巧，并指出它們各自適用的使用場(chǎng)景。
l?請(qǐng)解釋?CSS sprites，以及你要如何在頁(yè)面或網(wǎng)站中實(shí)現(xiàn)它。
l?你最喜歡的圖片替換方法是什么，你如何選擇使用。
l?你會(huì)如何解決特定瀏覽器的樣式問題？
l?如何為有功能限制的瀏覽器提供網(wǎng)頁(yè)？
l?你會(huì)使用哪些技術(shù)和處理方法？
l?有哪些的隱藏內(nèi)容的方法?(如果同時(shí)還要保證屏幕閱讀器可用呢)？
l?你用過(guò)柵格系統(tǒng)?(grid system) 嗎？如果使用過(guò)，你最喜歡哪種？
l?你用過(guò)媒體查詢，或針對(duì)移動(dòng)端的布局/CSS 嗎？
l?你熟悉?SVG 樣式的書寫嗎？
l?如何優(yōu)化網(wǎng)頁(yè)的打印樣式？
l?在書寫高效?CSS 時(shí)會(huì)有哪些問題需要考慮？
l?使用?CSS 預(yù)處理器的優(yōu)缺點(diǎn)有哪些？
l?請(qǐng)描述你曾經(jīng)使用過(guò)的?CSS 預(yù)處理器的優(yōu)缺點(diǎn)。
l?如果設(shè)計(jì)中使用了非標(biāo)準(zhǔn)的字體，你該如何去實(shí)現(xiàn)？
l?請(qǐng)解釋瀏覽器是如何判斷元素是否匹配某個(gè)?CSS 選擇器？
l?請(qǐng)描述偽元素?(pseudo-elements) 及其用途。
l?請(qǐng)解釋你對(duì)盒模型的理解，以及如何在?CSS 中告訴瀏覽器使用不同的盒模型來(lái)渲染你的布局。
l?請(qǐng)解釋?* { box-sizing: border-box; }?的作用, 并且說(shuō)明使用它有什么好處？
l?請(qǐng)羅列出你所知道的?display 屬性的全部值
l?請(qǐng)解釋?inline 和 inline-block 的區(qū)別？
l?請(qǐng)解釋?relative、fixed、absolute 和 static 元素的區(qū)別
l?CSS 中字母 'C' 的意思是疊層 (Cascading)。請(qǐng)問在確定樣式的過(guò)程中優(yōu)先級(jí)是如何決定的 (請(qǐng)舉例)？如何有效使用此系統(tǒng)？
l?你在開發(fā)或生產(chǎn)環(huán)境中使用過(guò)哪些?CSS 框架？你覺得應(yīng)該如何改善他們？
l?請(qǐng)問你有嘗試過(guò)?CSS Flexbox 或者 Grid 標(biāo)準(zhǔn)規(guī)格嗎？
l?為什么響應(yīng)式設(shè)計(jì)?(responsive design) 和自適應(yīng)設(shè)計(jì) (adaptive design) 不同？
l?你有兼容?retina 屏幕的經(jīng)歷嗎？如果有，在什么地方使用了何種技術(shù)？
l?請(qǐng)問為何要使用?translate()?而非?absolute positioning，或反之的理由？為什么？
?
?
JS 相關(guān)問題：
?
l?請(qǐng)解釋事件代理?(event delegation)。
l?請(qǐng)解釋?JavaScript 中?this?是如何工作的。
l?請(qǐng)解釋原型繼承?(prototypal inheritance) 的原理。
l?你怎么看?AMD vs. CommonJS？
l?請(qǐng)解釋為什么接下來(lái)這段代碼不是?IIFE (立即調(diào)用的函數(shù)表達(dá)式)：function foo(){ }();.
l?要做哪些改動(dòng)使它變成?IIFE?
l?描述以下變量的區(qū)別：null，undefined?或?undeclared？
l?該如何檢測(cè)它們？
l?什么是閉包?(closure)，如何使用它，為什么要使用它？
l?請(qǐng)舉出一個(gè)匿名函數(shù)的典型用例？
l?你是如何組織自己的代碼？是使用模塊模式，還是使用經(jīng)典繼承的方法？
l?請(qǐng)指出?JavaScript 宿主對(duì)象 (host objects) 和原生對(duì)象 (native objects) 的區(qū)別？
l?請(qǐng)指出以下代碼的區(qū)別：function Person(){}、var person = Person()、var person = new Person()？
l?.call?和?.apply?的區(qū)別是什么？
l?請(qǐng)解釋?Function.prototype.bind？
l?在什么時(shí)候你會(huì)使用?document.write()？
l?請(qǐng)指出瀏覽器特性檢測(cè)，特性推斷和瀏覽器?UA 字符串嗅探的區(qū)別？
l?請(qǐng)盡可能詳盡的解釋?AJAX 的工作原理。
l?請(qǐng)解釋?JSONP 的工作原理，以及它為什么不是真正的 AJAX。
l?你使用過(guò)?JavaScript 模板系統(tǒng)嗎？
l?如有使用過(guò)，請(qǐng)談?wù)勀愣际褂眠^(guò)哪些庫(kù)？
l?請(qǐng)解釋變量聲明提升?(hoisting)。
l?請(qǐng)描述事件冒泡機(jī)制?(event bubbling)。
l?"attribute" 和 "property" 的區(qū)別是什么？
l?為什么擴(kuò)展?JavaScript 內(nèi)置對(duì)象不是好的做法？
l?請(qǐng)指出?document load 和 document ready 兩個(gè)事件的區(qū)別。
l?==?和?===?有什么不同？
l?請(qǐng)解釋?JavaScript 的同源策略 (same-origin policy)。
l?如何實(shí)現(xiàn)下列代碼：
?
l?[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
l?什么是三元表達(dá)式?(Ternary expression)？“三元 (Ternary)” 表示什么意思？
l?什么是?"use strict"; ? 使用它的好處和壞處分別是什么？
l?請(qǐng)實(shí)現(xiàn)一個(gè)遍歷至?100 的 for loop 循環(huán)，在能被 3 整除時(shí)輸出 "fizz"，在能被 5 整除時(shí)輸出 "buzz"，在能同時(shí)被 3和 5 整除時(shí)輸出 "fizzbuzz"。
l?為何通常會(huì)認(rèn)為保留網(wǎng)站現(xiàn)有的全局作用域?(global scope) 不去改變它，是較好的選擇？
l?為何你會(huì)使用?load 之類的事件 (event)？此事件有缺點(diǎn)嗎？你是否知道其他替代品，以及為何使用它們？
l?請(qǐng)解釋什么是單頁(yè)應(yīng)用?(single page app), 以及如何使其對(duì)搜索引擎友好 (SEO-friendly)。
l?What is the extent of your experience with Promises and/or their polyfills?
l?使用?Promises 而非回調(diào) (callbacks) 優(yōu)缺點(diǎn)是什么？
l?使用一種可以編譯成?JavaScript 的語(yǔ)言來(lái)寫 JavaScript 代碼有哪些優(yōu)缺點(diǎn)？
l?你使用哪些工具和技術(shù)來(lái)調(diào)試?JavaScript 代碼？
l?你會(huì)使用怎樣的語(yǔ)言結(jié)構(gòu)來(lái)遍歷對(duì)象屬性?(object properties) 和數(shù)組內(nèi)容？
l?請(qǐng)解釋可變?(mutable) 和不變 (immutable) 對(duì)象的區(qū)別。
l?請(qǐng)舉出?JavaScript 中一個(gè)不變性對(duì)象 (immutable object) 的例子？
l?不變性?(immutability) 有哪些優(yōu)缺點(diǎn)？
l?如何用你自己的代碼來(lái)實(shí)現(xiàn)不變性?(immutability)？
l?請(qǐng)解釋同步?(synchronous) 和異步 (asynchronous) 函數(shù)的區(qū)別。
l?什么是事件循環(huán)?(event loop)？
l?請(qǐng)問調(diào)用棧?(call stack) 和任務(wù)隊(duì)列 (task queue) 的區(qū)別是什么？
測(cè)試相關(guān)問題：
?
l?對(duì)代碼進(jìn)行測(cè)試的有什么優(yōu)缺點(diǎn)？
l?你會(huì)用什么工具測(cè)試你的代碼功能？
l?單元測(cè)試與功能/集成測(cè)試的區(qū)別是什么？
l?代碼風(fēng)格?linting 工具的作用是什么？
?
效能相關(guān)問題：
?
l?你會(huì)用什么工具來(lái)查找代碼中的性能問題？
l?你會(huì)用什么方式來(lái)增強(qiáng)網(wǎng)站的頁(yè)面滾動(dòng)效能？
l?請(qǐng)解釋?layout、painting 和 compositing 的區(qū)別。
網(wǎng)絡(luò)相關(guān)問題：
?
l?為什么傳統(tǒng)上利用多個(gè)域名來(lái)提供網(wǎng)站資源會(huì)更有效？
l?請(qǐng)盡可能完整得描述從輸入?URL 到整個(gè)網(wǎng)頁(yè)加載完畢及顯示在屏幕上的整個(gè)流程。
?
l?Long-Polling、Websockets 和 Server-Sent Event 之間有什么區(qū)別？
l?請(qǐng)描述以下?request 和 response headers：
l?Diff. between Expires, Date, Age and If-Modified-...
l?Do Not Track
l?Cache-Control
l?Transfer-Encoding
l?ETag
l?X-Frame-Options
?
l?什么是?HTTP action？請(qǐng)羅列出你所知道的所有 HTTP action，并給出解釋。
?
代碼相關(guān)的問題：
?
問題：foo的值是什么？
var foo = 10 + '20';?
//1020
?
問題：如何實(shí)現(xiàn)以下函數(shù)？
?
add(2, 5); // 7
add(2)(5); // 7
?
問題：下面的語(yǔ)句的返回值是什么？
?
"i'm a lasagna hog".split("").reverse().join("");
?//goh angasal a m'i
問題：window.foo的值是什么？
?
( window.foo || ( window.foo = "bar" ) );
?//bar
問題：下面兩個(gè)?alert 的結(jié)果是什么？
?
var foo = "Hello";
(function() {
?var bar = " World"; ?
alert(foo + bar);//Hello?World
})();
alert(foo + bar);//error : bar?is not defined
?
問題：foo.length的值是什么？
?
var foo = [ ];
foo.push(1);
foo.push(2);
?//2
問題：foo.x的值是什么？
?
var foo = {n: 1};
var bar = foo;
foo.x = foo = {n: 2};
?//undefined
問題：下面代碼的輸出是什么？
?
console.log('one');
setTimeout(function() {
?console.log('two');
}, 0);
console.log('three');
?// one?three ?two
趣味問題：
?
l?你最近寫過(guò)什么的很酷的項(xiàng)目嗎？
l?在你使用的開發(fā)工具中，最喜歡哪些方面？
l?你有什么業(yè)余項(xiàng)目嗎？是哪種類型的？
l?你最愛的?IE 特性是什么？
l?你對(duì)咖啡有沒有什么喜好？
?轉(zhuǎn)自：https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/Translations/Chinese
轉(zhuǎn)載于:https://www.cnblogs.com/catherLee/p/10221292.html
總結(jié)
- 上一篇： 微信小程序，实现 watch 属性，监听
- 下一篇： 关于部署传统的Dynamic Web项目