Front-end-Developer-Interview-Questions

2024年5月24日 207次阅读来源: King

https://github.com/darcyclarke/Front-end-Developer-Interview-Questions

前端事情口试题目

备注: 本 repo 包含了一些前端口试题目用于考核候选者。不发起对单个候选者问及每一个题目（那需要好几个小时）。只要从列内外遴选一些，就可以协助你考核候选者是不是具有所需要的妙技了。

Rebecca Murphey 的 Baseline For Front-End Developers 是你在预备口试前应当浏览的绝佳资本。

记着： 许多题目都是开放的，可以激发风趣的议论。这比直接的答案更能表现这人的才能。

@bentruyman – http://bentruyman.com
@cowboy – http://benalman.com
@ajpiano – http://ajpiano.com
@SlexAxton – http://alexsexton.com
@boazsender – http://boazsender.com
@miketaylr – http://miketaylr.com
@vladikoff – http://vladfilippov.com
@gf3 – http://gf3.ca
@jon_neal – http://twitter.com/jon_neal
@wookiehangover – http://wookiehangover.com
@darcy_clarke – http://darcyclarke.me
@iansym

[⬆] 常见题目：

你在昨天/本周学到了什么？
编写代码的哪些方面可以使你高兴或感兴趣？
在制造一个Web运用或Web站点的过程当中，你是怎样斟酌他的UI、安全性、高机能、SEO、可维护性以及手艺要素的？
谈谈你喜好的开辟环境。(比方操作体系，编辑器，浏览器，东西等等。)
你最熟习哪一套版本控制体系？
你能形貌一下当你制造一个网页的事情流程吗？
你能形貌一下渐进加强和文雅降级之间的差别吗?
- 假如提到了特征检测，可以加分。
请诠释一下什么是“语义化的 HTML”。
你怎样对网站的文件和资本举行优化？
- 期待的解决方案包含：
  - 文件兼并
  - 文件最小化/文件紧缩
  - 运用 CDN 托管
  - 缓存的运用
  - 其他
为何应用多个域名来供应网站资本会更有用？
- 浏览器同一时候可以从一个域名下载若干资本？
请说出三种削减页面加载时候的要领。（加载时候指感知的时候或许现实加载时候）
假如你介入到一个项目中，发明他们运用 Tab 来缩进代码，然则你喜好空格，你会怎么做？
- 发起这个项目运用像 EditorConfig (http://editorconfig.org/) 之类的范例
- 为了坚持一致性，接收项目原有的作风
- 直接运用 VIM 的 retab 敕令
请写一个简朴的幻灯效果页面
- 假如不运用JS来完成，可以加分。
你都运用哪些东西来测试代码的机能？
- Profiler, JSPerf, Dromaeo
假如本年你盘算熟练掌握一项新手艺，那会是什么？
Long-Polling, Websockets, SSE(Server-Sent Event) 之间有什么区分？
请谈一下你对网页规范和规范制订机构重要性的明白。
什么是 FOUC（无款式内容闪灼）？你怎样来防止 FOUC？
请尽量完整得形貌下从输入URL到悉数网页加载终了及显现在屏幕上的悉数流程

[⬆] HTML相干题目：

doctype（文档范例）的作用是什么？
浏览器规范形式和奇异形式之间的区分是什么？
运用 XHTML 的范围有哪些？
- 假如页面运用 ‘application/xhtml+xml’ 会有什么题目吗？
假如网页内容需要支撑多语言，你会怎么做？
- 在设想和开辟多语言网站时，有哪些题目你必需要斟酌？
data-属性的作用是什么？
假如把 HTML5 看做做一个开放平台，那它的构建模块有哪些？
请形貌一下 cookies，sessionStorage 和 localStorage 的区分？
请形貌一下 GET 和 POST 的区分?

[⬆] CSS 相干题目：

形貌下 “reset” CSS 文件的作用和运用它的优点。
诠释下浮动和它的事情道理。
枚举差别的消灭浮动的技能，并指出它们各自实用的运用场景。
诠释下 CSS sprites，以及你要怎样在页面或网站中运用它。
你最喜好的图片替代要领是什么，你怎样挑选运用。
议论CSS hacks，前提援用或许其他。
怎样为有功用限定的浏览器供应网页？
- 你会运用哪些手艺和处置惩罚要领？
有哪些的隐蔽内容的要领（假如同时还要保证屏幕浏览器可用呢？）
你用过栅格体系吗？假如运用过，你最喜好哪一种？
你用过媒体查询，或针对挪动端的规划/CSS 吗？
你熟习 SVG 款式的誊写吗？
怎样优化网页的打印款式？
在誊写高效 CSS 时会有哪些题目需要斟酌？
运用 CSS 预处置惩罚器的优缺点有哪些？(SASS，Compass，Stylus，LESS)
- 形貌下你曾运用过的 CSS 预处置惩罚的优缺点。
假如设想中运用了非规范的字体，你该怎样去完成？
- Webfonts (字体效劳比方：Google Webfonts，Typekit 等等。)
诠释下浏览器是怎样揣摸元素是不是婚配某个 CSS 挑选器？
诠释一下你对盒模子的明白，以及怎样在 CSS 中通知浏览器运用差别的盒模子来衬着你的规划。
请诠释一下 * { box-sizing: border-box; } 的作用, 而且申明运用它有什么优点？
请罗列出你所晓得的 display 属性的悉数值
请诠释一下 inline 和 inline-block 的区分？
请诠释一下 relative、fixed、absolute 和 static 元素的区分
你现在在运用哪一套CSS框架，或许在产品线上运用过哪一套？(Bootstrap, PureCSS, Foundation 等等)
- 假若有，叨教是哪一套？假如可以，你怎样改良CSS框架？
叨教你有运用过 CSS Flexbox 或许 Grid specs 吗？
- 假若有，叨教在机能和效力的方面你是怎么看的？

[⬆] JS相干题目：

诠释下事宜代办。
诠释下 JavaScript 中 this 是怎样事情的。
诠释下原型继续的道理。
你是怎样测试JavaScript代码的？
AMD vs. CommonJS？
什么是哈希表？
诠释下为何接下来这段代码不是 IIFE(马上挪用的函数表达式)：function foo(){ }();.
- 要做哪些修改使它变成 IIFE?
形貌以下变量的区分：null，undefined 或 undeclared？
- 该怎样检测它们？
什么是闭包，怎样运用它，为何要运用它？
请举出一个匿名函数的典范用例？
诠释 “JavaScript 模块形式” 以及你在什么时候运用它。
- 假若有提到无污染的定名空间，可以斟酌加分。
- 假如你的模块没有本身的定名空间会怎样？
你是怎样构造本身的代码？是运用模块形式，照样运用典范继续的要领？
请指出 JavaScript 宿主对象和原生对象的区分？
指出以下代码的区分：

function Person(){} 
var person = Person(); 
var person = new Person();

.call 和 .apply 的区分是什么？
请诠释 Function.prototype.bind 的作用？
你什么时候优化本身的代码？
你能诠释一下 JavaScript 中的继续是怎样事情的吗？
在什么时候你会运用 document.write()？
- 大多数天生的广告代码照旧运用 document.write()，虽然这类用法会让人很不爽。
请指出浏览器特征检测，特征揣摸和浏览器 UA 字符串嗅探的区分？
请尽量详实的诠释 AJAX 的事情道理。
请诠释 JSONP 的事情道理，以及它为何不是真正的 AJAX。
你运用过 JavaScript 模板体系吗？
- 若有运用过，请谈谈你都运用过哪些库，比方 Mustache.js，Handlebars 等等。
请诠释变量声明提拔。
请形貌下事宜冒泡机制。
“attribute” 和 “property” 的区分是什么？
为何扩大 JavaScript 内置对象不是好的做法？
为何扩大 JavaScript 内置对象是好的做法？
请指出 document load 和 document ready 两个事宜的区分。
== 和 === 有什么差别？
你怎样从浏览器的 URL 中猎取查询字符串参数。
请诠释一下 JavaScript 的同源战略。
请形貌一下 JavaScript 的继续形式。
怎样完成以下代码：

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

形貌一种 JavaScript 中完成 memoization(防止反复运算)的战略。
什么是三元表达式？“三元” 示意什么意思？
函数的参数元是什么？
什么是 "use strict"; ? 运用它的优点和害处离别是什么？

[⬆] jQuery 相干题目：

诠释”chaining”。
诠释”deferreds”。
你晓得哪些针对 jQuery 的优化要领。
请诠释 .end() 的用处。
你怎样给一个事宜处置惩罚函数定名空间，为何要如许做？
请说出你可以传递给 jQuery 要领的四种差别值。
- 挑选器（字符串），HTML（字符串），回调函数，HTML元素，对象，数组，元素数组，jQuery对象等。
什么是效果行列？
请指出 .get()，[]，eq() 的区分。
请指出 .bind()，.live() 和 .delegate() 的区分。
请指出 $ 和 $.fn 的区分，或许说出 $.fn 的用处。
请优化以下挑选器：

$(".foo div#bar:eq(0)")

[⬆] 代码相干的题目：

modulo(12, 5) // 2

题目：完成满足上述效果的modulo函数

"i'm a lasagna hog".split("").reverse().join("");

题目：上面的语句的返回值是什么？
答案：”goh angasal a m’i”

( window.foo || ( window.foo = "bar" ) );

题目：window.foo 的值是什么？
答案：”bar”
只要 window.foo 为假时的才是上面答案，不然就是它本身的值。

var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);

题目：上面两个 alert 的效果是什么
答案: “Hello World” 和 ReferenceError: bar is not defined

var foo = [];
foo.push(1);
foo.push(2);

题目：foo.length 的值是什么？
答案：2

[⬆] 风趣的题目：

你编写过的最酷的代码是什么？个中你最骄傲的是什么？
在你运用过的开辟东西中，最喜好哪一个？
你有什么业余项目吗？是哪一种范例的？
你最爱的 IE 特征是什么？

[⬆] 其他参考资料：

    原文作者：King
    原文地址: https://segmentfault.com/a/1190000000589784
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

算法网