1、2018年JS工程师面试题及答案HTMLCSS1对WEB标准以及W3C的理解与认识标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链CSS和JS脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；2XHTML和HTML有什么区别HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同XHTML元素必须被正确地嵌套。XHTML元素必须被关闭。标签名必须用小写字母。XHTML文档必须拥有根元素。3DO
2、CTYPE严格模式与混杂模式如何触发这两种模式，区分它们有何意义用于声明文档使用那种规范（HTML/XHTML）一般为严格过度基于框架的HTML文档加入XML声明可触发，解析方式更改为IE55拥有IE55的BUG4行内元素有哪些块级元素有哪些CSS的盒模型块级元素DIVPH1H2H3H4FORMUL行内元素ABBRISPANINPUTSELECTCSS盒模型内容，BORDER,MARGIN，PADDING5CSS引入的方式有哪些LINK和IMPORT的区别是内联内嵌外链导入区别同时加载前者无兼容性，后者CSS21以下浏览器不支持LINK支持使用JAVASCRIPT改变样式，后者不可。6CSS选
3、择符有哪些哪些属性可以继承优先级算法如何计算内联和IMPORTANT哪个优先级高标签选择符类选择符ID选择符继承不如指定IDCLASS标签选择后者优先级高7前端页面有哪三层构成，分别是什么作用是什么结构层HTML表示层CSS行为层JS8CSS的基本语句构成是选择器属性1值1属性2值29你做的页面在哪些流览器测试过这些浏览器的内核分别是什么IEIE内核火狐（GECKO）谷歌（WEBKIT）OPEARPRESTO10写出几种IE6BUG的解决方法1双边距BUGFLOAT引起的使用DISPLAY23像素问题使用FLOAT引起的使用DISLPAYINLINE3PX3超链接HOVER点击后失效使用正确的
4、书写顺序LINKVISITEDHOVERACTIVE4IEZINDEX问题给父级添加POSITIONRELATIVE5PNG透明使用JS代码改6MINHEIGHT最小高度IMPORTANT解决7SELECT在IE6下遮盖使用IFRAME嵌套8为什么没有办法定义1PX左右的宽度容器（IE6默认的行高造成的，使用OVERHIDDEN,ZOOM008LINEHEIGHT1PX）11标签上TITLE与ALT属性的区别是什么ALT当图片不显示是用文字代表。TITLE为该属性提供信息12描述CSSRESET的作用和用途。RESET重置浏览器的CSS默认属性浏览器的品种不同，样式不同，然后重置，让他们统一1
5、3解释CSSSPRITES，如何使用。CSS精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量14浏览器标准模式和怪异模式之间的区别是什么盒子模型渲染模式的不同使用WINDOWTOPDOCUMENTCOMPATMODE可显示为什么模式15你如何对网站的文件和资源进行优化期待的解决方案包括文件合并文件最小化/文件压缩使用CDN托管缓存的使用16什么是语义化的HTML直观的认识标签对于搜索引擎的抓取有好处17清除浮动的几种方式，各自的优缺点1使用空标签清除浮动CLEARBOTH（理论上能清楚任何标签，增加无意义的标签）2使用OVERFLOWAUTO（空标签元素清除浮动而不得不增加无
6、意代码的弊端,使用ZOOM1用于兼容IE）3是用AFERT伪元素清除浮动用于非IE浏览器JAVASCRIPT1JAVASCRIPT的TYPEOF返回哪些数据类型OBJECTNUMBERFUNCTIONBOOLEANUNDERFIND2例举3种强制类型转换和2种隐式类型转换强制（PARSEINT,PARSEFLOAT,NUMBER）隐式（）3SPLITJOIN的区别前者是切割成数组的形式，后者是将数组转换成字符串4数组方法POPPUSHUNSHIFTSHIFTPUSH尾部添加POP尾部删除UNSHIFT头部添加SHIFT头部删除5事件绑定和普通事件有什么区别6IE和DOM事件流的区别1执行顺序不
7、一样、2参数不一样3事件加不加ON4THIS指向问题7IE和标准下有哪些兼容性的写法VAREVEV|WINDOWEVENTDOCUMENTDOCUMENTELEMENTCLIENTWIDTH|DOCUMENTBODYCLIENTWIDTHVARTARGETEVSRCELEMENT|EVTARGET8AJAX请求的时候GET和POST方式的区别一个在URL后面一个放在虚拟载体里面有大小限制安全问题应用不同一个是论坛等只需要请求的，一个是类似修改密码的9CALL和APPLY的区别OBJECTCALLTHIS,OBJ1,OBJ2,OBJ3OBJECTAPPLYTHIS,ARGUMENTS10AJAX
8、请求时，如何解释JSON数据使用EVALPARSE鉴于安全性考虑使用PARSE更靠谱11B继承A的方法12写一个获取非行间样式的函数FUNCTIONGETSTYLEOBJ,ATTR,VALUEIFVALUEIFOBJCURRENTSTYLERETURNOBJCURRENTSTYLEATTRELSEOBJGETCOMPUTEDSTYLEATTR,FALSEELSEOBJSTYLEATTRVALUE13事件委托是什么让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行HTTP/WWWWEBASILYCOM/P78例子可见此链接14闭包是什么，有什么特性，对页面有什么影响闭包就是能够读取
9、其他函数内部变量的函数。HTTP/BLOGCSDNNET/GAOSHANWUDI/ARTICLE/DETAILS/7355794此链接可查看（问这个问题的不是一个公司）15如何阻止事件冒泡和默认事件CANCEBUBBLERETURNFALSE16添加删除替换插入到某个接点的方法OBJAPPENDCHIDLOBJINNERSETBEFOREOBJREPLACECHILDOBJREMOVECHILD17解释JSONP的原理，以及为什么不是真正的AJAX动态创建SCRIPT标签，回调函数AJAX是页面无刷新请求数据操作18JAVASCRIPT的本地对象，内置对象和宿主对象本地对象为ARRAYOBJR
10、EGEXP等可以NEW实例化内置对象为GLOADMATH等不可以实例化的宿主为浏览器自带的DOCUMENT,WINDOW等19DOCUMENTLOAD和DOCUMENTREADY的区别DOCUMENTONLOAD是在结构和样式加载完才执行JSDOCUMENTREADY原生种没有这个方法，JQUERY中有READYFUNCTION20”和“”的不同前者会自动转换类型后者不会21JAVASCRIPT的同源策略一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合22编写一个数组去重的方法FUNCTIONOSORTARRVARRESULTVARNEWARRF
11、ORVARI0IIFRESULTARRNEWARRPUSHARRRESULTARR1RETURNNEWARR重申一下，上述这些知识点都应该是你应该“想都不用想”的东西。我一开始问的所有问题都是想摸清你对所有这些领域知识的掌握程度。虽然上面列出的这些知识点并没有面面俱到，但我觉得你至少应该掌握这些，才有可能跟我坐到一间办公室里来。少量提问我非常赞同面试者问的问题越少越好。反复问应聘者各种问题既不公平，也很无聊。我在任何一次面试中，通常只问三个大问题，但每个问题又会涉及我所能想到的多个方面。回答每个大问题一般要经过几个步骤，这样我就可以在每个步骤中穿插着问一些小问题。比如说现在有一个正显示着YAH
12、OO股票价格的页面。页面上有一个按钮，你可以单击它来刷新价格，但不会重新加载页面。请你描述一下实现这个功能的过程，假设服务器会负责准备好正确的股票价格数据。这个问题牵扯到一组我想要考察的基本知识点DOM结构、DOM操作、事件处理、XHR和JSON。如果我要求你对换一种处理股票价格的方式，或者让你在页面中显示其他信息，就可以把更多的知识点包括进来。对于经验比较丰富应聘者，我也可以自如地扩展要考察的知识范围，最简单像JOSN与XML的区别、安全问题、容量问题，等等。我还希望应聘者给出的任何解决方案中都不要使用库。我想看到最原生态的代码，你就当页面中没有包含任何库。你说你对哪个库了解多少多少，但我不
13、能把关于库的知识作为评判能力的因素，因为库是会随时间变化的。我需要的是真正理解库背后的机制，特别是能够徒手写出一个自己的库的人。解决问题做为一名前端工程师，最值得高兴的事莫过于解决同一个问题会有很多种不同的方法，而你要做的就是找出最合适的方法来。我在提问的时候，经常会在应聘者解释完一种方法后问他们还有没有第二种方法。此时我会跟他们说，假设你的这个方法由于种种原因被否决了，那么你还能不能给出另一种方法。这样做可以达到两个目的。首先，可以测试出他们是否在毫无意义地复述书本中的东西。不能不承认，某些人确实有过目不忘的天赋，听他们在那里滔滔不绝地讲，你会觉得他们什么都明白。可是，只要一跟这些人谈到怎么
14、查找方案无效的原因，以及能否拿出一个新方案来，他们往往就傻眼了。这时候，如果我听到“我不明白这个方案为什么不够好”之类的反问，心里立刻就明白我的问题已经超出了他们的能力范围，而他们只是想拿自己死记硬背的结论来蒙混过关。其次，可以测试出他们已经掌握的（还是那句话，“想都不用想”）浏览器技术知识。如果他们对浏览器平台的核心知识有较好的理解，想出解决同一问题的不同方案根本没有那么难。对一名前端工程师来说，这绝对是最重要的能力。前端工程师在工作中遇到本该如此却并未如此的难题（说你啦，IE6），应该说是一件很平常的事。一个方案无效就无计可施的人，做不了前端工程师。考核应聘者解决问题能力的另一层原因，与我
15、的个人喜好有关。在搞清楚应聘者知道什么不知道什么之后，我就会想着问一个他们知识领域之外的问题。这样做的目的，就是想看看他们怎样运用已有的知识解决新问题。在解决问题的每一步，我也准备了一些提示，以防有人会卡壳打艮（在我面前15分钟一言不发，对我评价这个人毫无帮助）。我真正感兴趣的，是他们能够从上一步前进到下一步。我希望看到一个人就在我眼前学到新知识。注意所有问题都与浏览器技术相关。我不相信出几道抽象的逻辑题，就能够考出某人解决WEB技术问题的能力。在我看来，这无异于让素描大师画肖像（或者让刘翔跟博尔特同场竞技），没有意义，也得不到任何有价值的信息。有激情要成为一名优秀的前端工程师，最重要的莫过于
16、对自己做的事要有激情。我们技能都不是从学校中或者从研讨会上学来的，因此前端工程师必须具备自学能力。浏览器技术的变化可谓日新月异，所以也只有不断提升自己的技能才做得到与时俱进。我虽然不能强迫谁必须多看博客、不断学习，但想应聘前端工程师的人恐怕还是必须这么做的。你怎么知道谁对这种工作有没有激情实际上非常简单。我只问一个简单的问题“目前你对什么WEB技术最感兴趣”这个问题永远不会过期，而且也几乎不可能出错除非你答不上来。就眼下来说，我希望你对这个问题给出的技术中包括WEBSOCKET、HTML、WEBGL、客户端数据库，等等。只有对WEB开发充满激情的人，才会坚持不懈地学习新知识、掌握新技能；这些人
17、才是我真正想要的。当然，我会让他们详细解释自己提到的技术，以保证他们不是随口说了几个时髦的新词汇。最后一点计算机科学或者WEB设计方面的知识当然也有用，但那都是基本知识之外的东西。只要基本知识在那儿了，一切就都有了基础，想扩充知识面也不难。可是，如果等到正式上班以后，还得从头学习基本技能，那种难度是不可同日而语的。另外，高级前端工程师与一般工程师相比，肯定需要掌握更多的技能。而面试几乎没有经验大学毕业生，同样也会有一套完全不同的程序。我在这篇文章里列出来的都是一些最基本的东西。对于那些还没有多少面试经验的人，我总是喜欢告诉他们，面试完了只要问自己一个问题就行你想以后跟这个人在一起共事吗如果不管
18、为什么，回答是不，那就是不。面试前端工程师对我来说是一件非常有意思的事，因为面试过程很大程度上也是自我提升的过程。无论大公司还是小公司，之所以在如何招聘到真正有能力的前端工程师方面会遇到同样的问题，就是因为负责招聘的那些人不知道自己公司需要什么样的人，结果问问题时也问不到点子上。经过这几年在行业里的摸索，我总结出了自己的一套很有效的面试前端工程的方法。有的应聘者说我不好对付，但留给他们这样的印象也并非我所愿。我觉得之所以他们说我不好对付，主要是因为我问他们问题时问得太细了。以前我曾专门写过一些东西，告诉应聘者怎么才能通过我的面试（SURVIVINGANINTERVIEWWITHME）以及优秀的
19、前面工程师应该具备什么样的素质（WHATMAKESAGOODFRONTENDENGINEER），而我的面试可以说完全是按照那两篇文章的标准进行的。我不会问一些特别偏门的问题，也不认为出几道逻辑题就能考出人的真实水平。我唯一的想法就是确定你能否胜任我们要招的这个职位。为此，我需要简单地考察如下几个方面。基本知识我们生活在互联网时代，你想知道的任何事情几乎都能在15分钟内找到相关信息。可是，能找到信息并不等于你会使用它。我认为所有前端工程师至少都应该掌握某些基本的知识，才能有效地完成自己的工作。如果一遇到问题，就停下工作上网四处搜索解决方案，怎么可能保证按期完成工作呢听听，还有谁在说“我不知道，但
20、我可以上网搜到。”请这些同学把手举起来，让大家认识一下（IMMEDIATELYRAISESAFLAGFORME）。下面我列出一些基本的知识点，这些都是我认为一名前端工程师（无论工作年头长短）在没有任何外来帮助的情况应该知道的。DOM结构两个节点之间可能存在哪些关系以及如何在节点之间任意移动。DOM操作怎样添加、移除、移动、复制、创建和查找节点。事件怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。XMLHTTPREQUEST这是什么、怎样完整地执行一次GET请求、怎样检测错误。严格模式与混杂模式如何触发这两种模式，区分它们有何意义。盒模型外边距、内边距和边框之间的关系，IE8以下版本的
21、浏览器中的盒模型有什么不同。块级元素与行内元素怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。浮动元素怎么使用它们、它们有什么问题以及怎么解决这些问题。HTML与XHTML二者有什么区别，你觉得应该使用哪一个并说出理由。JSON它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。前端开发面试知识点大纲HTMLCSS对WEB标准的理解、浏览器内核差异、兼容性、HACK、CSS基本功布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应JAVASCRIPT数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、
22、事件机制、异步装载回调、模板引擎、NODEJS、JSON、AJAX等。其他HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯作为一名前端工程师，无论工作年头长短都应该必须掌握的知识点1、DOM结构两个节点之间可能存在哪些关系以及如何在节点之间任意移动。2、DOM操作如何添加、移除、移动、复制、创建和查找节点等。3、事件如何使用事件，以及IE和标准DOM事件模型之间存在的差别。4、XMLHTTPREQUEST这是什么、怎样完整地执行一次GET请求、怎样检测错误。5、严格模式与混杂模式如何触发这两种模式，区分它们有何意义。6、盒模型外边距、内边距和边
23、框之间的关系，及IE8以下版本的浏览器中的盒模型7、块级元素与行内元素怎么用CSS控制它们、以及如何合理的使用它们8、浮动元素怎么使用它们、它们有什么问题以及怎么解决这些问题。9、HTML与XHTML二者有什么区别，你觉得应该使用哪一个并说出理由。10、JSON作用、用途、设计结构。考试注意事项一、考前要求考前复习要注重查缺补漏，着眼与自己水平相近知识的复习，减少大量（难度过大）的训练。中午和晚上要注意多休息，保证睡眠充足。注意饮食安全，不要吃的过饱，也不能空腹考试，更不能乱吃乱饮。提前准备好考试所需的物品（如钢笔、圆珠笔、铅笔、橡皮、尺子、圆规、小刀等）。要按时到指定考场考试，不能迟到，提前
24、10分钟到考场（第一场提前20分钟）。进入考场，不要说笑，做到心情平静、神情放松，默默回忆老师讲过的知识，尽快进入考试状态。二、考试要求试卷发下后，先把姓名、考号写好。做题时要先审题，再做题。先易后难，由前到后，先把会做的做好，不会的，在全部完成后再思考。注意卷面要整洁，书写要工整，步骤要规范、齐全、清晰，不要乱涂乱划，确保不丢印象分、情感分。做完后要好好检查试卷，保证不出错、不漏题（不抄错题）、不空卷、答案不写进密封线。合理安排考试时间，由时间决定答题速度，严禁提前出考场。三、考后要求不要相互之间对答案，以免因不良情绪影响下场考试。考后不要在考场附近逗留、吵闹，作好休息，调整好状态，适度复习，做好下一场考试的准备。态度决定一切，付出总有回报，爱拼才会赢，优异的成绩在向你招手，祝你成功
