史上最全前端面试题(含答案)-A篇

HTML+CSS
1.对WEB标准以及W3C的理解与认识
标签闭合、标签小写、不乱嵌套、提升搜索机器人搜索概率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更普遍的设备所访问、更少的代码和组件，容易维 护、改版方便，不须要变更页面内容、提供打印版本而不须要复制内容、提升网站易用性；

2.xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不一样：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 
用于声明文档使用那种规范（html/Xhtml）通常为 严格 过分 基于框架的html文档
加入XMl声明可触发，解析方式更改成IE5.5 拥有IE5.5的bug

4.行内元素有哪些?块级元素有哪些?CSS的盒模型?
块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容，border ,margin，padding

5.CSS引入的方式有哪些? link和@import的区别是?
内联 内嵌 外链 导入
区别 ：同时加载
前者无兼容性，后者CSS2.1如下浏览器不支持
Link 支持使用javascript改变样式，后者不可

6.CSS选择符有哪些?哪些属性能够继承?优先级算法如何计算?内联和important哪一个优先级高?
标签选择符 类选择符 id选择符
继承不如指定 Id>class>标签选择
后者优先级高

7.前端页面有哪三层构成，分别是什么?做用是什么?
结构层 Html 表示层 CSS 行为层 js

8.css的基本语句构成是?
选择器{属性1:值1;属性2:值2;……}

9.你作的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
Ie(Ie内核) 火狐（Gecko） 谷歌（webkit） opear(Presto)

10.写出几种IE6 BUG的解决方法
1.双边距BUG float引发的 使用display
2.3像素问题 使用float引发的 使用dislpay:inline -3px
3.超连接hover 点击后失效 使用正确的书写顺序 link visited hover active
4.Ie z-index问题 给父级添加position:relative
5.Png 透明 使用js代码 改
6.Min-height 最小高度 ！Important 解决’
7.select 在ie6下遮盖 使用iframe嵌套
8.为何没有办法定义1px左右的宽度容器（IE6默认的行高形成的，使用over:hidden,zoom:0.08 line-height:1px）

11.标签上title与alt属性的区别是什么?
Alt 当图片不显示是 用文字表明。
Title 为该属性提供信息

12.描述css reset的做用和用途。
Reset重置浏览器的css默认属性 浏览器的品种不一样，样式不一样，而后重置，让他们统一

13.解释css sprites，如何使用。
Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

14.浏览器标准模式和怪异模式之间的区别是什么?
盒子模型 渲染模式的不一样
使用 window.top.document.compatMode 可显示为何模式

15.你如何对网站的文件和资源进行优化?期待的解决方案包括：
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用

16.什么是语义化的HTML?
直观的认识标签 对于搜索引擎的抓取有好处

17.清除浮动的几种方式，各自的优缺点
1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增长无心义的标签）
2.使用overflow:auto（空标签元素清除浮动而不得不增长无心代码的弊端,,使用zoom:1用于兼容IE）
3.是用afert伪元素清除浮动(用于非IE浏览器)

Javascript
1.javascript的typeof返回哪些数据类型
Object number function boolean underfind

2.例举3种强制类型转换和2种隐式类型转换?
强制（parseInt,parseFloat,number）
隐式（== – ===）

3.split() join() 的区别
前者是切割成数组的形式，后者是将数组转换成字符串

4.数组方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除

5.事件绑定和普通事件有什么区别

6.IE和DOM事件流的区别
1.执行顺序不同、
2.参数不同
3.事件加不加on
4.this指向问题

7.IE和标准下有哪些兼容性的写法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target

8.ajax请求的时候get 和post方式的区别
一个在url后面 一个放在虚拟载体里面
有大小限制
安全问题
应用不一样 一个是论坛等只须要请求的，一个是相似修改密码的

9.call和apply的区别
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

10.ajax请求时，如何解释json数据
使用eval parse 鉴于安全性考虑 使用parse更靠谱
11.b继承a的方法

12.写一个获取非行间样式的函数

function getStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}

13.事件委托是什么
让利用事件冒泡的原理，让本身的所触发的事件，让他的父元素代替执行！
http://www.webasily.com/?p=78 例子可见此连接

14.闭包是什么，有什么特性，对页面有什么影响
闭包就是可以读取其余函数内部变量的函数。
http://blog.csdn.net/gaoshanwudi/article/details/7355794 此连接可查看（问这个问题的不是一个公司）

15.如何阻止事件冒泡和默认事件
canceBubble return false

16.添加 删除 替换 插入到某个接点的方法
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild

17.解释jsonp的原理，以及为何不是真正的ajax
动态建立script标签，回调函数
Ajax是页面无刷新请求数据操做

18.javascript的本地对象，内置对象和宿主对象
本地对象为array obj regexp等能够new实例化
内置对象为gload Math 等不能够实例化的
宿主为浏览器自带的document,window 等

19.document load 和document ready的区别
Document.onload 是在结构和样式加载完才执行js
Document.ready原生种没有这个方法，jquery中有 $().ready(function)

20.”==”和“===”的不一样
前者会自动转换类型
后者不会

21.javascript的同源策略
一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

22.编写一个数组去重的方法
function oSort(arr)
{
var result ={};
var newArr=[];
for(var i=0;i
{
if(!result[arr])
{
newArr.push(arr)
result[arr]=1
}
}
return newArr
}
来自IT公司面试手册





[HTML && CSS]1.Doctype严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?


严格模式：使用此类型的网页，浏览器解析将相对严格，不容许使用任何表现样式的标识和属性，好比在元素中直接使用background-color背景色属性。
混杂模式：浏览器对XHTML的解析较为宽松。容许使用4.01中的标签，但必须符合XHTML的语法。
2：行内元素有哪些?块级元素有哪些?CSS的盒模型?
行内元素：span,a,var ,em,input,img,img,textarea,var,em,strong,select,
块级标签：div,p,h1-h3,ul,ol,dl,li,dd,dt,table,td,tr,
CSS的盒模型：CSS布局中的每个元素，在浏览器的解析中，都被当作一个盒状物。
3.CSS引入的方式有哪些? link和@import的区别是?
CSS引入的方式
在html文档的head部分加入:

在html文档的head部分直接写入css文档。
直接在html标签里写入对这个标签的css控制
测试信息

link和@import的区别是link写在html页面中，@import写在CSS页面中
4.CSS选择符有哪些?哪些属性能够继承?优先级算法如何计算?内联和important哪一个优先级高?
CSS选择符: 类选择器 、 标签名选择器、 ID选择器 、 后代选择器（派生选择器）、 群组选择器
能够继承： 类选择器 、 标签名选择器、 后代选择器（派生选择器）、群组选择器
优先级算法：
标签内直接定义：1000
ID选择器：100
类选择器 ：10
标签名选择器：1
内联和important中，important优先级高
5:前端页面有哪三层构成，分别是什么?做用是什么?
结构层；主要指DOM节点；HTML/XHTML
样式层；主要是指页面渲染；CSS
脚本层：主要指页面动画效果；JS/AS
6:css的基本语句构成是?
选择符、属性、值
8：你作的页面在哪些流览器测试过?这些浏览器的内核分别是什么?常常遇到的浏览器的兼容性有哪些?怎么会出现?解决方法是什么?
IE六、七、八、FF、Opear、Safari、Chrome、Maxthon
Trident：Windows 下的 IE 浏览器使用的内核代号。除 IE 外，众多的 IE Shell（如 Maxthon ）都使用这个内核。

Gecko：Mozilla Firefox 浏览器使用的内核代号。
Presto：Opera 浏览器使用的内核代号，这是目前公认网页浏览速度最快的浏览器内核。
KHTML/WebCore： Konqueror/Safari 浏览器使用的内核代号。
常常遇到的浏览器兼容问题：
1.在有的浏览器中，默认字体大小为12px,因此在设字体大小的时候，最小设为12px，若是在作的过程当中，发现字体小于12，可直接做为图片使用
2.a标签对里不能嵌套a标签对
3.若给a标签内的内容样式加上样式，须要设置display:block;（在IE中若是设置宽高会自动变成块，在FF中则不会），但若是设置了float属性，就不须要设置display:block。
4.ul，ol在FF默认状况下，有list-style-type样式和padding值，dl在IE和FF默认状况下，有padding值，因此应该事先声明ul,li,ol,dl,dd,dd{margin:0;padding:0}。
5.做为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应
6.关于手形光标. cursor: pointer. 而hand 只适用于 IE.
7.css布局中的居中问题:在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经能够了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“margin-right: auto;margin-left: auto; ”须要说明的是，若是你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你能够依次拆出多个div，只要在每一个拆出的div里定义margin-right: auto;margin-left: auto; 就能够了。
8.浮动ie产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; //这种状况之下IE会产生200px的距离，这时须要设置display:inline; //使浮动忽略}
9.如何居中一个浮动元素?
对其设置margin:x auto;
10.有没有关注HTML5和CSS3?若有请简单说一些您对它们的了解状况！
有，HTML5的是目前正在为将来的HTML标准的主要修订的发展。其前任同样，4.01和XHTML 1.1的HTML，HTML5的是一个结构和提交万维网内容的标准。新标准结合了诸如视频播放，拖动和放下之前曾在第三方浏览器插件依赖例如Adobe Flash，微软的Silverlight的功能，和谷歌齿轮。
12:若是让你来制做一个访问量很高的大型网站，你会如何来管理全部CSS文件、JS与图片?
把全部的CSS文件都放入一个样式表中,经过把全部的脚本放到一个文件中来减小HTTP请求的方法。js文件也采用一样的方法。把全部的背景图像都放到一个图片文件中，而后经过CSS的background-image和background-position属性来显示图片的不一样部分。
14：你对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?
前端界面工程师：1. 与交互设计师、视觉设计师协做，根据设计图完成页面制做。 2. 维护及优化网站前端性能。
前景： 长期以来，国内前端开发在整个软件开发行业内占得比重较小，发展较晚。网站也多倾向于赢利最大化而轻视用户体验。先后端比例悬殊大。近几年来，随着 以用户为中心 的思想普及发展。前端开发呈现出强劲的发展态势，前端开发人员在项目中的重要性日益突出。前端开发人员呈现出严重的人员短缺现象。
[Javascript]1：js是什么，js和html 的开发如何结合?

js是一种基于对象和事件驱动，并具备安全性的脚本语言。
能够html的三个地方编写js脚本语言：一是在网页文件的标签对中直接编写脚本程序代码；二是将脚本程序代码放置在一个单独的文件中，在网页文件中引用这个脚本程序语言；三是将脚本程序代码做为某个元素的事件属性值或超连接的href属性值。

div{margin: 0;padding: 0;border:1px red solid;}

2.怎样添加、移除、移动、复制、建立和查找节点
添加：append
删除：remove
移动：
复制：
建立：create
查找：


（1）建立新节点



      createDocumentFragment()    //建立一个DOM片断



      createElement_x_x()   //建立一个具体的元素



      createTextNode()   //建立一个文本节点



（2）添加、移除、替换、插入



      a()



      removeChild()



      replaceChild()



      insertBefore()



（3）查找



      getElementsByTagName_r()    //经过标签名称



      getElementsByName()    //经过元素的Name属性的值



      getElementById()    //经过元素Id，惟一性
3.怎样使用事件以及IE和DOM事件模型之间存在哪些主要差异
4.面向对象编程:b怎么继承a
5.看看下面alert的结果是什么
view sourceprint?1.function b(x, y, a) {
.arguments[2] = 10;
.alert(a);
}
b(1, 2, 3);
若是函数体改为下面，结果又会是什么?
a = 10;
alert(arguments[2] );
6.请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象
var obj = parseQueryString(url);
alert(obj.key0) // 输出0
7.ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?
8.什么是闭包?下面这个ul，如何点击每一列的时候alert其index?

这是第一条这是第二条这是第三条

闭包是能够包含自由（未绑定）变量的代码块；这些变量不是在这个代码块或者任何全局上下文中定义的，而是在定义代码块的环境中定义。
9.最近看的一篇Javascript的文章是?
10.常使用的库有哪些?经常使用的前端开发工具?开发过什么应用或组件?
最经常使用的库：jquery-1.4.2.min.js
经常使用的前端开发工具：firebug、photoshop、editplus、取色器、色板、eclipse
11.说说YSlow(能够详细一点)
yslow是一个工具，也能够理解成是一个插件，是基于Mozilla Firefox上firebug插件的一个插件。它的出现的主要目的就是检测咱们的页面性能。它让用户能够就近取得所需的内容，解决网络拥挤的情况，提升用户访问网站的响应速度；其次，yahoo在ETags配置上也有独特之处，声明过时，就是说，用户从服务器取数据的时候，若是文件变化了，给他反馈新的文件，若是文件没有变化，只需告诉客户端没有变化便可，没必要再把文件取回来，这样就节省了大量的网络带宽和资源。另外，只要将那些在加载过程当中要执行的脚本放到底部，就能够实现最大的下载并行。
小说网对其评价：(a) 从样式表着手，避免CSS表达式。CSS表达式须要不少资源，有时甚至会形成页面假死。(b) 缓存一下不常修改的文件，并开启 GZIP压缩，减小网络传输时间(c) 减小DNS查找。YSlow认为一个页面上2个之内的域名比较合理。有些网站挂了很多统计代码，或者广告代码。统计拖累用户速度、广告影响用户视觉。(d) 避免重定向（跳转），咱们在给连接地址的时候，通常会把连接地址写成 http://xxx.cn/xxx 或者 http://xxx.cn/xxx/ ，有区别吗?有！服务器若是接收到的URL是http://xxx.cn/xxx，它会自动重定向到http://xxx.cn/xxx/，虽然进入的都 是同一个页面，可是前者比后者多走了一步，重定向，显然多多少少浪费了一点时间。

Google 对其评价：多数人可能认为GOOGLE没什么值得借鉴的，毕竟整站就那么几行代码。
可是这几行代码，天天要承受过亿的用户访问量，在如此大的压力下，运行流畅，有很大一个因素取决于Minify JS。经过查看它的源代码能够发现，google不只将JS进行了压缩，连页面代码中也没有没必要要的空格和符号，使用了最短最简洁的变量名。联系到开发方 面，建议你们采用yuicompressor，在调试时使用便于开发的模式，调试完成后直接压缩并发布。让用户获得最快捷的用户体验。






百度：
一、JavaScript有哪几种数据类型
二、中alt和tittle的区别
三、下面css标签在JavaScript中调用应如何拼写，border-left-color，-moz-
四、动态打印 yyyy-mm-dd hh:mm:ss
五、如何提升网页的运行速度
六、JavaScript中如何对一个对象进行深度clone
七、flash中ActionScript2.0和ActionScript3.0面向对象的异同
答案见http://www.lihaihong.com/article/86.html
第一题
编写一个方法 求一个字符串的字节长度
第二题
如何控制alert中的换行
第三题
解释document.getElementByIdx_x_x_x(“ElementID”).style.fontSize=”1.5em”
第四题
将一个相似图中的效果分离成css和html
第五题
按照格式 xxxx年xx月xx日xx时xx分xx秒动态显示时间 要求不足10的补0
第六题
编写一个方法 去掉一个数组的重复元素
第七题
说出3条以上ff和ie的脚本兼容问题
第八题
按要求写一个简单的ajax示例 简单的没意义 就不写了
腾讯：
1.请实现，鼠标点击页面中的任意标签，alert该标签的名称．（注意兼容性）
HTML && CSS
1.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 行内元素有哪些?块级元素有哪些?CSS的盒模型?
2.CSS引入的方式有哪些? link和@import的区别?
3.CSS选择符有哪些?哪些属性能够继承?优先级?内联和important哪一个优先级高?
4.常常遇到的浏览器的兼容性有哪些?怎么会出现?解决方法是什么?
5.如何居中一个浮动元素?
6.HTML5和CSS3的了解状况
7.你怎么来实现下面这个设计图

Javascript
1.怎样添加、移除、移动、复制、建立和查找节点


（1）建立新节点



      createDocumentFragment()    //建立一个DOM片断



      createElement_x_x()   //建立一个具体的元素



      createTextNode()   //建立一个文本节点



（2）添加、移除、替换、插入



      a()



      removeChild()



      replaceChild()



      insertBefore()



（3）查找



      getElementsByTagName_r()    //经过标签名称



      getElementsByName()    //经过元素的Name属性的值



      getElementById()    //经过元素Id，惟一性
2.怎样使用事件以及IE和DOM事件模型之间存在哪些主要差异
3.面向对象编程:b怎么继承a
4.看看下面alert的结果是什么
function b(x, y, a) {
arguments[2] = 10;
alert(a);
}
b(1, 2, 3);
若是函数体改为下面，结果又会是什么?
a = 10;
alert(arguments[2] );
5.请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象，如：var url = ”http://www.taobao.com/index.php?key0=0&key1=1& key2=2…..”
var obj = parseQueryString(url);
alert(obj.key0) // 输出0
(来自淘宝网校园招聘笔试题)
6.ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?
7.什么是闭包?下面这个ul，如何点击每一列的时候alert其index?

这是第一条这是第二条这是第三条

8.最近看的一篇Javascript的文章
9.你如何去实现这个Tabview

10.常使用的库有哪些?经常使用的前端开发工具?开发过什么应用或组件?
11.性能-Yslow









[HTML && CSS]1.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
2：行内元素有哪些?块级元素有哪些?CSS的盒模型?
3.CSS引入的方式有哪些? link和@import的区别是?
4.CSS选择符有哪些?哪些属性能够继承?优先级算法如何计算?内联和important哪一个优先级高?
5:前端页面有哪三层构成，分别是什么?做用是什么?
6:css的基本语句构成是?
8：你作的页面在哪些流览器测试过?这些浏览器的内核分别是什么?常常遇到的浏览器的兼容性有哪些?怎么会出现?解决方法是什么?
9.如何居中一个浮动元素?
10.有没有关注HTML5和CSS3?若有请简单说一些您对它们的了解状况！
11.你怎么来实现下面这个设计图,主要讲述思路 （效果图省略）
13:若是让你来制做一个访问量很高的大型网站，你会如何来管理全部CSS文件、JS与图片?
14：你对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?

重申一下，上述这些知识点都应该是你应该“想都不用想”的东西。我一开始问的全部问题都是想摸清你对全部这些领域知识的掌握程度。虽然上面列出的这些知识点并无面面俱到，但我以为你至少应该掌握这些，才有可能跟我坐到一间办公室里来。

少许提问
我很是赞同面试者问的问题越少越好。反复问应聘者各类问题既不公平，也很无聊。我在任何一次面试中，一般只问三个大问题，但每一个问题又会涉及我所能想到的多个方面。回答每一个大问题通常要通过几个步骤，这样我就能够在每一个步骤中穿插着问一些小问题。好比说：

如今有一个正显示着Yahoo!股票价格的页面。页面上有一个按钮，你能够单击它来刷新价格，但不会从新加载页面。请你描述一下实现这个功能的过程，假设服务器会负责准备好正确的股票价格数据。

这个问题牵扯到一组我想要考察的基本知识点：DOM结构、DOM操做、事件处理、XHR和JSON。若是我要求你对换一种处理股票价格的方式，或者让你在页面中显示其余信息，就能够把更多的知识点包括进来。对于经验比较丰富应聘者，我也能够自如地扩展要考察的知识范围，最简单像JOSN与XML的区别、安全问题、容量问题，等等。

我还但愿应聘者给出的任何解决方案中都不要使用库。我想看到最原生态的代码，你就当页面中没有包含任何库。你说你对哪一个库了解多少多少，但我不能把关于库的知识做为评判能力的因素，由于库是会随时间变化的。我须要的是真正理解库背后的机制，特别是可以徒手写出一个本身的库的人。

解决问题
作为一名前端工程师，最值得高兴的事莫过于解决同一个问题会有不少种不一样的方法，而你要作的就是找出最合适的方法来。我在提问的时候，常常会在应聘者解释完一种方法后问他们还有没有第二种方法。此时我会跟他们说，假设你的这个方法因为种种缘由被否决了，那么你还能不能给出另外一种方法。这样作能够达到两个目的。

首先，能够测试出他们是否在毫无心义地复述书本中的东西。不能不认可，某些人确实有过目不忘的天赋，听他们在那里口若悬河地讲，你会以为他们什么都明白。但是，只要一跟这些人谈到怎么查找方案无效的缘由，以及可否拿出一个新方案来，他们每每就傻眼了。这时候，若是我听到“我不明白这个方案为何不够好”之类的反问，内心马上就明白个人问题已经超出了他们的能力范围，而他们只是想拿本身死记硬背的结论来蒙混过关。

其次，能够测试出他们已经掌握的（仍是那句话，“想都不用想”）浏览器技术知识。若是他们对浏览器平台的核心知识有较好的理解，想出解决同一问题的不一样方案根本没有那么难。

对一名前端工程师来讲，这绝对是最重要的能力。前端工程师在工做中遇到本该如此却并未如此的难题（说你啦，IE6），应该说是一件很日常的事。一个方案无效就机关用尽的人，作不了前端工程师。

考核应聘者解决问题能力的另外一层缘由，与个人我的喜爱有关。在搞清楚应聘者知道什么不知道什么以后，我就会想着问一个他们知识领域以外的问题。这样作的目的，就是想看看他们怎样运用已有的知识解决新问题。在解决问题的每一步，我也准备了一些提示，以防有人会卡壳打艮（在我面前15分钟一声不响，对我评价这我的毫无帮助）。我真正感兴趣的，是他们可以从上一步前进到下一步。我但愿看到一我的就在我眼前学到新知识。

注意：全部问题都与浏览器技术相关。我不相信出几道抽象的逻辑题，就可以考出某人解决Web技术问题的能力。在我看来，这无异于让素描大师画肖像（或者让刘翔跟博尔特同场竞技），没有意义，也得不到任何有价值的信息。

有激情
要成为一名优秀的前端工程师，最重要的莫过于对本身作的事要有激情。咱们技能都不是从学校中或者从研讨会上学来的，所以前端工程师必须具有自学能力。浏览器技术的变化可谓突飞猛进，因此也只有不断提高本身的技能才作获得与时俱进。我虽然不能强迫谁必须多看博客、不断学习，但想应聘前端工程师的人恐怕仍是必须这么作的。

你怎么知道谁对这种工做有没有激情?实际上很是简单。我只问一个简单的问题：“目前你对什么Web技术最感兴趣?”这个问题永远不会过时，并且也几乎不可能出错……除非你答不上来。就眼下来讲，我但愿你对这个问题给出的技术中包括WebSocket、HTML、WebGL、客户端数据库，等等。只有对Web开发充满激情的人，才会坚持不懈地学习新知识、掌握新技能；这些人才是我真正想要的。固然，我会让他们详细解释本身提到的技术，以保证他们不是随口说了几个时髦的新词汇。

最后一点
计算机科学或者Web设计方面的知识固然也有用，但那都是基本知识以外的东西。只要基本知识在那儿了，一切就都有了基础，想扩充知识面也不难。但是，若是等到正式上班之后，还得从头学习基本技能，那种难度是不可同日而语的。另外，高级前端工程师与通常工程师相比，确定须要掌握更多的技能。而面试几乎没有经验大学毕业生，一样也会有一套彻底不一样的程序。我在这篇文章里列出来的都是一些最基本的东西。

对于那些尚未多少面试经验的人，我老是喜欢告诉他们，面试完了只要问本身一个问题就行：你想之后跟这我的在一块儿共事吗?若是无论为何，回答是不，那就是不。

面试前端工程师对我来讲是一件很是有意思的事，由于面试过程很大程度上也是自我提高的过程。不管大公司仍是小公司，之因此在如何招聘到真正有能力的前端工程师方面会遇到一样的问题，就是由于负责招聘的那些人不知道本身公司须要什么样的人，结果问问题时也问不到点子上。通过这几年在行业里的摸索，我总结出了本身的一套颇有效的面试前端工程的方法。

有的应聘者说我很差对付，但留给他们这样的印象也并不是我所愿。我以为之因此他们说我很差对付，主要是由于我问他们问题时问得太细了。之前我曾专门写过一些东西，告诉应聘者怎么才能经过个人面试（Surviving an interview with me）以及优秀的前面工程师应该具有什么样的素质（What makes a good front end engineer?），而个人面试能够说彻底是按照那两篇文章的标准进行的。我不会问一些特别偏门的问题，也不认为出几道逻辑题就能考出人的真实水平。我惟一的想法就是肯定你可否胜任咱们要招的这个职位。为此，我须要简单地考察以下几个方面。

基本知识
咱们生活在互联网时代，你想知道的任何事情几乎都能在15分钟内找到相关信息。但是，能找到信息并不等于你会使用它。我认为全部前端工程师至少都应该掌握某些基本的知识，才能有效地完成本身的工做。若是一遇到问题，就停下工做上网四处搜索解决方案，怎么可能保证定期完成工做呢?听听，还有谁在说“我不知道，但我能够上网搜到。”请这些同窗把手举起来，让你们认识一下（immediately raises a flag for me.）。下面我列出一些基本的知识点，这些都是我认为一名前端工程师（不管工做年头长短）在没有任何外来帮助的状况应该知道的。

DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。


DOM操做——怎样添加、移除、移动、复制、建立和查找节点。


事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差异。


XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。


严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。


盒模型——外边距、内边距和边框之间的关系，IE 8如下版本的浏览器中的盒模型有什么不一样。


块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你以为应该如何定义它们的样式。


浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。


HTML与XHTML——两者有什么区别，你以为应该使用哪个并说出理由。


JSON——它是什么、为何应该使用它、到底该怎么使用它，说出实现细节来。
重申一下，上述这些知识点都应该是你应该“想都不用想”的东西。我一开始问的全部问题都是想摸清你对全部这些领域知识的掌握程度。虽然上面列出的这些知识点并无面面俱到，但我以为你至少应该掌握这些，才有可能跟我坐到一间办公室里来。

少许提问
我很是赞同面试者问的问题越少越好。反复问应聘者各类问题既不公平，也很无聊。我在任何一次面试中，一般只问三个大问题，但每一个问题又会涉及我所能想到的多个方面。回答每一个大问题通常要通过几个步骤，这样我就能够在每一个步骤中穿插着问一些小问题。好比说：

如今有一个正显示着Yahoo!股票价格的页面。页面上有一个按钮，你能够单击它来刷新价格，但不会从新加载页面。请你描述一下实现这个功能的过程，假设服务器会负责准备好正确的股票价格数据。

这个问题牵扯到一组我想要考察的基本知识点：DOM结构、DOM操做、事件处理、XHR和JSON。若是我要求你对换一种处理股票价格的方式，或者让你在页面中显示其余信息，就能够把更多的知识点包括进来。对于经验比较丰富应聘者，我也能够自如地扩展要考察的知识范围，最简单像JOSN与XML的区别、安全问题、容量问题，等等。

我还但愿应聘者给出的任何解决方案中都不要使用库。我想看到最原生态的代码，你就当页面中没有包含任何库。你说你对哪一个库了解多少多少，但我不能把关于库的知识做为评判能力的因素，由于库是会随时间变化的。我须要的是真正理解库背后的机制，特别是可以徒手写出一个本身的库的人。

解决问题
作为一名前端工程师，最值得高兴的事莫过于解决同一个问题会有不少种不一样的方法，而你要作的就是找出最合适的方法来。我在提问的时候，常常会在应聘者解释完一种方法后问他们还有没有第二种方法。此时我会跟他们说，假设你的这个方法因为种种缘由被否决了，那么你还能不能给出另外一种方法。这样作能够达到两个目的。

首先，能够测试出他们是否在毫无心义地复述书本中的东西。不能不认可，某些人确实有过目不忘的天赋，听他们在那里口若悬河地讲，你会以为他们什么都明白。但是，只要一跟这些人谈到怎么查找方案无效的缘由，以及可否拿出一个新方案来，他们每每就傻眼了。这时候，若是我听到“我不明白这个方案为何不够好”之类的反问，内心马上就明白个人问题已经超出了他们的能力范围，而他们只是想拿本身死记硬背的结论来蒙混过关。

其次，能够测试出他们已经掌握的（仍是那句话，“想都不用想”）浏览器技术知识。若是他们对浏览器平台的核心知识有较好的理解，想出解决同一问题的不一样方案根本没有那么难。

对一名前端工程师来讲，这绝对是最重要的能力。前端工程师在工做中遇到本该如此却并未如此的难题（说你啦，IE6），应该说是一件很日常的事。一个方案无效就机关用尽的人，作不了前端工程师。

考核应聘者解决问题能力的另外一层缘由，与个人我的喜爱有关。在搞清楚应聘者知道什么不知道什么以后，我就会想着问一个他们知识领域以外的问题。这样作的目的，就是想看看他们怎样运用已有的知识解决新问题。在解决问题的每一步，我也准备了一些提示，以防有人会卡壳打艮（在我面前15分钟一声不响，对我评价这我的毫无帮助）。我真正感兴趣的，是他们可以从上一步前进到下一步。我但愿看到一我的就在我眼前学到新知识。

注意：全部问题都与浏览器技术相关。我不相信出几道抽象的逻辑题，就可以考出某人解决Web技术问题的能力。在我看来，这无异于让素描大师画肖像（或者让刘翔跟博尔特同场竞技），没有意义，也得不到任何有价值的信息。

有激情
要成为一名优秀的前端工程师，最重要的莫过于对本身作的事要有激情。咱们技能都不是从学校中或者从研讨会上学来的，所以前端工程师必须具有自学能力。浏览器技术的变化可谓突飞猛进，因此也只有不断提高本身的技能才作获得与时俱进。我虽然不能强迫谁必须多看博客、不断学习，但想应聘前端工程师的人恐怕仍是必须这么作的。

你怎么知道谁对这种工做有没有激情?实际上很是简单。我只问一个简单的问题：“目前你对什么Web技术最感兴趣?”这个问题永远不会过时，并且也几乎不可能出错……除非你答不上来。就眼下来讲，我但愿你对这个问题给出的技术中包括WebSocket、HTML、WebGL、客户端数据库，等等。只有对Web开发充满激情的人，才会坚持不懈地学习新知识、掌握新技能；这些人才是我真正想要的。固然，我会让他们详细解释本身提到的技术，以保证他们不是随口说了几个时髦的新词汇。

最后一点
计算机科学或者Web设计方面的知识固然也有用，但那都是基本知识以外的东西。只要基本知识在那儿了，一切就都有了基础，想扩充知识面也不难。但是，若是等到正式上班之后，还得从头学习基本技能，那种难度是不可同日而语的。另外，高级前端工程师与通常工程师相比，确定须要掌握更多的技能。而面试几乎没有经验大学毕业生，一样也会有一套彻底不一样的程序。我在这篇文章里列出来的都是一些最基本的东西。

对于那些尚未多少面试经验的人，我老是喜欢告诉他们，面试完了只要问本身一个问题就行：你想之后跟这我的在一块儿共事吗?若是无论为何，回答是不，那就是不。




前端开发工程师面试题 Javascript
1. 要动态改变层中内容可使用的方法有（AB ）
a)innerHTML
b)innerText
c)经过设置层的隐藏和显示来实现
d)经过设置层的样式属性的display属性

2. 当按键盘A时，使用onKeyDown事件打印event.keyCode的结果是（A ）
a)65
b)13
c)97
d)37

3. 在javascript里，下列选项中不属于数组方法的是（B）；
a)sort()
b)length()
c)concat()
d)reverse()
4. 下列哪个选项能够用来检索被选定的选项的索引号?(B)
a)disabled
b)selectedIndex
c)option
d)multiple

5. 但愿图片具备”提交”按钮一样的功能,该如何编写表单提交?(A )
a)在图片的onClick事件中手动提交
b)在图片上添加onSubmit事件
c)在图片的onSubmit事件中手动提交
d)在表单中自动提交

6. 使div层和文本框处在同一行的代码正确的是(D );
a)
b)
c)
d)
7. 下列选项中,描述正确的是(选择两项) 。( AD )
a)options.add(new Option(‘a’,'A’))能够动态添加一个下拉列表选项
b)option.add(new Option(‘a’,'A’))能够动态添加一个下拉列表选项
c)new Option(‘a’,'A’)中’a'表示列表选项的值,’A'用于在页面中显示
d)new Option(‘a’,'A’)中’A'表示列表选项的值,’a'用于在页面中显示

8. 、 var emp = new Array(3);
for(var i in emp)
如下答案中能与for循环代码互换的是: （选择一项）。(D )
A for(var i =0; i
B for(var i =0; i
C for(var i =0; i
D for(var i =0; i

9. 制做级联菜单功能时调用的是下拉列表框的（A ）事件。
a)onChange
b)onFocus
c)selected
d)onClick

10. 下列声明数组的语句中，错误的选项是（ C ）。
a)Var arry= new Array()
b)Var arry=new Array(3)
c)Var arry[]=new Array(3)(4)
d)Var arry=new Array(‘3’,’4’)

11. 下列属性哪个可以实现层的隐藏?（C ）
a)display:fals
b)display:hidden
c)display:none
d)display:” ”

12. 下列哪个选项不属于document对象的方法?（D ）
a)focus()
b)getElementById()
c)getElementsByName()
d)bgColor()

13. 下列哪项是按下键盘事件(AB )
a)onKeyDown
b)onKeyPress
c)keyCode
d)onMouseOver
14. javascript进行表单验证的目的是（B ）
a)把用户的正确信息提交给服务器
b)检查提交的数据必须符合实际
c)使得页面变得美观、大方
d)减轻服务器端的压力
15. 、 display属性值的经常使用取值不包括(C )
a)inline
b)block
c)hidden
d)none

16. 如下有关pixelTop属性与top属性的说法正确的是。(D )
a)都是Location对象的属性
b)使用时返回值都是字符串
c)都是返回以像素为单位的数值
d)以上都不对

17. 使用open方法打开具备浏览器工具条,地址栏,菜单栏的窗口，下列选项正确的是__D__
a)open("x.html","HI","toolbas=1,scrollbars=1,status=1");
b)open("HI","scrollbars=1,location=1,status=1");
c)open("x.html","status=yes,menubar=1,location=1");
d)open("x.html","HI","toolbas=yes,menubar=1,location=1");

18. 下面关闭名为mydiv的层的代码正确的是(C )
a)document.getElementByIdx_x_x_x(mydiv).style.display="none";
b)document.getElementByIdx_x_x_x("mydiv").style.display=none;
c)document.getElementByIdx_x_x_x("mydiv").style.display="none";
d)document.getElementByIdx_x_x_x("mydiv").style.display=="none";
19. 为何要使用Div+CSS布局
形式与内容分离
大大减小页面代码，提升页面浏览速度
结构清晰，有利于SEO
缩短改版时间， 布局更方便
一次设计，屡次使用

20. Block元素的特色是什么?哪些元素默认为Block元素
老是在新行上开始；
高度，行高以及顶和底边距均可控制；
宽度缺省是它的容器的100%，除非设定一个宽度
是块元素的有：,,
,
, 和21. 、 inline元素的特色是什么?哪些元素属于inline元素?
和其余元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。

是inline元素的有：, , ,
, , 
和。 

22. 、 javascript中表达式parseInt(“X8X8”)+paseFloat(‘8’)的结果是什么?( C)
a)8+8
b)88
c)16
d)“8”+’8

23. String对象的方法不包括(C )
a)charAt()；
b)substring()
c)length
d)toUpperCase()

24. 关于setTimeout(“check”,10)中说法正确的是( D)
a)程序循环执行10次
b)Check函数每10秒执行一次
c)10作为参数传给函数check
d)Check函数每10毫秒执行一次

25. 如下哪一个单词不属于javascript关键字：（C）
a)with
b)parent
c)class
d)void 


前言
　　本文总结了一些优质的前端面试题（多数源于网络），初学者阅后也要用心钻研其中的原理，重要知识须要系统学习，透彻学习，造成本身的知识链。万不可投机取巧，只求面试过关是错误的！

面试有几点需注意：(来源程劭非老师 github:@wintercn)
面试题目： 根据你的等级和职位变化，入门级到专家级：范围↑、深度↑、方向↑。

题目类型： 技术视野、项目细节、理论知识题，算法题，开放性题，案例题。

进行追问： 能够确保问到你开始不懂或面试官开始不懂为止，这样能够大大延展题目的区分度和深度，知道你的实际能力。由于这种关联知识是长时期的学习，绝对不是临时记得住的。

回答问题再棒，面试官（多是你的直接领导面试），会考虑我要不要这我的作个人同事？因此态度很重要。（感受更像是相亲）

资深的工程师能把 absolute 和 relative 弄混，这样的人不要也罢，由于团队须要的你这我的具备能够依靠的才能（靠谱）。

前端开发面试知识点大纲：


HTML&CSS：
    对Web标准的理解、浏览器内核差别、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML五、CSS三、移动端适应 

JavaScript：  
    数据类型、面向对象、继承、闭包、插件、做用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。

其余：
   HTTP、安全、正则、优化、重构、响应式、移动端、团队协做、可维护、SEO、UED、架构、职业生涯 

做为一名前端工程师，不管工做年头长短都应该必须掌握的知识点：

此条由 王子墨 发表在 前端随笔


    一、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。

    二、DOM操做  ——如何添加、移除、移动、复制、建立和查找节点等。

    三、事件    —— 如何使用事件，以及IE和标准DOM事件模型之间存在的差异。

    四、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。

    五、严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义。

    六、盒模型 —— 外边距、内边距和边框之间的关系，及IE8如下版本的浏览器中的盒模型

    七、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们

    八、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。

    九、HTML与XHTML——两者有什么区别，你以为应该使用哪个并说出理由。

    十、JSON  —— 做用、用途、设计结构。