[译]Front-end-Developer-Interview-Questions

时间 2019-12-12

标签 end developer interview questions 繁體版

原文原文链接

翻译自Front-end-Developer-Interview-Questions
对于有些不肯定的翻译其下面给出原文。javascript

这份文件包含一系列用于面试审查求职者(候选人)的前端面试问题。这并不推荐把每一个问题都问在同一个求职者(由于这会花几个小时的时间)。从列表中抽取一些问题可以帮助你审查你须要求职者具有的一些技能。html

注: 牢记这里的许多问题答案是开放式的，可以引导兴趣性探讨，相比于直接的答案这些东西可以使你更加了解求职者的相关信息。前端

内容表

<hr/>html5

经常使用问题java
HTML问题git
CSS问题es6
JS问题github
测试问题web
性能问题面试
网络问题
代码问题
兴趣爱好

经常使用问题

你昨天/这周都有学什么？
是什么激发让你对写代码感兴趣(你喜欢写代码的动力是什么？)？
列举一项你最近(在项目)中碰到的挑战，你是如何解决的？
当你在建一个web应用程序或者网站时候，你会考虑哪些方面(UI，安全，性能，SEO，可维护性仍是技术等)
说说你所喜欢的开发环境(OS，IDE...)？
若是你有五个不一样的样式表，你怎么样最好地整合应用到一个页面上去呢？
你能描述下渐进加强和优雅降级的区别么？
怎么对一个站点（页面）资源进行优化处理？
浏览器从同一个站点一次能下载多少资源？（例外状况）（不清楚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，你会怎么作？
描述下你怎么建立一个简单的幻灯片播放页面？
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的那个特性？
喜欢咖啡么？

贡献者

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.