原文地址:http://handyxuefeng.blog.163.com/blog/static/454521722013111714040259/
http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/
http://rmurphey.com/
备注: 本 repo 包含了一些前端面试问题用于考查候选者。不建议对单个候选者问及每个问题(那需要好几个小时)。只要从列表里挑选一些,就能帮助你考查候选者是否具备所需要的技能了。
Rebecca Murphey 的 Baseline For Front-End Developers 是你在准备面试前应该阅读的绝佳资源。
记住: 很多问题都是开放的,可以引发有趣的讨论。这比直接的答案更能体现此人的能力。
[最初的贡献者](#contributors
[常见问题](#general
[HTML 相关问题](#html
[CSS 相关问题](#css
[JS 相关问题](#js
[jQuery 相关问题](#jquery
[需编写代码的问题](#jscode
备注: 大部分面试题来自于 Paul Irish (@paul_irish) 在 oksoclap 创建的某个帖子和以下个人提供:
@bentruyman - http://bentruyman.co
@cowboy - http://benalman.co
@ajpiano - http://ajpiano.co
@SlexAxton - http://alexsexton.co
@boazsender - http://boazsender.co
@miketaylr - http://miketaylr.co
@vladikoff - http://vladfilippov.co
@gf3 - http://gf3.c
@jon_neal - http://twitter.com/jon_nea
@wookiehangover - http://wookiehangover.co
@iansym - http://twitter.com/iansym
你在昨天/本周学到了什么?
编写代码的哪些方面能够使你兴奋或感兴趣?
谈谈你喜欢的开发环境。(例如操作系统,编辑器,浏览器,工具等等。)
你能描述一下当你制作一个网页的工作流程吗?
你能描述一下渐进增强和优雅降级之间的不同吗?
答案:
何为渐进增强、优雅降级
常用两种策略:要么优雅降级(graceful degradation,一开始就构建站点的完整功能,然后针对浏览器测试和修复),要么渐进增强(progressive enhancement,一开始只构建站点的最少特性,然后不断针对各浏览器追加功能。
万一你正挠着后脑勺,试图找出“优雅降级”和“渐进增强”之间的差别,那么我可以告诉你:“它们是看待同种事物的两种观点”。“优雅降级”和“渐进 增强”都关注于同一网站在不同设备里不同浏览器下的表现程度。关键的区别则在于它们各自关注于何处,以及这种关注如何影响工作的流程。
请解释一下什么是“语义化的 HTML”。
答案:分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。一个 XHTML 元素的存在就意味被标记内容的那部分有相应的结构化的意义,没有理由使用其他的标记。换句话说,不要让 CSS 使一个 HTML 元素看起来就像另一个 HTML 元素,比如用<div>来代替<p>标记标题。
首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用tag的表现形式,个人认为他的主要目的就是让大家直观的 认识标签(markup)和属性(attribute)的用途和作用,很明显Hx系列看起来很像标题,因为拥有粗体和较大的字 号。<strong>,<em>用来区别于其他文字,起到了强调的作用。至于列表和表格很明显的告诉你他们是做什么的。
其次,语义化的网页的好处,最主要的就是对搜索引擎友好,又了良好的结构和语义你的网页内容自然容易被搜索引擎抓取,你网站的推广便可以省下不少的功夫。
你如何对网站的文件和资源进行优化?
期待的解决方案包括:
* 文件合
文件最小化/文件压
使用 CDN 托
缓存的使
其
为什么利用多个域名来提供网站资源会更有效?
请说出三种减少页面加载时间的方法。(加载时间指感知的时间或者实际加载时间)
如果你参与到一个项目中,发现他们使用 Tab 来缩进代码,但是你喜欢空格,你会怎么做?
建议这个项目使用像 EditorConfig (http://editorconfig.org/) 之类的规
为了保持一致性,接受项目原有的风
直接使用 VIM 的 retab 命
请写一个简单的幻灯效果页面
使用打了CSS3
你都使用哪些工具来测试代码的性能?
如果今年你打算熟练掌握一项新技术,那会是什么?
请谈一下你对网页标准和标准制定机构重要性的理解。
什么是 FOUC(无样式内容闪烁)?你如何来避免 FOUC?
什么是FOUC(文档样式短暂失效)?
如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet
Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled
Content),简称为FOUC。
原因大致为:
1,使用import方法导入样式表。
2,将样式表放在页面底部
3,有几个样式表,放在html结构的不同位置。
其实原理很清楚:当样式表晚于结构性html加载,当加载到此样式表时,页面将停止之前的渲染。此样式表被下载和解析后,将重新渲染页面,也就出现了短暂的花屏现象。
解决方法:
使用LINK标签将样式表放在文档HEAD中。
doctype
(文档类型)的作用是什么?你知道多少种文档类型?
1、doctype(文档类型)的作用是什么?
doctype是DocumentType的简称即文档类型,doctype声明位于文档中最前面的位置,处于标签之前,告知浏览器使用的是哪种规范。
2、你知道多少种文档类型?
常见的文档类型有 Strict、Transitional 以及 Frameset 三种。
3、文档为什么要分类型?
如果文档不分类型,各浏览器就会形成多种写法,假如IE用<title>标签作为标题、火狐浏览器用<caption>标签作为标题,而另一种浏览器可能采用<mytitle>,这对于开发者和用户来说简直是灾难。W3C(万 维网联盟World Wide Web Consortium)制作了对所有方面都平衡的分歧解决方案,并且各浏览器没有异议,于是用<!doctype>(注意:作为一个特殊的标 签,它是不需要闭合的)标签来引入W3C的dtd文件,以达到规范页面的效果。这为浏览器的文档标准的统一以及开发人员和用户带了了便利。而html5不是基于SGML实现的,因此html不需要引入DTD,所以html5可以简单的声明一下<!doctype html>。
4、如果不声明doctype?
不写doctype,浏览器会进入quirks mode (混杂模式)。即,如果不声明doctype,浏览器不引入w3c的标准,那么早期的浏览器会按照自己的解析方式渲染页面。浏览器采用自身方式解析页面的行为称为"quirks mode(混杂模式也称怪异模式)";采用w3c方式解析就是"strict mode(标准模式)"。 如果完全采用strictmode就不会出任何的差错,但这样会降低程序的容错率,加重开发人员的难度,因此在standards mode 里面分出来 Almost Standards Mode(接近标准模式)。如图所示:
5、如何判断浏览使用哪种方式解析css?
没有doctype声明的采用quirks mode解析,对于有doctype的大多数采用standard mord。特殊情况:对于那些浏览器不能识别的doctype ,浏览器采用quirks mode;没有声明DTD或者html版本声明低于4.0采用quirks mode,其他使用standard mode;ie6中,如果在doctype声明前有一个xml声明(比如:<?xml version="1.0" encoding="iso-8859-1"?>),则采用quirks mode解析。
6、浏览器标准模式和怪异模式之间的区别是什么?
标准模式:浏览器根据规范呈现页面混杂模式(怪异模式):页面以一种比较宽松的兼容方式显示。
他们最大的不同是对盒模型的解析。
如:在strict mode中 :width是内容宽度 ,也就是说,元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width + margin-right;
在quirks mode中 :width则是元素的实际宽度 ,内容宽度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)
7、js如何判断浏览器正在以何种方式解析?
使用 document.compatMode来判断浏览器的解析方式。
例如:
function getMode{ var _cm = docoment.compatMode; if(_cm == 'CSS1Compat'){ return "strict" } if(_cm == 'BackCompat' ){ return 'quirks' } }
8、何时使用document.body 何时使用document.documentElement?
在quirks 模式下,document.documentElement无法正确取到clietHeight scrollHeight等值,比如clietHeight=0,此时计算页面高度的时候需要用document.body来代替document.documentElement.
document.body是 DOM中Document对象里的body节点, document.documentElement是文档对象根节点(html)的引用。 document.body.scrollHeight是 body元素的滚动高度,document.documentElement.scrollHeight为页面的滚动高度。浏览器标准模式和怪异模式之间的区别是什么?
混杂模式(怪异模式):页面以一种比较宽松的兼容方式显示。
他们最大的不同是对盒模型的解析。
如:在strict mode中 :width是内容宽度 ,也就是说,元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width + margin-right;
在quirks mode中 :width则是元素的实际宽度 ,内容宽度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)
使用 XHTML 的局限有哪些?
答案:A:XHTML较为严格,标签必须闭合,必须要body,head等
如果页面使用 'application/xhtml+xml' 会有什么问题吗
如果网页内容需要支持多语言,你会怎么做?
答案:采用统一编码UTF-8模式
在设计和开发多语言网站时,有哪些问题你必须要考虑
data-
属性的作用是什么?
Resig在2008年在其博客中介绍过HTML5的data-属性,现如今HTML5在如火如荼地推广,似乎国内的技术有些延迟,这篇博文可以在这里找到。
data-为前端开发者提供自定义的属性,这些属性集可以通过对象的dataset属性获取,不支持该属性的浏览器可以通过 getAttribute方法获取。ppk提到过使用rel属性,lightbox库推广了rel属性,HTML5提供了data-做替代,这样可以更好 地使用自定义的属性。
需要注意的是,data-之后的以连字符分割的多个单词组成的属性,获取的时候使用驼峰风格。
并不是所有的浏览器都支持.dataset属性,测试的浏览器中只有Chrome和Opera支持
如果把 HTML5 看作做一个开放平台,那它的构建模块有哪些?
请描述一下 cookies,sessionStorage 和 localStorage 的区别?
描述下 “reset” CSS 文件的作用和使用它的好处。
解释下浮动和它的工作原理。
列举不同的清除浮动的技巧,并指出它们各自适用的使用场景。
解释下 CSS sprites,以及你要如何在页面或网站中使用它。
你最喜欢的图片替换方法是什么,你如何选择使用。
讨论CSS hacks,条件引用或者其他。
如何为有功能限制的浏览器提供网页?
如何视觉隐藏网页内容,只让它们在屏幕阅读器中可用?
你用过栅格系统吗?如果使用过,你最喜欢哪种?
你用过媒体查询,或针对移动端的布局/CSS 吗?
你熟悉 SVG 样式的书写吗?
如何优化网页的打印样式?
在书写高效 CSS 时会有哪些问题需要考虑?
使用 CSS 预处理器的优缺点有哪些?(SASS,Compass,Stylus,LESS)
如果设计中使用了非标准的字体,你该如何去实现?
解释下浏览器是如何判断元素是否匹配某个 CSS 选择器?
解释一下你对盒模型的理解,以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。
解释下事件代理。
解释下 JavaScript 中 this
是如何工作的。
解释下原型继承的原理。
AMD vs. CommonJS?
参考答案: AMD是依赖提前加载,CMD是依赖延时加载
什么是哈希表?
解释下为什么接下来这段代码不是 IIFE(立即调用的函数表达式):function foo(){ }();
.
描述以下变量的区别:null
,undefined
或 undeclared
?
什么是闭包,如何使用它,为什么要使用它?
请举出一个匿名函数的典型用例?
解释 “JavaScript 模块模式” 以及你在何时使用它。
如果有提到无污染的命名空间,可以考虑加分
如果你的模块没有自己的命名空间会怎么样
你是如何组织自己的代码?是使用模块模式,还是使用经典继承的方法?
请指出 JavaScript 宿主对象和原生对象的区别?
指出下列代码的区别: `javascrip
function Person()
some cod
}var person = Person();var person = new Person();`
.call
和 .apply
的区别是什么?
undefined
和 null
的区别是什么?
请解释 Function.prototype.bind
的作用?
你何时优化自己的代码?
你能解释一下 JavaScript 中的继承是如何工作的吗?
在什么时候你会使用 document.write()
?
document.write()
,虽然这种用法会让人很不爽请指出浏览器特性检测,特性推断和浏览器 UA 字符串嗅探的区别?
请尽可能详尽的解释 AJAX 的工作原理。
请解释 JSONP 的工作原理,以及它为什么不是真正的 AJAX。
你使用过 JavaScript 模板系统吗?
请解释变量声明提升。
请描述下事件冒泡机制。
"attribute" 和 "property" 的区别是什么?
为什么扩展 JavaScript 内置对象不是好的做法?
为什么扩展 JavaScript 内置对象是好的做法?
请指出 document load 和 document ready 两个事件的区别。
==
和 ===
有什么不同?
你如何从浏览器的 URL 中获取查询字符串参数。
请解释一下 JavaScript 的同源策略。
请描述一下 JavaScript 的继承模式。
如何实现下列代码: `javascrip
[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]`
描述一种 JavaScript 中实现 memoization(避免重复运算)的策略。
什么是三元表达式?“三元” 表示什么意思?
函数的参数元是什么?
什么是 "use strict";
? 使用它的好处和坏处分别是什么?
解释"chaining"。
函数中的链式结构,如$().().()
解释"deferreds"。 延迟执行,减少回调函数的嵌套
你知道哪些针对 jQuery 的优化方法。
参考答案:(1) 用ID选择器 (2) 缓存jquery对象,方便后面使用。(3)使用data缓存数据.
请解释 .end()
的用途。.
参考答案:<div id="test">
<h1>jQuery end()方法</h1>
<p>讲解jQuery中end()方法。</p>
</div>
JS代码:
$(document).ready(function() {
$("#test").click(function() {
$(this).find("p").hide().end().hide();
});
});
点击id为test的div时,首先找到div里边的p标签,将其隐藏。接下来使用end()方法结束了对p标签的引用,此时返回的是#test(jQuery对象),从而后边的hide()方法隐藏了div。这样相信大家已经理解了jQuery中end()方法。
你如何给一个事件处理函数命名空间,为什么要这样做?
请说出你可以传递给 jQuery 方法的四种不同值。
什么是效果队列?
请指出 .get()
,[]
,eq()
的区别。
参考答案:<p style="color:yellow">绯雨</p>
使用eq来获得第一个p标签的color值:
$("p").eq(0).css("color") //因为eq(num)返回的是个jq对象,所以可以用jq的方法css
使用get来获得第一个p标签的color值:
$("p").get(0).style.color //因为get(num)返回的是个html对象,所以要使用传统的HTML对象方法,jq对象此时就没用了。
当然,你也可以get(num)后把对象转为jq的对象再进行操作:
$($("p").get(0)).css("color")
请指出 .bind()
,.live()
和 .delegate()
的区别。
请指出 $
和 $.fn
的区别,或者说出 $.fn
的用途。
请优化下列选择器: `javascrip
$(".foo div#bar:eq(0)")`
`javascrip
~~3.14`
问题:上面语句的返回值是什么? 答案:3
`javascrip
"i'm a lasagna hog".split("").reverse().join("");`
问题:上面的语句的返回值是什么? 答案:"goh angasal a m'i"
`javascrip
( window.foo || ( window.foo = "bar" ) );`
问题:window.foo 的值是什么? 答案:"bar" 只有 window.foo 为假时的才是上面答案,否则就是它本身的值。
`javascrip
var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);`
问题:上面两个 alert 的结果是什么 答案: "Hello World" 和 ReferenceError: bar is not defined
`javascrip
var foo = []
foo.push(1)
foo.push(2);`
问题:foo.length 的值是什么? 答案:2
`javascrip
var foo = {}
foo.bar = 'hello';`
问题:foo.length 的值是什么? 答案: undefined
你编写过的最酷的代码是什么?其中你最自豪的是什么?
在你使用过的开发工具中,最喜欢哪个?
你有什么业余项目吗?是哪种类型的?
你最爱的 IE 特性是什么?
你是否正在或曾经在一艘船上。(不懂这个幽默)
这句话是直译。在英语里
ship
有一个很重要的意思是交付
,所以这句话可以理解为:你是否正在或曾经交付过产品?(也就是正在一个产品项目的开发过程中,或是已经交付过开发完成的产品或项
独角兽是西方文化中非常普遍的一种吉祥物图腾,类似于中国的龙凤麒麟一类。在西方,开发者常使用独角兽 + 彩虹的设计风格来生成一些装饰用的图像/动画,这些东西可以用来对网站进行一种美化。然而是否真的算美化那就见仁见智了,可以仅仅看做是一种人文文化在开 发者世界里的影射
在一张纸上,垂直写下ABCDE,然后不用任何代码,将他们到序排列。
海盗还是忍者?
海盗与忍者之争是互联网文化“动漫化”的标志性话题。首先,它们都很酷,都深受 Geeks 的喜爱,然而他们却各自代表了一种不同的风格。海盗是西式的,崇尚“工具化”,刀剑和枪炮是他们称霸的依仗;忍者则是东方文化的典型,更注重精神和内在的 修行,摒弃“外物依赖”。对于开发者而言,二者的结合当然是最完美的。至于僵尸猴子,大概是说不拘泥于“外物”和“内在”之争,更加开放,更加包容的意 思。
如果没有在Web开发,你会做什么?
卡门圣迭哥的隐藏处在哪里?
完句填空: Brendan Eich和Douglas Crockford是JavaScript的__。
讨论:jQuery是牛逼的库还是最牛逼的库。