前端面试题

 6.null和undefined的区别？null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。undefined：（1）变量被声明了，但没有赋值时，就等于undefined。（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。（3）对象没有赋值的属性，该属性的值为undefined。（4）函数没有返回值时，默认返回undefined。null：（1） 作为函数的参数，表示该函数的参数不是对象。（2） 作为对象原型链的终点。 7.new操作符具体干了什么呢?（1）创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。（2）属性和方法被加入到 this 引用的对象中。（3）新创建的对象由 this 所引用，并且最后隐式的返回 this 。 8.JSON 的了解？JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小。格式：采用键值对，例如：{'age':'12', 'name':'back'} 9.call() 和 apply() 的区别和作用？apply()函数有两个参数：第一个参数是上下文，第二个参数是参数组成的数组。如果上下文是null，则使用全局对象代替。如：function.apply(this,[1,2,3]);call()的第一个参数是上下文，后续是实例传入的参数序列。如：function.call(this,1,2,3); 10.如何获取UA？
其他1.HTTP状态码知道哪些？100  Continue  继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息200  OK   正常返回信息201  Created  请求成功并且服务器创建了新的资源202  Accepted  服务器已接受请求，但尚未处理301  Moved Permanently  请求的网页已永久移动到新位置。302 Found  临时性重定向。303 See Other  临时性重定向，且总是使用 GET 请求新的 URI。304  Not Modified  自从上次请求后，请求的网页未修改过。400 Bad Request  服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。401 Unauthorized  请求未授权。403 Forbidden  禁止访问。404 Not Found  找不到如何与 URI 相匹配的资源。500 Internal Server Error  最常见的服务器端错误。503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。2.你有哪些性能优化的方法？（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存Ajax请求结果，每次操作本地变量，不用请求，减少请求次数（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。（4） 当需要设置的样式很多时设置className而不是直接操作style。（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。（7） 图片预加载，将样式表放在顶部，将脚本放在底部  加上时间戳。3.什么叫优雅降级和渐进增强？优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。4.哪些常见操作会造成内存泄漏？内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）5.线程与进程的区别一个程序至少有一个进程,一个进程至少有一个线程. 线程的划分尺度小于进程，使得多线程程序的并发性高。 另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。 线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。
HTML+CSS1.对WEB标准以及W3C的理解与认识标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；2.xhtml和html有什么区别HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同：XHTML 元素必须被正确地嵌套。XHTML 元素必须被关闭。标签名必须用小写字母。XHTML 文档必须拥有根元素。3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 用于声明文档使用那种规范（html/Xhtml）一般为 严格 过度 基于框架的html文档加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug4.行内元素有哪些?块级元素有哪些?CSS的盒模型?块级元素：div p h1 h2 h3 h4 form ul行内元素: a b br i span input selectCss盒模型:内容，border ,margin，padding5.CSS引入的方式有哪些? link和@import的区别是?内联 内嵌 外链 导入区别 ：同时加载前者无兼容性，后者CSS2.1以下浏览器不支持Link 支持使用javascript改变样式，后者不可6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?标签选择符 类选择符 id选择符继承不如指定 Id>class>标签选择后者优先级高7.前端页面有哪三层构成，分别是什么?作用是什么?结构层 Html 表示层 CSS 行为层 js8.css的基本语句构成是?选择器{属性1:值1;属性2:值2;……}9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?Ie(Ie内核) 火狐（Gecko） 谷歌（webkit） opear(Presto)10.写出几种IE6 BUG的解决方法1.双边距BUG float引起的 使用display2.3像素问题 使用float引起的 使用dislpay:inline -3px3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active4.Ie z-index问题 给父级添加position:relative5.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浏览器)Javascript1.javascript的typeof返回哪些数据类型Object number function boolean underfind2.例举3种强制类型转换和2种隐式类型转换?强制（parseInt,parseFloat,number）隐式（== – ===）3.split() join() 的区别前者是切割成数组的形式，后者是将数组转换成字符串4.数组方法pop() push() unshift() shift()Push()尾部添加 pop()尾部删除Unshift()头部添加 shift()头部删除5.事件绑定和普通事件有什么区别6.IE和DOM事件流的区别1.执行顺序不一样、2.参数不一样3.事件加不加on4.this指向问题7.IE和标准下有哪些兼容性的写法Var ev = ev || window.eventdocument.documentElement.clientWidth || document.body.clientWidthVar target = ev.srcElement||ev.target8.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 false16.添加 删除 替换 插入到某个接点的方法obj.appendChidl()obj.innersetBeforeobj.replaceChildobj.removeChild17.解释jsonp的原理，以及为什么不是真正的ajax动态创建script标签，回调函数Ajax是页面无刷新请求数据操作18.javascript的本地对象，内置对象和宿主对象本地对象为array obj regexp等可以new实例化内置对象为gload Math 等不可以实例化的宿主为浏览器自带的document,window 等19.document load 和document ready的区别Document.onload 是在结构和样式加载完才执行jsDocument.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选择器 、 后代选择器（派生选择器）、 群组选择器可以继承： 类选择器 、 标签名选择器、 后代选择器（派生选择器）、群组选择器优先级算法：标签内直接定义：1000ID选择器：100类选择器 ：10标签名选择器：1内联和important中，important优先级高5:前端页面有哪三层构成，分别是什么?作用是什么?结构层；主要指DOM节点；HTML/XHTML样式层；主要是指页面渲染；CSS脚本层：主要指页面动画效果；JS/AS6:css的基本语句构成是?选择符、属性、值8：你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些?怎么会出现?解决方法是什么?IE6、7、8、FF、Opear、Safari、Chrome、MaxthonTrident：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怎么继承a5.看看下面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) // 输出07.ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?8.什么是闭包?下面这个ul，如何点击每一列的时候alert其index?这是第一条这是第二条这是第三条闭包是可以包含自由（未绑定）变量的代码块；这些变量不是在这个代码块或者任何全局上下文中定义的，而是在定义代码块的环境中定义。9.最近看的一篇Javascript的文章是?10.常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件?最常用的库：jquery-1.4.2.min.js常用的前端开发工具：firebug、photoshop、editplus、取色器、色板、eclipse11.说说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，在调试时使用便于开发的模式，调试完成后直接压缩并发布。让用户得到最快捷的用户体验。百度：1、JavaScript有哪几种数据类型2、中alt和tittle的区别3、下面css标签在JavaScript中调用应如何拼写，border-left-color，-moz-4、动态打印 yyyy-mm-dd hh:mm:ss5、如何提高网页的运行速度6、JavaScript中如何对一个对象进行深度clone7、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 && CSS1.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 行内元素有哪些?块级元素有哪些?CSS的盒模型?2.CSS引入的方式有哪些? link和@import的区别?3.CSS选择符有哪些?哪些属性可以继承?优先级?内联和important哪个优先级高?4.经常遇到的浏览器的兼容性有哪些?怎么会出现?解决方法是什么?5.如何居中一个浮动元素?6.HTML5和CSS3的了解情况7.你怎么来实现下面这个设计图Javascript1.怎样添加、移除、移动、复制、创建和查找节点（1）创建新节点      createDocumentFragment()    //创建一个DOM片段      createElement_x_x()   //创建一个具体的元素      createTextNode()   //创建一个文本节点（2）添加、移除、替换、插入      a()      removeChild()      replaceChild()      insertBefore()（3）查找      getElementsByTagName_r()    //通过标签名称      getElementsByName()    //通过元素的Name属性的值      getElementById()    //通过元素Id，唯一性2.怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别3.面向对象编程:b怎么继承a4.看看下面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.你如何去实现这个Tabview10.常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件?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设计方面的知识当然也有用，但那都是基本知识之外的东西。只要基本知识在那儿了，一切就都有了基础，想扩充知识面也不难。可是，如果等到正式上班以后，还得从头学习基本技能，那种难度是不可同日而语的。另外，高级前端工程师与一般工程师相比，肯定需要掌握更多的技能。而面试几乎没有经验大学毕业生，同样也会有一套完全不同的程序。我在这篇文章里列出来的都是一些最基本的东西。对于那些还没有多少面试经验的人，我总是喜欢告诉他们，面试完了只要问自己一个问题就行：你想以后跟这个人在一起共事吗?如果不管为什么，回答是不，那就是不。前端开发工程师面试题 Javascript1. 要动态改变层中内容可以使用的方法有（AB ）a)innerHTMLb)innerTextc)通过设置层的隐藏和显示来实现d)通过设置层的样式属性的display属性2. 当按键盘A时，使用onKeyDown事件打印event.keyCode的结果是（A ）a)65b)13c)97d)373. 在javascript里，下列选项中不属于数组方法的是（B）；a)sort()b)length()c)concat()d)reverse()4. 下列哪一个选项可以用来检索被选定的选项的索引号?(B)a)disabledb)selectedIndexc)optiond)multiple5. 希望图片具有”提交”按钮同样的功能,该如何编写表单提交?(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; iB for(var i =0; iC for(var i =0; iD for(var i =0; i9. 制作级联菜单功能时调用的是下拉列表框的（A ）事件。a)onChangeb)onFocusc)selectedd)onClick10. 下列声明数组的语句中，错误的选项是（ 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:falsb)display:hiddenc)display:noned)display:” ”12. 下列哪一个选项不属于document对象的方法?（D ）a)focus()b)getElementById()c)getElementsByName()d)bgColor()13. 下列哪项是按下键盘事件(AB )a)onKeyDownb)onKeyPressc)keyCoded)onMouseOver14. javascript进行表单验证的目的是（B ）a)把用户的正确信息提交给服务器b)检查提交的数据必须符合实际c)使得页面变得美观、大方d)减轻服务器端的压力15. 、 display属性值的常用取值不包括(C )a)inlineb)blockc)hiddend)none16. 以下有关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 element)* a - 锚点* abbr - 缩写* acronym - 首字* b - 粗体(不推荐)* bdo - bidi override* big - 大字体* br - 换行* cite - 引用* code - 计算机代码(在引用源码的时候需要)* dfn - 定义字段* em - 强调* font - 字体设定(不推荐)* i - 斜体* img - 图片* input - 输入框* kbd - 定义键盘文本* label - 表格标签* q - 短引用* s - 中划线(不推荐)* samp - 定义范例计算机代码* select - 项目选择* small - 小字体文本* span - 常用内联容器，定义文本内区块* strike - 中划线* strong - 粗体强调* sub - 下标* sup - 上标* textarea - 多行文本输入框* tt - 电传文本* u - 下划线* var - 定义变量
块元素(block element)* address - 地址* blockquote - 块引用* center - 举中对齐块* dir - 目录列表* div - 常用块级容易，也是css layout的主要标签* dl - 定义列表* fieldset - form控制组* form - 交互表单* h1 - 大标题* h2 - 副标题* h3 - 3级标题* h4 - 4级标题* h5 - 5级标题* h6 - 6级标题* hr - 水平分隔线* isindex - input prompt* menu - 菜单列表* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容* noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）* ol - 排序表单* p - 段落* pre - 格式化文本* table - 表格* ul - 非排序列表22. 、 javascript中表达式parseInt(“X8X8”)+paseFloat(‘8’)的结果是什么?( C)a)8+8b)88c)16d)“8”+’823. String对象的方法不包括(C )a)charAt()；b)substring()c)lengthd)toUpperCase()24. 关于setTimeout(“check”,10)中说法正确的是( D)a)程序循环执行10次b)Check函数每10秒执行一次c)10做为参数传给函数checkd)Check函数每10毫秒执行一次25. 以下哪个单词不属于javascript关键字：（C）a)withb)parentc)classd)void 前言　　本文总结了一些优质的前端面试题（多数源于网络），初学者阅后也要用心钻研其中的原理，重要知识需要系统学习，透彻学习，形成自己的知识链。万不可投机取巧，只求面试过关是错误的！面试有几点需注意：(来源程劭非老师 github:@wintercn)面试题目： 根据你的等级和职位变化，入门级到专家级：范围↑、深度↑、方向↑。题目类型： 技术视野、项目细节、理论知识题，算法题，开放性题，案例题。进行追问： 可以确保问到你开始不懂或面试官开始不懂为止，这样可以大大延展题目的区分度和深度，知道你的实际能力。因为这种关联知识是长时期的学习，绝对不是临时记得住的。回答问题再棒，面试官（可能是你的直接领导面试），会考虑我要不要这个人做我的同事？所以态度很重要。（感觉更像是相亲）资深的工程师能把 absolute 和 relative 弄混，这样的人不要也罢，因为团队需要的你这个人具有可以依靠的才能（靠谱）。前端开发面试知识点大纲：HTML&CSS：    对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应 JavaScript：      数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。其他：   HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯 作为一名前端工程师，无论工作年头长短都应该必须掌握的知识点：此条由 王子墨 发表在 前端随笔    1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。    2、DOM操作  ——如何添加、移除、移动、复制、创建和查找节点等。    3、事件    —— 如何使用事件，以及IE和标准DOM事件模型之间存在的差别。    4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。    5、严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义。    6、盒模型 —— 外边距、内边距和边框之间的关系，及IE8以下版本的浏览器中的盒模型    7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们    8、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。    9、HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。    10、JSON  —— 作用、用途、设计结构。