常见前端面试题及答案
前言
本文是在GitHub上看到一个大牛总结的前端常见面试题，很多问题问的都很好，很经典、很有代表性。上面没有答案，我就整理了一下，从网上找了一些相关问题的答案。里面有一部分问题的答案我也没有进行考证，不少答案都来源于网络，或许会有疏漏之处，仅供大家参考哦！(还有一部分问题答案还未整理，大家也可以自己搜索一下答案)
1.你能描述一下渐进增强和优雅降级之间的不同吗?
优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.
渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。
2.线程与进程的区别
一个程序至少有一个进程，一个进程至少有一个线程。线程的划分尺度小于进程，使得多线程程序的并发性高。
另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。
3.说说你对语义化的理解？
•1：去掉或样式丢失的时候能让页面呈现清晰的结构：html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。
•2.屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。
•3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）。
•4.有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重。
•6.便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
4.你如何对网站的文件和资源进行优化？
期待的解决方案包括：文件合并文件最小化/文件压缩使用CDN托管缓存的使用（多个域名来提供缓存）其他。
5.为什么利用多个域名来提供网站资源会更有效？
•1.CDN缓存更方便
•2.突破浏览器并发限制（一般每个域名建立的链接不超过6个）
•3.Cookieless，节省带宽，尤其是上行带宽一般比下行要慢
•4.对于UGC的内容和主站隔离，防止不必要的安全问题(上传js窃取主站cookie之类的)。正是这个原因要求用户内容的域名必须不是自己主站的子域名，而是一个完全独立的第三方域名。
•5.数据做了划分，甚至切到了不同的物理集群，通过子域名来分流比较省事。这个可能被用的不多。
PS:关于Cookie的问题，带宽是次要的，安全隔离才是主要的。关于多域名，也不是越多越好，虽然服务器端可以做泛解释，浏览器做dns解释也是耗时间的，而且太多域名，如果要走https的话，还有要多买证书和部署的问题。
6.请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间）
•1.优化图片
•2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）
•3.优化CSS（压缩合并css，如margin-top,margin-left...)
•4.网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）
•5.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）
•6.减少http请求（合并文件，合并图片）。
7.如果你参与到一个项目中，发现他们使用Tab来缩进代码，但是你喜欢空格，你会怎么做？
•建议这个项目使用像EditorConfig(http://editorconfig.org/)之类的规范
•为了保持一致性，接受项目原有的风格
•直接使用VIM的retab命令
8.请写一个简单的幻灯效果页面
如果不使用JS来完成，可以加分。（如：纯CSS实现的幻灯片效果）
9.你都使用哪些工具来测试代码的性能？
Profiler,JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）,Dromaeo。
10.如果今年你打算熟练掌握一项新技术，那会是什么？
nodejs，html5，css3，less等。
11.请谈一下你对网页标准和标准制定机构重要性的理解。
w3c存在的意义就是让浏览器兼容性问题尽量小，首先是他们对浏览器开发者的约束，然后是对开发者的约束。
12.什么是FOUC（无样式内容闪烁）？你如何来避免FOUC？
FOUC(FlashOfUnstyledContent)--文档样式闪烁
<styletype="text/css"media="all">@import"../fouc.css";</style>而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。解决方法简单的出奇，只要在<head>之间加入一个<link>或者<script>元素就可以了。
13.doctype（文档类型）的作用是什么？你知道多少种文档类型？
此标签可告知浏览器文档使用哪种HTML或XHTML规范。该标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML文档。
HTML4.01规定了三种文档类型：Strict、Transitional以及Frameset。
XHTML1.0规定了三种XML文档类型：Strict、Transitional以及Frameset。
Standards（标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
14.浏览器标准模式和怪异模式之间的区别是什么？
W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircksmode和Standarsmode，两种渲染方法共存在一个浏览器上。IE盒子模型和标准W3C盒子模型：ie的width包括：padding\border。标准的width不包括：padding\border
•在js中如何判断当前浏览器正在以何种方式解析？
document对象有个属性compatMode,它有两个值：BackCompat对应quirksmode，CSS1Compat对应strictmode。
15.使用XHTML的局限有哪些？
XHTML与HTML的区别为：
•XHTML元素必须被正确地嵌套。
•XHTML元素必须被关闭。
•标签名必须用小写字母。
•XHTML文档必须拥有根元素。
局限：
所有的XHTML元素都必须被正确地嵌套，XHTML必须拥有良好的结构，所有的标签必须小写，并且所有的XHTML元素必须被关闭。所有的XHTML文档必须拥有DOCTYPE声明，并且html、head、title和body元素必须存在。虽然代码更加的优雅，但缺少容错性，不利于快速开发。
16.如果网页内容需要支持多语言，你会怎么做？
下面这些问题需要考虑：
•应用字符集的选择，选择UTF-8编码
•语言书写习惯&导航结构
•数据库驱动型网站
17.data-属性的作用是什么？
data-*属性用于存储页面或应用程序的私有自定义数据。data-*属性赋予我们在所有HTML元素上嵌入自定义data属性的能力。存储的（自定义）数据能够被页面的JavaScript中利用，以创建更好的用户体验（不进行Ajax调用或服务器端数据库查询）。
data-*属性包括两部分：
•属性名不应该包含任何大写字母，并且在前缀"data-"之后必须有至少一个字符
•属性值可以是任意字符串
18.如果把HTML5看作做一个开放平台，那它的构建模块有哪些？
<nav>,<header>,<section>,<footer>等。
19.请描述一下cookies，sessionStorage和localStorage的区别？
sessionStorage和localStorage是HTML5WebStorageAPI提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的cookies会发送到服务器端。其余两个不会。Microsoft指出InternetExplorer8增加cookie限制为每个域名50个，但IE7似乎也允许每个域名50个cookie。
•Firefox每个域名cookie限制为50个。
•Opera每个域名cookie限制为30个。
•Firefox和Safari允许cookie多达4097个字节，包括名（name）、值（value）和等号。
•Opera允许cookie多达4096个字节，包括：名（name）、值（value）和等号。
•InternetExplorer允许cookie多达4095个字节，包括：名（name）、值（value）和等号。
20.描述下“reset”CSS文件的作用和使用它的好处。
因为浏览器的品种很多，每个浏览器的默认样式也是不同的，所以定义一个cssreset可以使各浏览器的默认样式统一。
21.解释下浮动和它的工作原理。
关于浮动我们需要了解，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。要想使元素浮动，必须为元素设置一个宽度（width）。虽然浮动元素不是文档流之中，但是它浮动后所处的位置依然是在浮动之前的水平方向上。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样，下面的元素填补原来的位置。有些元素会在浮动元素的下方，但是这些元素的内容并不一定会被浮动的元素所遮盖，对内联元素进行定位时，这些元素会考虑浮动元素的边界，会围绕着浮动元素放置。也可以把浮动元素想象成是被块元素忽略的元素，而内联元素会关注浮动元素的。
22.列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。
•1.使用空标签清除浮动。这种方法是在所有浮动标签后面添加一个空标签定义cssclear:both.弊端就是增加了无意义标签。
•2.使用overflow。给包含浮动元素的父标签添加css属性overflow:auto;zoom:1;zoom:1用于兼容IE6。
•3.使用after伪对象清除浮动。该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，content属性的值设为”.”，空亦是可以的。
•4.浮动外部元素
此三种方法各有利弊，使用时应择优选择，比较之下第二种方法更为可取。
23.解释下CSSsprites，以及你要如何在页面或网站中使用它。
CSSSprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
24.你最喜欢的图片替换方法是什么，你如何选择使用。
1<h2><span图片丢这里></span>HelloWorld</h2>
把span背景设成文字内容，这样又可以保证seo，也有图片的效果在上面。一般都是：alt，title，onerror。
25.讨论CSShacks，条件引用或者其他。
各个浏览器都认识，这里给firefox用；
background-color:red\9;\9所有的ie浏览器可识别；
background-color:yellow\0;\0是留给ie8的+background-color:pink;+ie7定了；
_background-color:orange;_专门留给神奇的ie6；:root#test{background-color:purple\9;}:root是给ie9的，
@mediaalland(min-width:0px){#test{background-color:black\0;}}这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。
@mediascreenand(-webkit-min-device-pixel-ratio:0){#test{background-color:gray;}}最后这个是浏览器新贵chrome和safari的。
26.如何为有功能限制的浏览器提供网页？你会使用哪些技术和处理方法？
27.如何视觉隐藏网页内容，只让它们在屏幕阅读器中可用？
•display:none;的缺陷搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略屏幕阅读器（是为视觉上有障碍的人设计的读取屏幕内容的程序）会忽略被隐藏的文字。
•visibility:hidden;的缺陷这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间3.overflow:hidden;一个比较合理的方法.texthidden{display:block;/*统一转化为块级元素*/overflow:hidden;width:0;height:0;}就像上面的一段CSS所展示的方法，将宽度和高度设定为0，然后超过部分隐藏，就会弥补上述一、二方法中的缺陷，也达到了隐藏内容的目的。
28.你用过栅格系统吗？如果使用过，你最喜欢哪种？
比如：Bootstrap，流式栅格系统，http://960.gs/，栅格系统延续美学。
29.你用过媒体查询，或针对移动端的布局/CSS吗？
媒体查询，就是响应式布局。通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。
语法结构及用法：@media设备名only（选取条件）not（选取条件）and（设备选取条件），设备二{sRules}。
示例如下：
/*当浏览器的可视区域小于980px*/
@mediascreenand（max-width：980px）{
#wrap{width：90%;margin:0auto;}
#content{width：60%;padding：5%;}
#sidebar{width：30%;}
#footer{padding：8%5%;margin-bottom：10px;}
}
/*当浏览器的可视区域小于650px*/
@mediascreenand（max-width：650px）{
#header{height：auto;}
#searchform{position：absolute;top：5px;right：0;}
#content{width：auto;float：none;margin：20px0;}
#sidebar{width：100%;float：none;margin：0;}
}
30.你熟悉SVG样式的书写吗？
SVG意为可缩放矢量图形（ScalableVectorGraphics）。
什么是SVG？
•SVG指可伸缩矢量图形(ScalableVectorGraphics)
•SVG用来定义用于网络的基于矢量的图形
•SVG使用XML格式定义图形
•SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失
•SVG是万维网联盟的标准
•SVG与诸如DOM和XSL之类的W3C标准是一个整体
书写示例如下：
<?xmlversion="1.0"standalone="no"?> <!DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svgwidth="100%"height="100%"version="1.1"xmlns="http://www.w3.org/2000/svg"> <circlecx="100"cy="50"r="40"stroke="black"stroke-width="2"fill="red"/> </svg>
31.如何优化网页的打印样式？
<linkrel="stylesheet"type="text/css"media="screen"href="xxx.css"/>
其中media指定的属性就是设备，显示器上就是screen，打印机则是print，电视是tv，投影仪是projection。打印样式示例如下：
<linkrel="stylesheet"type="text/css"media="print"href="yyy.css"/>
但打印样式表也应注意以下事项：
•打印样式表中最好不要用背景图片，因为打印机不能打印CSS中的背景。如要显示图片，请使用html插入到页面中。
•最好不要使用像素作为单位，因为打印样式表要打印出来的会是实物，所以建议使用pt和cm。
•隐藏掉不必要的内容。（@printdiv{display:none;}）
•打印样式表中最好少用浮动属性，因为它们会消失。如果想要知道打印样式表的效果如何，直接在浏览器上选择打印预览就可以了。
32.在书写高效CSS时会有哪些问题需要考虑？
•1.样式是：从右向左的解析一个选择器；
•2.ID最快，Universal最慢有四种类型的keyselector，解析速度由快到慢依次是：ID、class、tag和universal；
•3.不要tag-qualify（永远不要这样做ul#main-navigation{}ID已经是唯一的，不需要Tag来标识，这样做会让选择器变慢。）；
•4.后代选择器最糟糕（换句话说，下面这个选择器是很低效的：htmlbodyullia{}）；
•5.想清楚你为什么这样写；
•6.CSS3的效率问题（CSS3选择器（比如:nth-child）能够漂亮的定位我们想要的元素，又能保证我们的CSS整洁易读。但是这些神奇的选择器会浪费很多的浏览器资源。）；
•7.我们知道#ID速度是最快的，那么我们都用ID，是不是很快。但是我们不应该为了效率而牺牲可读性和可维护性。
33.使用CSS预处理器的优缺点有哪些？
LESS&SassLESS是受Sass启发而开发的工具，它列出了如下开发的理由：
“为什么要开发一个Sass的替代品呢？原因很简单：首先是语法。Sass的一个关键特性是缩进式的语法，这种语法可以产生柱式外观的代码。但是你需要花费时间学习一门新的语法以及重新构建你现在的样式表。LESS给CSS带来了很多特性，使得LESS能够和CSS无缝地紧密结合在一起。因此，你可以平滑地由CSS迁移到LESS，如果你只是对使用变量或者操作感兴趣的话，你不需要学习一整门全新的语言。”
StylusStylus相对前两者较新，可以看官方文档介绍的功能。
•1.来自NodeJS社区，所以和NodeJS走得很近，与JavaScript联系非常紧密。还有专门JavaScriptAPI：http://learnboost.github.io/stylus/docs/js.html；
•2.支持Ruby之类等等框架；
•3.更多更强大的支持和功能总结：Sass看起来在提供的特性上占有优势，但是LESS能够让开发者平滑地从现存CSS文件过渡到LESS，而不需要像Sass那样需要将CSS文件转换成Sass格式。Stylus功能上更为强壮，和js联系更加紧密。
34.如果设计中使用了非标准的字体，你该如何去实现？
所谓的标准字体是多数机器上都会有的，或者即使没有也可以由默认字体替代的字体。
方法：
•用图片代替
•webfonts在线字库，如GoogleWebfonts，Typekit等等；；
•@font-face，Webfonts(字体服务例如：GoogleWebfonts，Typekit等等。)
35.解释下浏览器是如何判断元素是否匹配某个CSS选择器？
从后往前判断。浏览器先产生一个元素集合，这个集合往往由最后一个部分的索引产生（如果没有索引就是所有元素的集合）。然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，直到真个选择器都匹配完，还在集合中的元素就匹配这个选择器了。举个例子，有选择器：
1body.ready#wrapper>.lol233
先把所有class中有lol233的元素拿出来组成一个集合，然后上一层，对每一个集合中的元素，如果元素的parentid不为#wrapper则把元素从集合中删去。再向上，从这个元素的父元素开始向上找，没有找到一个tagName为body且class中有ready的元素，就把原来的元素从集合中删去。至此这个选择器匹配结束，所有还在集合中的元素满足。大体就是这样，不过浏览器还会有一些奇怪的优化。为什么从后往前匹配因为效率和文档流的解析方向。效率不必说，找元素的父亲和之前的兄弟比遍历所哟儿子快而且方便。关于文档流的解析方向，是因为现在的CSS，一个元素只要确定了这个元素在文档流之前出现过的所有元素，就能确定他的匹配情况。应用在即使html没有载入完成，浏览器也能根据已经载入的这一部分信息完全确定出现过的元素的属性。为什么是用集合主要也还是效率。基于CSSRule数量远远小于元素数量的假设和索引的运用，遍历每一条CSSRule通过集合筛选，比遍历每一个元素再遍历每一条Rule匹配要快得多。
36.解释一下你对盒模型的理解，以及如何在CSS中告诉浏览器使用不同的盒模型来渲染你的布局。
关于盒模型请看文章