前端工程师面试

前端工程师不一定需要懂设计方面。倘若有这等要求，前端工程师岂不是一项除其本身特征性工作外还包含用户界面设计、视觉设计、业务逻辑及交互动画设计师等工作的职称了么！前端工程师，主要工作内容与用户界面的表现紧密联系，但均为在图形上或以其为基础通过某种实现方式去正确、准确呈现什么。之所以以“主要工作”修饰，是因为 / 的出现与发展致使前端被引入服务器端性质的工作内容。在能力方面：对 HTML / CSS / JavaScript 具有专家级别的知识；有较熟练使用 AngularJS / / jQuery 或者其它类库的经验；较熟悉第三方组件（插件）生态环境及具体案例；有较熟练使用 Jade / Swig / Handlebars / Mustache 或者其它模板引擎的经验；有较熟练使用 SASS 或者其它 CSS 预处理器的经验；有较熟练使用 CoffeeScript 的经验；对 CSS / JavaScript 设计模式有很好的认识及应用；对常用数据结构和算法熟悉；有使用 GruntJS / GulpJS 任务运行器的经验；有使用 Yeoman 生成器的经验；有诸如 Bower / Volo / JSPM 等前端静态资源包管理器使用经验；熟悉本地及远程（真机）调试操作；有 Git 的使用经验；意识驱动行为，所以：有自己的技术信仰；有渴望尝试新技术的强烈愿景及较强的主观学习、客观探索能力；拥有令人难以置信的关注细节的精神；在诸如 Github、Sitepoint 等这样的技术社区活动；因为你不是一个人工作，并且要对一个产品付之责任心，所以：有良好的编程风格和文档习惯；对模块化开发及相关标准有很好的认识及应用；有对网页标准和标准制定机构重要性较深刻的理解；建站过程中考虑其它诸如UI、安全性、高性能、SEO、可维护性以及技术因素等方面；有跨浏览器（主：兼容性）、跨设备（主：响应式）开发并测试页面的经验；对网格在WEB设计中的应用有深刻的理解，以及具备系统（有组织）地实现出来的能力；能够独立工作并做出正确的抉择；能够适应不断变化的更新 / 扩展 / 改版需求，同时处理多个项目；能够提供准确的定时估计工作（适应准时交付管理法则）；有与服务器端程序开发人员协同工作的经验；能够（熟练）阅读英文资料；有一定的工作压力承受能力；然后再为自己从长远打算及加分：有 NodeJS Web / 服务器 / 客户端应用程序设计、开发、优化经验；有 MangoDB / Redis 等No SQL 数据库设计、实现、维护经验；有使用 PhoneGap / Apache Cordova 进行移动应用开发经验；有浏览器 Addon 扩展（以扩展的形式添加一些为提高用户体验的附加功能）开发经验者；

今天小编要跟大家分享的文章是关于参加Web前端面试的常见面试题汇总。准备参加Web前端面试的小伙伴们来和小编一起看一看吧，希望本篇文章能够对大家有所帮助。1.渐进增强与优雅降级渐进增强并不是一种技术，而是一种设计思想。各个浏览器的渲染能力各不相同，要做一个每个人都能看到的网页、感受到的体验都一致的网站几乎不可能。但还是得网站的可访问性，保证用户在任何环境下都能正常访问网页得核心内容或能使用基本功能(避免网页打不开、排版错误等)，并为他们提供当前条件下最好的体验，这就是渐进增强得核心思想。优雅降级也是一种设计思想，为了保证在高版本浏览器中提供最好的体验，碰到低版本浏览器再降级进行兼容处理，使其能正常浏览。这两种思想的区别在于：1.渐进增强是向上兼容，优雅降级是向下兼容;2.渐进增强是从简单到复杂，优雅降级是从复杂到简单;3.渐进增强关注的是内容(保证核心内容)，优雅降级关注的是浏览体验(为了兼容低版本浏览器)作用DTD(DocumentTypeDefinition，文档类型定义)是一系列的语法规则，用来定义XML或(X)HTML的文档类型。浏览器会使用它来判断文档类型，决定何种协议来解析，以及切换浏览模式。DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。如果文档代码不合法，那么浏览器解析时便会出现一些差错。HTML5的文档类型声明：(严格模式)的DTD包含所有HTML元素和属性，但不包括展示性的和弃用的元素(如font)，它的文档类型声明："">标准模式与怪异模式怪异模式(QuirksMode)用于模拟旧浏览器的行为。早期的网站并不会遵循完整的规范，随着浏览器支持越来越多的规范，在那些旧的浏览器中开发的页面在显示时会被破坏。为了向后兼容，浏览器发明了怪异模式，一行错误或无效的DOCTYPE都会触发怪异模式。浏览器使用文件开头的DOCTYPE来决定用怪异模式处理或标准模式处理。DOCTYPE可以确保不同浏览器以相同的方式解析文档，以及执行相同的渲染模式。怪异模式与标准模式的主要区别：1.怪异模式的宽度和高度会包含padding和border。标准模式不包含，标准模式下可以通过设置box-sizing:border-box将标准盒模型转化成怪异模式下的盒模型。2.怪异模式下，当内容超出容器高度时，会将容器拉伸，而不是溢出。3.怪异模式下，在表格中的字体样式(如font-size)不会继承。4.怪异模式下颜色值必须使用十六进制标记法。3.语义化HTML5中的语义化就是让元素、属性或属性值有含义，更准确地标记特定类型的内容。对元素语义化的目的是为了让元素的语义和呈现分离，元素只负责文档内容的结构与含义，而CSS样式控制内容的呈现，像元素，没有语义但却能将字体变粗，这类元素违背了语义化的目的，将会被废弃。优点·使得HTML文档结构清晰、布局合理、主体突出、可读性更强。·有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。·方便其他设备解析，如盲人阅读器根据语义渲染网页。·有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。语义化标签·定义文档的页眉区域,应作为介绍内容或者导航链接栏的容器;·footer内容的页脚，通常包含该章节作者、版权数据或者与文档相关的链接等信息;·article文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目;·nav描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表;·section表示文档中的一个区域(或节)，比如，内容中的一个专题组;·main定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框(搜索框作为文档的主要内容);·aside表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。4.超链接伪类:link、:visited、:active和:hover的声明顺序是怎样的?:link表示未访问的链接状态;:visited表示已访问状态;:active表示激活状态(鼠标按下);:hover表示悬停状态。推荐顺序是LVHA，即:link:visited:hover:active。理由如下：·当鼠标悬停在未访问的链接上时，:link和:hover都会命中，如果:hover在:link之前声明，那么(:hover)就会被覆盖;·当鼠标悬停在已访问的连接上时，:visited和:hover都会命中，如果:hover在:visited之前声明，那么(:hover)就会被覆盖;·当鼠标单击链接时，:active和:hover都会命中，我们大多是想让:hover只在悬停时展示样式，按下鼠标时使用:active样式，因此:active在:hover之后声明;·综上，:hover应在:link和:visited之后，在:active之前，因此active在最后。而:link和:visited两者的顺序无所谓，互不影响。常见的长度单位CSS中除了px长度单位之外，还有下面几个长度单位：·pc六分之一英寸，1pc=12pt=1/6*1in=16px;·pt一磅，72分之一英寸。1pt=1/12_1pc=1/72_1in≈;·in一英寸，1in=;·ex在含有“X”字母的字体中，它是该字体的小写字母的高度。对于很多字体来说，1ex≈;·em1em等于父级元素的字体大小，2em就是父级元素字体大小的二倍;·rem当用在根元素()的font-size上面时，它代表了它的初始值;·ch代表元素所用字体font中“0”这一字形的宽度;·vh1vh相当于视口高度的1%，100vh就是视口的高度;·vw1vw相当于视口宽度的1%，100vw就是视口的宽度;·vmax视口高度vw和宽度vh两者中的最小值·vmin视口高度vw和宽度vh两种中的最大值;·%相对于父级元素的大小来确定;参考：CSS[1]CSSpercentage[2]6.事件对象冒泡与捕获事件冒泡与捕获是事件处理的两种机制，主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。在点击子元素时，浏览器运行了两种不同的阶段：捕获阶段和冒泡阶段。捕获阶段的行为：·浏览器检查元素的最外层祖先，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它;·然后，它移动到中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素;而冒泡与捕获恰恰相反：·浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它;·然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达元素;而现代浏览器在默认情况下，所有事件处理程序都在冒泡阶段进行注册。因此上面代码在点击子元素时会先执行子元素绑定的事件，然后向上冒泡，触发父元素绑定的事件。addEventListener函数的第三个参数是个布尔值。含义：·当布尔值是false时(这也是默认值)，表示向上冒泡触发事件;·当布尔值是true时，表示向下捕获触发事件;不能冒泡的事件有些事件是不会冒泡的。比如：·blur元素失去焦点时触发，focusout事件也是失去焦点时触发，但可以冒泡;·focus元素获取焦点时触发;·mouseenter鼠标移动到元素上时会触发该事件，与之对应的是mouseover事件，但会冒泡;·mouseleave鼠标离开元素时触发，与之对应的是mouseout，但会冒泡;事件冒泡可以让我们利用事件委托，尤其是处理大量子元素时，如果给每个子元素都绑定事件，这是不优雅的，可以将事件绑定到父元素上，并让子节点上发生的事件冒泡到父节点上，利用属性可以获取到当前触发事件的子元素。事件对象中的方法·stopPropagation()阻止事件冒泡，当设置后，点击该元素时父元素绑定的事件就不会再触发;·preventDefault()阻止默认事件的发生;·stopImmediatePropagation()它用来阻止监听同一事件的其他事件监听器被调用以及阻止事件冒泡，比如给同一个div元素绑定多个click事件(使用addEventListener方法可以注册多个)，当在第二个事件函数中调用stopImmediatePropagation方法时，点击div元素时，后面注册的click将不会被触发，而且还会阻止事件冒泡;比如下面的例子，给p绑定多个click事件，在第二个事件函数中调用stopImmediatePropagation，第三个click事件就不会触发，因为也阻止了冒泡，因此父元素的click事件也不会触发。paragraph


("div").addEventListener("click",(event)=>{


alert("我是div元素,我是p元素的上层元素");


//p元素的click事件没有向上冒泡，该函数不会被执行


},false);


constp=('p')


("click",(event)=>{


alert("我是p元素上被绑定的第一个监听函数");


},false);


("click",(event)=>{


alert("我是p元素上被绑定的第二个监听函数");


();


//执行stopImmediatePropagation方法，阻止click事件冒泡，并且阻止p元素上绑定的其他click
事件的事件监听函数的执行.


},false);


("click",(event)=>{


alert("我是p元素上被绑定的第三个监听函数");


//该监听函数排在上个函数后面，该函数不会被执行


},false);


“在IE浏览器中，使用也可以取消事件冒泡;使用也能阻止默认事件的发生。target与currentTargettarget属性指向的是事件目标，而currentTarget属性指向的是正在处理当前事件的对象，它总是指向事件绑定的元素。而target指向的可能不是定义时的事件目标。例如：('click',(e)=>{();},false);可能指向div元素，也可能指向它的子元素。而总是指向div元素。以上就是小编今天为大家分享的关于参加Web前端面试的常见面试题汇总的文章，希望本篇文章能够对正准备参加前端面试的小伙伴们有所帮助，想要了解更多Web前端知识记得关注北大青鸟Web前端培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端工程师。参考资料[1]CSSlength:#/zh-CN/docs/Web/CSS/length[2]CSSpercentage:#/zh-CN/docs/Web/CSS/percentage

从前端开发要掌握的技术来讲，前面已经说得差不多了。我主要想从面试者的角度谈一谈看法。如果是我面试，就给应聘者一个开放的项目，可以提供服务器端API或数据服务，限定一周时间，这叫试做。然后，根据评审确定入围的人，再面试。面试可以围绕项目展开，首先让面试者围绕HTML、CSS和JavaScript讲一讲设计思路、实现过程、遇到了什么困难，如何解决的，最终实现方案与设计有什么出入，有什么收获，等等。然后再根据项目中的不足有针对性地提问测试，考察面试者的实际经验和解决问题的能力。解决实际问题的能力最重要。总之，实际的开发工作不同于考试，考试设计得越接近实际工作需要，结果才可能越真实，才可能真正招到想要的人。

面试其实就是一个不断选择与被选择的过程(不知道说的对不对)。不同公司的面试方式都有所不同，大多数人都有过多次面试的经历，前端面试也不外乎那么一些啦(好像有些废话的感觉)。

面试之前的小故事

HR会打电话过来我是××公司的，在××上看到你投到我们公司的简历，问你何时候有空约一个呗，然后说就星期*吧，既然都打电话请我面试了，好吧，那就约一个!

然后有些人会精心准备，不停刷面试题，整夜整夜的看着HTML/JS/CSS知识点，还有那些最新的、时髦的技术，看看到时候能不能唬住面试官;而有些人对自己胸有成竹，哥那么多年的前端经验了，啥项目没有经历过，不就一个面试，怕啥呢。

很快或者很慢的来到那天。你打扮的清清爽爽漂漂亮亮的，打扮的好会有加分不，没错，第一印象也是挺重要的。途中有些人可能会还一直想着面试官会问啥题目呢，那啥**属性是什么来着呢，再次拿出手机默默的看起资料;有些人可能就会想着公司不知道妹子多不多漂亮不呢，环境和福利不知道咋样，最好别碰到傻逼一样的面试官哎，不然这以后咋相处好呢。

来到公司，大小公司大家都见多了嘛，也是得看发展是吧，我们也不是肤浅的人，见到前台妹妹，哟，还不错哦。领你进会议室里，让你稍等一下，她去通知面试官，过了一会儿，不是面试官进来，那就是前台妹妹给您送来一杯水。面试官踱步向前，咦~，我是继续坐着呢，还是站着呢，还是站起来显礼貌一些嗯。

给面试的一般会是Team Leader或者非常资深的工程师。首先会让你自我介绍下，然后巴拉巴拉介绍自己，途中或者聊到面试官喜欢的`部分那就会中断问几个问题吧，介绍完自己，就进入正式的战斗了吧，一般会有2-3轮的回合。遇知战斗详情，请听下回分解。

哈哈， 开玩笑。以上瞎编胡造，如有雷同，纯属巧合。

这里就只谈谈前端技术的战斗回合吧，写的不好，请多见谅。

普通型

面试中问题会比较的零碎，html/js/css肯定都会有涉及。知识点不会有太大的规律，可能几个公司面试下来你遇到的问题一个都不带重复的。哎，前端的知识点就是乍一看深似海，仔细一看深似黑洞啊。问题好的话，一方面考察了面试人对前端接触的广度，深度的话也可以从中接触到一些。因为面试的时间有限，其实也非常考验面试官对一个人的洞察能力。

一般如果不是应届生的话，也就是会跟你交流你之前的项目，你担当的角色，你遇到的难题，怎么解决问题，用的框架，与其他工程师的交流沟通协作等等。 这些其实你心里肯定是有答案的(可能也有懵逼的)，就看你的表达，能不能对上面试官的胃口。

进阶型

除了基本的问题，面试中会有一些明显设计过的题目。针对某几个知识点，或让你手写代码，或让你提供算法或思路。如果之前没有遇到过这类问题的话其实一下子真的挺难回答，或者直接懵逼了，或者回答不出面试官满意的答案。这其实对工程师的要求也是比较的高，不能只是单纯的切切页面，用用插件，需要对某一类问题或者模式或者算法有深入的了解，对问题的解决思路有很好的把握。

算法可能不是前端工程师的长项，但作为优秀的工程师，对算法的了解应该会只深不浅。

这种面试的题目既提现了公司对面试者的要求，也相对而言的会有所体现公司的水平。

出题型

题目比较的综合，会通过邮件发给你，或者有专门的页面提供，在面试之前让你2-3天的时间做完。题目可能是很有名的某一类交互，或游戏，或页面，或公司自己出的一类小东西。

因为非当场面试，所有有比较充足的时间来思考，来写一些代码。一般都会完成，所以其实比较的关注点就是对代码的质量，通过代码来考察面试者的思路以及代码**惯等等。

其未知性也比较多，可能因为有些东西可能没法通过代码来传递，沟通，其他的思路，或者题目的缺陷等等。所以这只是面试途中的一个小部分，大多数人其实都会能做的很好。

直接上机型

还有的就会直接给你某一个交互，或者一张静态页面，或者一个布局等等，直接给你台电脑让你当场写出来。写完之后再有所交流，说说自己的想法或者接着谈其他的。

当你写代码时候，其实暴露的东西也挺多的。你写的**惯，思路清晰不清晰，对代码的熟悉程度，可能你平时都是ctrl C + V的，这时候你咋办呢。

这个可能遇到的比较少，但也会是有的。

结束语

许多面试可能都会结合以上的几种类型，多方面的考察面试者，其实，大家都懂的。