19年面試總結

常見問題:html

 

l 編寫代碼的哪些方面可以使你興奮或感興趣?git

l 你最近遇到過什麼技術挑戰?你是如何解決的?github

l 在製做一個網頁應用或網站的過程當中,你是如何考慮其 UI、安全性、高性能、SEO、可維護性以及技術因素的?express

l 請談談你喜歡的開發環境。數組

l 你最熟悉哪一套版本控制系統?瀏覽器

l 你能描述當你製做一個網頁的工做流程嗎?安全

l 倘若你有 5 個不一樣的樣式文件 (stylesheets), 整合進網站的最好方式是?服務器

l 你能描述漸進加強 (progressive enhancement) 和優雅降級 (graceful degradation) 之間的不一樣嗎?cookie

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

相關文章
相關標籤/搜索