前端开发面试题及答案
一、你能描述一下渐进增强和优雅降级之间的不同吗?
如果提到了特性检测，可以加分。
检测浏览器，渐进增强就是让牛b的浏览器的效果更好，优雅降级就是让2b的浏览器在功能ok的情况下效果一般。
二、线程与进程的区别
一个程序至少有一个进程,一个进程至少有一个线程.
线程的划分尺度小于进程，使得多线程程序的并发性高。
另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。
三、请解释一下什么是“语义化的 HTML”。
语义化的好处：1：去掉或样式丢失的时候能让页面呈现清晰的结构：
html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。
2.屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.
3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）.
4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.
5.你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.
6.便于团队开发和维护
语义化的HTML就是：标题用h1-h6，文字段落用p，列表用ul li，大致如此
四、你如何对网站的文件和资源进行优化？
期待的解决方案包括：
文件合并
文件最小化/文件压缩
使用 CDN 托管
缓存的使用（多个域名来提供缓存）
其他
五、为什么利用多个域名来提供网站资源会更有效？
浏览器同一时间可以从一个域名下载多少资源？
你的浏览器能同时保持对一个域名的多少连接？
显示当前主要浏览的这个参数限制：
| Browser | Max Connections / Host |
| Chrome 1.0 | 6 |
| Chrome 2.0 | 6 |
| Firefox 3.0 | 6 |
| Firefox 3.5 | 6 |
| IE 6 | 2 |
| IE 7 | 2 |
| IE 8 | 6 |
| Safari 3.2 | 4 |
| Safari 4.0 | 4 |
更多详情：浏览器默认的并发数限制
三个最主流的原因:
1. CDN缓存更方便
2. 突破浏览器并发限制 (你随便挑一个 G家的 url: https://lh4.googleusercontent.com/- si4dh2myPWk/T81YkSi__AI/AAAAAAAAQ5o/LlwbBRpp58Q/w497-h373/IMG_20120603_163233.jpg, 把前面的 lh4换成 lh3,lh6 啥的，都照样能够访问，像地图之类的需要大量并发下载图片的站点，这个非常重要。)
3. Cookieless, 节省带宽，尤其是上行带宽 一般比下行要慢。。。
还有另外两个非常规原因:
4. 对于UGC的内容和主站隔离，防止不必要的安全问题( 上传js窃取主站cookie之类的) 。
正是这个原因要求用户内容的域名必须不是自己主站的子域名，而是一个完全独立的第三方域名。
5. 数据做了划分，甚至切到了不同的物理集群，通过子域名来分流比较省事. ^_^ 这个可能被用的不多。
PS: 关于Cookie的问题，带宽是次要的，安全隔离才是主要的。
关于多域名，也不是越多越好，虽然服务器端可以做泛解释，浏览器做dns解释也是耗时间的，而且太多域名，如果要走 https的话，还有要多买证书和部署的问题，^_^。
六、请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间）
1.优化图片 2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）
3.优化CSS（压缩合并css，如margin-top,margin-left...) 4.网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。） 5.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。
当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。） 6.减少http请求（合并文件，合并图片）。
七、如果你参与到一个项目中，发现他们使用 Tab 来缩进代码，但是你喜欢空格，你会怎么做？
1.建议这个项目使用像 EditorConfig (http://editorconfig.org/) 之类的规范
2.为了保持一致性，接受项目原有的风格
3.直接使用 VIM 的 retab 命令
八、请写一个简单的幻灯效果页面
如果不使用JS来完成，可以加分。（如：纯CSS实现的幻灯片效果）
九、你都使用哪些工具来测试代码的性能？
Profiler, JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）, Dromaeo
十、如果今年你打算熟练掌握一项新技术，那会是什么？
nodejs，html5，css3，less
十一、请谈一下你对网页标准和标准制定机构重要性的理解。
(google)w3c存在的意义就是让浏览器兼容性问题尽量小，首先是他们对浏览器开发者的约束，然后是对开发者的约束。
十二、什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？
FOUC - Flash Of Unstyled Content 文档样式闪烁
<style type="text/css" media="all">@import "../fouc.css";</style>
而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
解决方法简单的出奇，只要在<head>之间加入一个<link>或者<script>元素就可以了。
HTML相关问题：
十三、doctype（文档类型）的作用是什么？你知道多少种文档类型？
此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks
（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
十四、浏览器标准模式和怪异模式之间的区别是什么？
W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。
IE盒子模型和标准W3C盒子模型：ie的width包括：padding\border。 标准的width不包括：padding\border
在js中如何判断当前浏览器正在以何种方式解析？
document对象有个属性compatMode ,它有两个值：
BackCompat 对应quirks mode
CSS1Compat 对应strict mode
十五、使用 XHTML 的局限有哪些？
xhtml要求严格，必须有head、body每个dom必须要闭合。
如果页面使用'application/xhtml+xml'会有什么问题吗？
一些老的浏览器并不兼容。
十六、如果网页内容需要支持多语言，你会怎么做？
编码UTF-8，空间域名需要支持多浏览地址。
在设计和开发多语言网站时，有哪些问题你必须要考虑？
1、应用字符集的选择 2、语言书写习惯&导航结构 3、数据库驱动型网站
十七、data-属性的作用是什么？
data-为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过 getAttribute方法获取
<div data-author="david" data-time="2011-06-20" data-comment-num="10">...</div>
div.dataset.commentNum; // 10
需要注意的是，data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。
并不是所有的浏览器都支持.dataset属性，测试的浏览器中只有Chrome和Opera支持。
十八、如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？
<nav>, <header>,<section>, <footer>
相关阅读：必须知道的七个HTML5新特性
十九、请描述一下 cookies，sessionStorage 和 localStorage 的区别？
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在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）和等号。
CSS 相关问题：
二十、描述下 “reset” CSS 文件的作用和使用它的好处。
因为浏览器的品种很多，每个浏览器的默认样式也是不同的，所以定义一个css reset可以使各浏览器的默认样式统一。
二十一、解释下浮动和它的工作原理。
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
二十二、列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。
1.使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
2.使用overflow。
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
3.使用after伪对象清除浮动。
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的。
1 |
*{margin:0;padding:0;} |
2 |
body{font:36px bold; color:#F00; text-align:center;} |
3 |
#layout{background:#FF9;} |
4 |
#layout:after{display:block;clear:both;content:”";visibility:hidden;height:0;} |
5 |
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} |
6 |
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} |
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
</div>
此三种方法各有利弊，使用时应择优选择，比较之下第二种方法更为可取
二十三、解释下 CSS sprites，以及你要如何在页面或网站中使用它。
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
二十四、你最喜欢的图片替换方法是什么，你如何选择使用。
<h2> <span 图片丢这里></span>Hello World </h2> 把span背景设成文字内容，这样又可以保证seo，也有图片的效果在上面。
一般都是：alt，title，onerror
二十五、讨论CSS hacks，条件引用或者其他。
各个浏览器都认识，这里给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的，
@media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。。。
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。
二十六、如何为有功能限制的浏览器提供网页？你会使用哪些技术和处理方法？
百度 谷歌 SO SOGOU Bing
二十七、如何视觉隐藏网页内容，只让它们在屏幕阅读器中可用？
1.display:none;的缺陷
搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略
屏幕阅读器（是为视觉上有障碍的人设计的读取屏幕内容的程序）会忽略被隐藏的文字。
2. visibility: hidden ;的缺陷
这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间
3.overflow:hidden;一个比较合理的方法
.texthidden { display:block;/*统一转化为块级元素*/ overflow: hidden; width: 0; height: 0; }
就像上面的一段CSS所展示的方法，将宽度和高度设定为0，然后超过部分隐藏，就会弥补上述一、二方法中的缺陷，也达到了隐藏内容的目的。
二十八、你用过栅格系统吗？如果使用过，你最喜欢哪种？
比如：Bootstrap，流式栅格系统，http://960.gs/ ，栅格系统延续美学
29、你用过媒体查询，或针对移动端的布局/CSS 吗？
1 |
@media screen and (min-width: 400px) and (max-width: 700px) { … } |
2 |
@media handheld and (min-width: 20em), screen and (min-width: 20em) { … } |
媒体查询，就是响应式布局。
30、你熟悉 SVG 样式的书写吗？
1 |
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> |
2 |
<circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/> |
3 |
<text x="250" y="150" font-family="Verdana" font-size="10px" fill="blue">Hello, out there</text> |
4 |
<defs><style type="text/css"> <![CDATA[.sample{stroke:blue;fill:#0080FF;opacity:1;}]]></style></defs> |
5 |
<use xlink:href="#sample1" class="sample"/> |
6 |
</svg> |
31、如何优化网页的打印样式？
<link rel="stylesheet" type="text/css" media="screen" href="xxx.css" />
其中media指定的属性就是设备，显示器上就是screen，打印机则是print，电视是tv，投影仪是projection。
<link rel="stylesheet" type="text/css" media="print" href="yyy.css" />
但打印样式表也应有些注意事项：
1、打印样式表中最好不要用背景图片，因为打印机不能打印CSS中的背景。如要显示图片，请使用html插入到页面中。
2、最好不要使用像素作为单位，因为打印样式表要打印出来的会是实物，所以建议使用pt和cm。
3、隐藏掉不必要的内容。（@print div{display:none;}）
4、打印样式表中最好少用浮动属性，因为它们会消失。
如果想要知道打印样式表的效果如何，直接在浏览器上选择打印预览就可以了。
32、在书写高效 CSS 时会有哪些问题需要考虑？
1.样式是：从右向左的解析一个选择器
2.ID最快，Universal最慢 有四种类型的key selector，解析速度由快到慢依次是：ID、class、tag和universal
3.不要tag-qualify （永远不要这样做 ul#main-navigation { } ID已经是唯一的，不需要Tag来标识，这样做会让选择器变慢。）
4.后代选择器最糟糕（换句话说，下面这个选择器是很低效的： html body ul li a { }）
5.想清楚你为什么这样写
6.CSS3的效率问题（CSS3选择器（比如 :nth-child）能够漂亮的定位我们想要的元素，又能保证我们的CSS整洁易读。但是这些神奇的选择器会浪费很多的浏览器资源。）
7.我们知道#ID速度是最快的，那么我们都用ID，是不是很快。但是我们不应该为了效率而牺牲可读性和可维护性
33.使用 CSS 预处理器的优缺点有哪些？
(SASS，Compass，Stylus，LESS)
描述下你曾经使用过的 CSS 预处理的优缺点
34.如果设计中使用了非标准的字体，你该如何去实现？
Webfonts (字体服务例如：Google Webfonts，Typekit 等等。)
35.解释下浏览器是如何判断元素是否匹配某个 CSS 选择器？
36.解释一下你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。
相关阅读：前端人员必须知道的10个CSS3属性（附例子）
JS相关问题：
37、解释下事件代理。
JavaScript事件代理则是一种简单的技巧，通过它你可以把事件处理器添加到一个父级元素上，这样就避免了把事件处理器添加到多个子级元素上。
当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。
事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素。
function getEventTarget(e) {
e = e || window.event;
return e.target || e.srcElement;
}
38、解释下 JavaScript 中 this 是如何工作的。
this 永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。匿名函数或不处于任何对象中的函数指向 window
1.如果是call，apply,with，指定的this是谁，就是谁
2.普通的函数调用，函数被谁调用，this就是谁
39、解释下原型继承的原理。
以下代码展示了JS引擎如何查找属性：
1 |
function getProperty(obj, prop) { |
2 |
if (obj.hasOwnProperty(prop)) |
3 |
return obj[prop] |
4 |
else if (obj.__proto__ !== null) |
5 |
return getProperty(obj.__proto__, prop) |
6 |
else |
7 |
return undefined |
8 |
} |
下图展示的原型（prototype）的关联：
