all articles

FrontEnd Interview Questions 1

2019-07-12 @sunderls

js interview frontend





平时偶尔面试别人,很少想过自己去回答问题怎么回答,现在来整理一下。搜了一些网上的问题,然后尝试自己回答一下,以及参考的一些回答

1. 如何减少reflow和repaint

我的回答:

reflow就是指dom的box模型的高度发生变化的时候,会触发整体元素的移动。为了减少reflow

  1. 所有元素尽量提前定义好高度,比如img之类需要动态加载的
  2. dom操作尽量一次性完成,比如用fragment来避免太多次dom操作

repaint的话是指除了高度之外的一些印象到render的变化吧,如何避免还真是平时没遇到这种问题

参考

ref: https://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/

调用一些method或者property会触发reflow比如 offsetLeft, offsetTop, getClientRects, getComputedStyle等list: https://gist.github.com/paulirish/5d52fb081b3570c81e3a, reflow必定会触发repaint

总体方法

  1. 避免重复多次修改style,尽量打包通过class一次完成
  2. DOM操作尽量在线下完成(fragments)
  3. 避免查询一些critical style比如 offsetLeft之类的。

2. CSS 布局顶部底部高度固定,中间自适应

flexbox, 顶部底部固定高度,中间flex-grow:1

3. fixed、relative、absolute 的区别

我的回答:

  1. fixed 相对于window固定位置,脱离dom
  2. relative 决定了基准位置
  3. absolute 相对于基准位置的绝对定位,最近的absolute或者relative元素

目前自己的项目越来越采用接近于native的想法,已经不实用fixed了。

4. React setState之后发生了什么

我的回答

React component会检查是否需要rerender,检查内容包括是不是purecomponent,shouldComponentUpdate等。render中计算出view的json表达,然后diff找出更新点然后更新dom

参考:

setState会merge参数到当前state,然后Reconciliation

5. React 中 Element 与 Component 的区别

我的回答

Component是一个组件,一个封装完好的,可以interaction的js class(function)。 Element是view的json表达

ref: https://tylermcginnis.com/react-elements-vs-react-components/

6. Class Component vs Functional Component

我的回答

复杂的有state变化的会用class,简单的,pure的就用functional component 目前hooks还不是很熟练,所以没办法全部迁移到hooks

7. React 中 refs 的作用

用来标记dom元素

8 React 中 keys 的作用

提升array elements的diff速度和效率。相同的key可以判定为可以dom复用。 因为array元素移位如果被判定为元素变化会导致dom重新绘制效率低下

9 Controlled Component vs Uncontrolled Component

input元素的value是否反应state,uncontrolled component有自己的value,但是controll只接受传给的value prop。 基本上都应该使用controlled

10 react 在生命周期中的哪一步你应该发起 AJAX 请求

这个看情况。 一般情况下在didmount中。但是需要的话可以在constructor中,但是要注意的是避免调用setState。 我做的是在contructor中调用api,也就是得到一个promise,然后在didMount中进行setState。

11 shouldComponentUpdate 的作用是啥

可以提供一个自由控制rerender的hook

12 如何告诉 React 使用production

环境变量NODE_ENV=production

13. React 中的事件处理

react在document有统一的eventlistener,然后根据event target来查询到具体对应的element,然后模拟propagation触发对应的listener。其中使用的并不是真正的event,而是模拟的synthetic event,这个event会被重新利用,所以在async处理的时候尤为注意。

14 createElement 与 cloneElement 的区别

一个是创建新element,一个是给element增加新的props

15 setState 函数的第二个参数

dom 更新完成后的callback

16. arrow function和function有什么区别

function有this,如果掌握不透会出现意想不到的情况,比如setTimeout的this是global window之类的。 arrow function更加简洁,而且没有this。 没有this意味着arrow function中的this指向的是arrow function所在的scope。也就是所在的最近的function的this。 也正是因为没有this,所以arrow function不能用来做constructor,也没有arguments 等等,arrow function也不能bind

17. setState连续调用多次会如何

react会把state更新加入到queue中,然后调用setState的method完成之后一次性batch update。 当然setTimeout等async的调用方法除外



如果觉得有帮助到你的话,
欢迎支付宝donate