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