2019-09-04 20:32 已编辑前端工程师

关注

19.09.04阿里口碑前端一面凉经

大公司效率太高，没想到面试来的这么快，凉的也快，虽然当时很多不会，但是一时不会不能永远不会吧，现在弄懂了给大家做点贡献吧。

1、做个什么项目或者有什么实习经历？

这个看个人自己的回答了

2、用react做过什么项目？

因为我简历上写的是react，这个也是看个人的经历了

3、react兄弟组件通信方式？

非嵌套组件之间通信：使用事件订阅

非嵌套组件，就是没有任何包含关系的组件，包括兄弟组件以及不在同一个父级中的非兄弟组件。对于非嵌套组件，可以采用下面两种方式：
1、利用二者共同父组件的 context 对象进行通信
2、使用自定义事件的方式
如果采用组件间共同的父级来进行中转，会增加子组件和父组件之间的耦合度，如果组件层次较深的话，找到二者公共的父组件不是一件容易的事，当然还是那句话，也不是不可以...
这里我们采用自定义事件的方式来实现非嵌套组件间的通信。自定义事件是典型的发布/订阅模式，通过向事件对象上添加***和触发事件来实现组件间通信。

父向子组件通信：传递props，子组件得到props后进行相应的处理。

子向父组件通信：利用回调函数，可以实现子组件向父组件通信：父组件将一个函数作为 props 传递给子组件，子组件调用该回调函数，便可以向父组件通信。

跨级组件之间通信：使用context对象

所谓跨级组件通信，就是父组件向子组件的子组件通信，向更深层的子组件通信。跨级组件通信可以采用下面两种方式：

1、中间组件层层传递 props

2、使用 context 对象

对于第一种方式，如果父组件结构较深，那么中间的每一层组件都要去传递 props，增加了复杂度，并且这些 props 并不是这些中间组件自己所需要的。不过这种方式也是可行的，当组件层次在三层以内可以采用这种方式，当组件嵌套过深时，采用这种方式就需要斟酌了。

使用 context 是另一种可行的方式，context 相当于一个全局变量，是一个大容器，我们可以把要通信的内容放在这个容器中，这样一来，不管嵌套有多深，都可以随意取用。

使用 context 也很简单，需要满足两个条件：

1、上级组件要声明自己支持 context，并提供一个函数来返回相应的 context 对象

2、子组件要声明自己需要使用 context

4、什么是虚拟DOM树及其工作原理？

浏览器遵循HTML指令来构造文档对象模型(DOM)。当浏览器加载HTML并呈现用户界面时，HTML文档中的所有元素都变成DOM元素。

虚拟DOM只不过是真实 DOM 的 javascript对象表示。与更新真实 DOM 相比，更新 javascript 对象更容易，更快捷。react将整个DOM副本保存为虚拟DOM，每当有更新的时候他都会维护两个虚拟DOM，以比较之前的状态和当前状态，并确定哪些对象已经被更改，通过比较两个虚拟DOM的差异，将这些变化更新到实际的DOM，一但真正的DOM更新，它也会更新UI。

将虚拟DOM转换成实际DOM树的最少操作过程称为调和，diff算法就是调和的具体实现。

Tree diff：新旧两颗DOM树逐层进行对比的过程就是tree diff；当整颗DOM树逐层对比完毕，则所需要被按需更新的元素必然能够找到；

Component diff：在进行Tree diff的时候，每一层中组件级别的对比，叫做component diff；如果对比前后组件类型相同则暂时认为此组件不需要被更新；如果对比前后组件类型不同则需要移除就组件创建新组件，并追加到页面上；

Element diff：在进行组件对比时，如果两个组件类型相同，则需要进行元素级别的对比，叫做element diff；

5、用react实现图片懒加载

首先图片组件必须放在 ScrollView 组件内。图片组件在页面完成布局后，根据onLayout属性可以获取到这个组件在容器中的 x、y 值。监听 ScrollView 滚动事件，onScroll会给出内容偏移量 contentOffset。当内容偏移量大于等于图片组件的 y 值减去屏幕高度时，就可以加载图片了。

6、前端优化方式知道什么？

总结：网络方面、DOM操作及渲染方面、数据方面。

网络方面：1、减少http请求：合并js文件、合并css文件、雪碧图的使用、base64表示简单的图片

2、减少资源体积：gzip压缩、js混淆、css压缩、图片压缩

3、缓存：DNS缓存、CDN部署与缓存、http缓存

4、移动端优化：使用长***减少重定向、首屏优化、不滥用web字体

DOM操作和渲染方面：1、优化网页渲染：css文件放头部，js文件放在尾部或者异步、尽量避免内联样式

2、DOM操作优化：避免在document上直接进行频繁的DOM操作、使用classname代替大量的内联样式修改、对于复杂的UI元素，设置position为absolute或fixed、尽量使用css动画、

使用requestAnimationFrame代替setInterval操作、适当使用canvas、尽量减少css表达式的使用、使用事件***

3、操作细节注意：避免图片或者frame使用空src、在css属性为0时，去掉单位、禁止图像缩放、正确的css前缀的使用、移除空的css规则、对于css中可继承的属性，如font-size，尽量使用继承，少一点设置、缩短css选择器，多使用伪元素等帮助定位

4、移动端优化：长列表滚动优化、函数防抖和函数节流、使用touchstart、touchend代替click、HTML的viewport设置、开启GPU渲染加速

数据方面：1、图片加载处理：图片预加载、图片懒加载、首屏加载时进度条的显示

2、异步请求的优化：使用正常的json数据格式进行交互、部分常用数据的缓存、数据埋点和统计

（这一题其实是上一题的懒加载没答出来，面试小哥哥的拓展延伸问的问题，说实话其实记得一些最常见的，但是这么详细的真的是记不住）

7、 ES6新特性知道哪些？

1、let和const

2、箭头函数

3、模板字符串

4、解构赋值

5、import和export

6、set和map

7、promise

8、symbol

... ...

8、 Promise用过吗，没用过你之前怎么实现异步操作？

这题我答的是没用过promise，实现异步编程的方式也没打上来，现在百度的结果是：使用回调函数、事件监听、事件的发布/订阅

9、箭头函数和普通函数区别

1、用了箭头函数，this就不是指向window，而是父级（指向是可变的）

2、不能够使用arguments对象

3、不能用作构造函数，这就是说不能够使用new命令，否则会抛出一个错误

4、不可以使用yield命令，因此箭头函数不能用作 Generator 函数

10、如何将普通函数向箭头函数一样转变this的指向

call、apply、bind

百度之后发现还可以使用new关键字改变this指向：

//构造函数版this
function Fn(){
    this.user = "追梦子";
}
var a = new Fn();
console.log(a.user); //追梦子

用变量a创建了一个Fn的实例（相当于复制了一份Fn到对象a里面），此时仅仅只是创建，并没有执行，而调用这个函数Fn的是对象a，那么this指向的自然是对象a，那么为什么对象a中会有user，因为你已经复制了一份Fn函数到对象a中，用了new关键字就等同于复制了一份
call、apply、bind的用法很多博客有详解，这里就不打了

11、CSS3的新特性

CSS3盒子模型，CSS3的transition、transform、animation，CSS3的多列布局......

还有很多，大家可以自行百度

12、Flex布局padding和margin的区别，怎么用的？

这个问题我上来回答一个外边距一个内边距，后来小哥哥解释说是想知道你平时怎么用的，我按照操作经验说一般改变margin，不怎么改变padding，后来百度到各自的应用场合，大家适当看看，

margin: 需要在border外侧添加空白时；空白处不需要背景（色）时；上下相连的两个盒子之间的空白，需要相互抵消时。
padding：需要在border内测添加空白时；空白处需要背景（色）时；上下相连的两个盒子之间的空白，希望等于两者之和时。

13、如何实现水平垂直居中？

1、flex布局：父元素设置display：flex；并设置align-items：center；justify-content：center

2、margin：auto；定位上下左右为0；可以实现拖标的居中

3、tabel-cell：父元素设置display：tabel-cell；并设置vertical-align：middle

14、css 隐藏组件，有什么区别？

display：none和visible：hidden