2017年前端工程师面试题及参考答案.docxVIP

2017年前端工程师面试题及参考答案

一、HTML/CSS基础（2017年高频考点）

1.请简述HTML5新增的语义化标签，以及使用它们的优势

答案：HTML5新增的语义标签主要有header、footer、nav、article、section、aside这些。优势很实际：首先是结构更清晰，不用再堆一堆divclass=header这种无意义的容器，读代码的时候一眼就知道哪部分是导航、哪部分是正文；然后对SEO友好，搜索引擎能更好地识别页面结构，抓取关键内容；还有兼容性也没问题，2017年主流浏览器都支持，就算是老IE，加个html5shiv.js垫片就能解决。

2.说说CSS3中的flex布局，以及常用的属性（容器和项目）

答案：flex布局就是弹性盒，2017年已经是移动端布局的主流了，比浮动好用太多，不用再清浮动。容器的常用属性：display:flex开启弹性布局；flex-direction控制主轴方向（row横向、column纵向）；justify-content主轴对齐方式（center居中、space-between两端对齐）；align-items交叉轴对齐方式（center垂直居中很常用）；flex-wrap控制是否换行（nowrap不换行，wrap自动换行）。项目的属性：flex:1（等同于flex-grow:1、flex-shrink:1、flex-basis:0%），用来让项目平分空间；align-self可以单独设置某个项目的对齐方式，覆盖容器的align-items。

3.解释CSS中的BFC，以及如何触发BFC

答案：BFC就是块级格式化上下文，简单说就是一个独立的布局环境，里面的元素布局不会影响外面的。2017年面试常考，因为能解决很多布局问题。触发方式：给元素设置overflow:hidden（最常用，没副作用）、display:inline-block、position:absolute/fixed，还有display:flow-root（但当时用得少）。BFC的用处：清除浮动（父元素触发BFC后，不会被浮动子元素撑塌）、解决margin重叠（两个相邻块级元素都触发BFC，垂直margin就不会叠在一起了）。

二、JavaScript核心（2017年重点考察）

1.请简述闭包的概念、用途及可能引发的问题

答案：闭包其实就是函数嵌套，内部函数能访问外部函数的变量，而且外部函数执行完后，这些变量还不会被销毁。用途很实在：一是模块化，比如用闭包封装私有变量，避免全局污染（2017年还没有ES6模块普及，闭包是模块化的主要方式之一）；二是防抖节流（比如搜索框输入防抖，用闭包保存定时器ID）；三是柯里化函数（比如add(1)(2)(3)这种写法）。注意点：闭包会让变量常驻内存，用多了可能导致内存泄漏，所以不用的时候要手动释放变量（比如把引用设为null）。

2.解释原型和原型链，以及JavaScript的继承方式（2017年主流）

答案：原型就是每个函数都有的prototype属性，实例对象会通过__proto__指向这个原型对象，原型对象里的属性和方法，实例都能共享。原型链就是实例的__proto__指向原型，原型的__proto__又指向它的原型，一直到Ototype，Ototype的__proto__是null，这就是原型链。继承方式：2017年最常用的是“原型链继承+构造函数继承”的组合继承（比如Ctotype=newParent()，再在Child构造函数里callParent）；还有寄生组合继承（优化组合继承，避免重复调用父构造函数），当时是比较推荐的写法；ES6的class和extends已经有了，但很多老项目还在用ES5的继承方式，所以面试都会问。

3.说说事件委托的原理和优势，举个实际应用场景

答案：事件委托就是利用事件冒泡，把子元素的事件绑定到父元素上。原理是事件触发后会从子元素往上冒泡，父元素捕获到事件后，通过event.target判断是哪个子元素触发的，再执行对应逻辑。优势：减少事件绑定次数（比如列表有100个li，不用每个li都绑click，绑ul就行），提高性能；新增子元素不用重新绑定事件（比如动态加载的列表项，自动有事件响应）。场景：比如页面上的导航菜单，菜单项可能动态添加，用事件委托给父菜单绑定click事件，判断点击的是哪个菜单项，执行跳转逻辑。

4.简述Promise的概念和常用方法，解决了什么问题

答案：Promise是ES6新增的异步编程解决方案，