2017年前端面试经历3-蚂蜂窝

那一阵子接收到了好几个望京的面试，有360旗下的一个做企业安全的公司，由蚂蜂窝，有美团外卖和美团点评。对360的企业文化不赞同，加班太多，美团外卖由于灰心丧气没有去面试，只有马蜂窝和美团点评去了，美团点评以后再说，这次谈谈蚂蜂窝。

对蚂蜂窝是16年去三亚的时候接触到的，以游记和自助游为主，内容质量很高，给我的好感很不错，APP一直都没删。这次面试是他们酒店事业部，地点在望京的一个创业园中，去的时候发现好多年轻人，仔细一看原来是靳东的一个新的电视剧的发布会。

公司就在发布会场地旁边，进去发现确实和网上描述的一样，环境真的很文艺，大厅有超大一团植物，听说夏天的时候是一池荷花，下面是类似欧美的餐厅样式的休息间。

其实不光是蚂蜂窝，感觉去过的这几个望京的企业，和海淀软件园、中关村的企业比起来，就好像朝阳和海淀的感觉。朝阳给我的感觉就是文艺、年轻、活泼，比如798、三里屯、望京的小餐馆等等，而海淀就是沉稳、冷静、古典，看一所所大学、颐和园、圆明园。

我就是不像个年轻人，在海淀待了10年，还是喜欢海淀。

---

在经历了今日头条的摧残以后，第二天又去了蚂蜂窝，相对来说感觉简单了许多，发挥也好了一些，自我感觉不错，但是同样，周一以来就被人家礼貌的我拒绝了。

他那里可能主要以移动端为主，我这方面经验基本为0，react方面也并没有很精通，所以结果也是显而易见的，主要是自我感觉有些良好了。

蚂蜂窝在望京798旁边，公司环境不错，进去之后挺温馨挺不错的。不过去不了也就去不了了，离家里面还是稍微有点远。

react性能优化

因为react的diff是在某一个根节点发生变化的时候，调用所有节点进行render，再对生成的虚拟DOM进行对比，如果不变则不对真实DOM进行更新。这就导致了性能的浪费。

所以优化方向主要针对：

拆分组件，有利于组件复用和优化
用return null代替display:none，轻量化DOM结构
避免不必要的render
使用PureRenderMixin
使用pure-ender-decorator
使用immutable.js
使用无状态组件
iframe的优缺点

优点：

可以实现局部重载页面，减少数据传输
有利于页面的复用，方便实现导航栏
可以实现跨域通信
引用第三方内容
缺点：

不利于 SEO
移动端无线完全显示，体验差
过多的iframe影响加载速度
webpack插件和loader的区别

loader 用于加载待打包的资源，plugin 用于扩展 webpack。

loader 用于加载某些资源文件。

因为webpack 本身只能打包commonjs规范的js文件，对于其他资源例如 css，图片，或者其他的语法集，比如 jsx， coffee，是没有办法加载的。 这就需要对应的loader将资源转化，加载进来。从字面意思也能看出，loader是用于加载的，它作用于一个个文件上。
目前项目中使用的loader有：css-loader、style-loader、babel-loader、 url-loader、file-loader
plugin 用于扩展webpack的功能。

它直接作用于 webpack，扩展了它的功能。当然loader也时变相的扩展了 webpack ，但是它只专注于转化文件（transform）这一个领域。而plugin的功能更加的丰富，而不仅局限于资源的加载。
项目中目前使用的plugin有：HotModuleReplacementPlugin（热加载）、NoEmitOnErrorsPlugin（保证webpack遇到错误不退出）、DefinePlugin（创建一个全局变量区别开发模式和发布模式）DllReferencePlugin（按需将多个依赖打包为一个js文件，与业务代码分离）、CleanWebpackPlugin（清除dist文件夹重复文件）
经过babel转义后的打包代码如何调试

webpack提供了Devtool选项，可以用来生成Source Map，可以据此进行调试

项目中在开发模式的配置文件中配置的devtool选项是devtool: ‘cheap-source-map’,, 关于Source Map的信息可以参考阮一峰的文章。

HTML5中的新标签

header
nav
aisde
secteion
article：标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
video
audio
source
progess
footer
canvas：为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
meter：数据度量，比如磁盘用量等等，比progress多low、high、optimum属性
progress：进度条
移动端滑动事件

移动端触摸滑动插件swiper.js

页面上浮动一个弹框，点击弹框时不能引起下面子层的滑动

两种方案：

在弹框下面填充遮罩，阻挡事件
弹框的点击事件触发preventDefault()方法（猜测，不知道是否可行）
覆盖bootstrap自带样式

第一张方法：使用CSS直接覆盖掉默认样式， 这种方式的优点是简单直接，缺点是零散并且不好维护，像是打补丁的解决方法

第二中方法是创建一个彻底的自定义构建，可以借助[官方的生成器](http://getbootstrap.com/2.3.2/，可以将框架内使用的关键变量设置为自己需要的值，还可以挑选框架的组件，减少文件体积

第三种方法就是下载源代码自行改写构建