Front-End-Develop-Guide

時間 2019-11-13

標籤 end develop guide 简体版

原文原文鏈接

　　這份文件包含一系列用於面試審查求職者(候選人)的前端面試問題。這並不推薦把每一個問題都問在同一個求職者(由於這會花幾個小時的時間)。從列表中抽取一些問題可以幫助你審查你須要求職者具有的一些技能。html

注: 牢記這裏的許多問題答案是開放式的，可以引導興趣性探討，相比於直接的答案這些東西可以使你更加了解求職者的相關信息。前端

內容表git

<hr/>github

一、經常使用問題web

二、HTML問題面試

三、CSS問題express

四、JS問題數組

五、測試問題瀏覽器

六、性能問題安全

七、網絡問題

八、代碼問題

九、興趣愛好

經常使用問題

你昨天/這周都有學什麼？

是什麼激發讓你對寫代碼感興趣(你喜歡寫代碼的動力是什麼？)？

列舉一項你最近(在項目)中碰到的挑戰，你是如何解決的？

當你在建一個web應用程序或者網站時候，你會考慮哪些方面(UI，安全，性能，SEO，可維護性仍是技術等)

說說你所喜歡的開發環境(OS，IDE...)？

若是你有五個不一樣的樣式表，你怎麼樣最好地整合應用到一個頁面上去呢？

你能描述下漸進加強和優雅降級的區別麼？

怎麼對一個站點（頁面）資源進行優化處理？

瀏覽器從同一個站點一次能下載多少資源？（例外狀況）（不清楚TODO）

　　How many resources will a browser download from a given dom　　ain at a time?
　　What are the exceptions?

說出三條方法去減小頁面加載時間(感知到的或者真是的加載時間)

　　Name 3 ways to decrease page load (perceived or actual load time).

若是你在一個項目中別人都使用tabs而你使用space，你會怎麼作？

描述下你怎麼建立一個簡單的幻燈片播放頁面？

　　Describe how you would create a simple slideshow page.

若是你今年能學習掌握一門技術(語言)，你以爲會是什麼呢？

解釋標準和標準機構的重要性？

　　Explain the importance of standards and standards bodies.

什麼是文檔樣式閃爍(Flash of Unstyled Content)？如何避免

解釋ARIA和screenreaders，怎麼讓一個網站可理解？

　　Explain what ARIA and screenreaders are, and how to make a website accessible.

說下相比於JavaScript動畫實現，CSS的動畫實現有什麼優勢和缺點？

CORS是什麼？它解決什麼問題？
What does CORS stand for and what issue does it address?

HTML問題

doctype的做用？

標準模式和怪異模式的差別？

HTML和XHTML的差別？

像application/xhtml+xml這樣的服務頁面會有什麼問題麼？

你怎麼實現一個頁面的多種語言(切換)?

哪些方面的東西是你在設計和開發多語言網站時必需要當心謹慎考慮到的？

哪些data-的屬性是有效的？

What are data- attributes good for?

HTML5做爲一個開放的Web平臺，HTML5的構建塊是什麼？

Consider HTML5 as an open web platform. What are the building blocks of HTML5?

描述下cookie sessionStorage localStorage的區別？

描述下<script> <script async> <script defer>的區別？

爲何通常老是把CSS link放置於<head></head>，而把script放在</body>前？有什麼例外麼

什麼是漸進渲染？

你以前使用過什麼不一樣的HTML模板語言麼？

Have you used different HTML templating languages before?

CSS問題

CSS中class和ID的區別？

CSS中resetting和normalizing的區別？你會選哪一個，爲何？

描述下float和它的做用原理

描述下z-index以及層疊上下文是怎麼造成的？

描述下BFC(Block Formatting Context)和做用原理？

有哪些清除技術(?)，它們分別適用於什麼上下文環境？

What are the various clearing techniques and which is appropriate for what context?

說下CSS Sprites（CSS壓縮）,怎麼在一個頁面或者站點上實現？

你最喜歡的圖片替換技術，你是在何時用的？

你怎麼着手處理特定的瀏覽器樣式問題（瀏覽器兼容）？

你是怎麼樣讓你你的頁面在一些不支持一些特性的瀏覽器中跑起來的？用什麼樣的技術/處理程序去實現？

How do you serve your pages for feature-constrained browsers?
What techniques/processes do you use?

有哪些方法在視覺上隱藏內容元素（以及讓其僅對screener reader有效？）

What are the different ways to visually hide content (and make it available only for screen readers)?

你用過柵格系統麼，若是用過，喜歡哪種呢？

你用過/實踐過media queries或者mobile specific佈局/CSS?

Have you used or implemented media queries or mobile specific layouts/CSS?

熟悉SVG麼？

怎麼優化web頁面的打印？

一些書寫高效CSS的"gotchas"是什麼？

What are some of the "gotchas" for writing efficient CSS?

CSS預處理器的優勢與缺點？說下你用過的喜歡的和不喜歡的預處理器。

你怎麼實現非標準字體的網頁設計排版？

解釋下瀏覽器是怎麼肯定元素和CSS選擇器匹配起來的？

說一下僞元素與其對應的做用功能？

說一下你對盒模型的理解以及你怎麼讓瀏覽器經過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的區別？

relative fixed absolute以及static來定位元素的區別？

CSS中的C是層疊的意思，對於被指定樣式的優先級是怎麼肯定的呢？（舉一些例子）？你是怎麼樣很好地利用這個機制？

在本地環境或者生產環境中，你用過哪些CSS框架？你是怎麼改進和優化的呢？

What existing CSS frameworks have you used locally, or in production? How would you change/improve them?

你玩過新的CSS Flexbox或是Grid specs?

響應式設計(responsive design)和自適應設計(adaptive design)的區別？

你作過retina graphic（視網膜圖像）的處理麼？是的話，你是用什麼技術的呢？

你在什麼狀況下使用translate()代替absolute positioning絕對定位，反之，爲何？

JS問題

解釋下事件委託？

解釋下this在JavaScript中怎麼工做的（機制）？

解釋下prototypal inheritance原型機城的工做原理？

對於AMD和CommonJS的比較和見解？

解釋下如下代碼爲何不能做爲IIFE(匿名函數自調用)運行

function foo{}();

你須要怎麼改使之成爲一個IIFE？

null undefined undeclared這些變量有什麼區別？怎麼這些檢查變量類型？

什麼是閉包？你是怎麼使用的，爲何使用?

匿名函數典型的應用案例？

你是怎麼組織你的代碼的？（模塊化仍是類型繼承）

宿主對象(host object)和本地對象(native object)的區別

如下代碼有什麼區別？

funciton Person(){};

var person = Person();

var person = new Person();

call和.apply區別？

解釋下Function.prototype.bind?

何時使用document.write()?

feature detection feature inference以及UA String(用戶代理)的區別？

What's the difference between feature detection, feature inference, and using the UA string?

盡你所知地解釋下AJAX？

解釋下JSONP的工做原理（爲何它不算是AJAX）

用過JavaScript Template（模板）麼？若是用過，哪一個庫？

解釋下hosting?

描述下事件冒泡(event bubbling)?

attribute和property的區別？

爲何說擴展內置JavaScript對象(built-in Javascript Object)不是個好主意？

load和document ready事件區別？

==和===的區別？

解釋下關於JavaScript的同源策略(same-origin policy)?

實現以下代碼？

depulicate([1,2,3,4,5]); //[1,2,3,4,5,1,2,3,4,5]

爲何稱之爲Ternary expression(三元表達式/三目運算符？)，Ternary指什麼？

什麼是use strict(使用嚴格模式)？它的優勢和缺點？

for()循環100次，3的倍數輸出fizz，5的倍數輸出buzz，3和5的倍數輸出fizzbuzz?爲何通常來講好的作法是使全局做用域保持原樣而不去改變之。

Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?

爲何你會使用相似於load(功能)的事件？它會有什麼缺點麼？你知道什麼其餘替代方法麼，爲何你用那些替代方法？

解釋下什麼是單頁面應用(a single page app)以及怎麼進行SEO優化（make one SEO-friendly）?

使用Promises以及/或者他們的polyfills的經驗程度？（新技術麼，徹底沒了解）

What is the extent of your experience with Promises and/or their polyfills?

使用Promises代替callbacks的利弊(優缺點)？

編寫一種(其餘)語言編譯成JavaScript的寫法(writing JavaScript code in a language that compiles to JavaScript)有什麼優勢和缺點？

你用什麼技術和工具調試JavaScript代碼？

你使用哪一種語言構造器(language constructions)來重複遍歷對象屬性和數組對象？

解釋下mutable和immutable對象的區別

舉一個JavaScript中immutable對象的例子？immutability的利弊？怎麼用代碼實現immutability?

解釋下同步方法(synchronous function)和異步方法(asynchronous function)的區別？

什麼是event loop?

`call stack`和`take queue`的區別？

測試問題

測試代碼的利弊是什麼？

你用什麼工具來進行代碼功能測試？

單元測試和功能/集成測試的區別？

代碼風格檢查工具(a coding style linting tool)的目的/做用？

性能問題

你用什麼工具去發現檢查代碼中的性能缺陷？

有哪些方法去優化網頁的滾動性能（website's scrolling performance）?

解釋下layout painting以及compositing的區別？

網絡問題

通常來講，爲何多域名指向(服務)一個站點會更好？

Traditionally, why has it been better to serve site assets from multiple domains?

盡你所知解釋下當你在(瀏覽器)輸入域名到加載，到頁面呈現的整個過程？

Long-Polling長輪詢 WebSocket以及Server-Sent Events的區別？

解釋下下列請求和返回頭信息

>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: 如何實現以下函數？

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()結果

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的項目麼？

你手頭喜歡你在用的開發工具中的那些點呢？

有寵物計劃麼？哪一種類型？

喜歡IE的那個特性？

喜歡咖啡麼？

來自：SegmentFault（風捲翻譯）

原文：https://github.com/h5bp/Front-end-Developer-Interview-Questions

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。