[面经]-[京东]-[京东国际站]-[2020.03.27]

[zhaofeihao]

1. 输出顺序

console.log('1');

setTimeout(function() {
    console.log('2');
    new Promise(function(resolve) {
        console.log('3');
        resolve();
    }).then(function() {
        console.log('4')
    })
})

new Promise(function(resolve) {
    console.log('5');
    resolve();
}).then(function() {
    console.log('6')
})
console.log('7')
setTimeout(function() {
    console.log('8');

    new Promise(function(resolve) {
        console.log('9');
        resolve();
    }).then(function() {
        console.log('10')
    })
})

2. 写垂直居中布局

3. 说一下浏览器事件机制

4. 实现new

5. 讲解http1.1 、http2.0、https

6. ES6 新特性

7. 讲解 promise

8. useState \ useEffect 讲解

写一个useEffect，只在componentDidMount 执行

9. 如何设计一个 dialog 组件

10. react是如何进行 diff 的

如何diff一个react组件
render函数的作用
diff有什么问题
讲解fiber

10. 网页性能优化

11. webpack

tree shaking 机制
tree shaking 存在的问题
css也有tree shaking，是用什么插件做的
webpack从1.0 到 4.0，做了什么优化

12. cookie、localStorage、sessionStorage、indexDB

13. xss、csrf

14. 算法

// 从扑克牌中随机抽 5 张牌，判断是不是一个顺子，即这 5 张牌是不是连续的。

//2 ～ 10 为数字本身，A 为 1，J 为 11，Q 为 12，K 为 13，而大、小王可以看成任意数字。

/**
 *
 * @param {Array} numbers
 */
function isContinuous(numbers) {
}

/**
 * 测试代码
 */
console.log(isContinuous([3, 8, 0, 0, 1])); // false
console.log(isContinuous([8, 10, 0, 6, 0])); // true

[zhaofeihao]

3. 浏览器事件机制

重点是考察对冒泡捕获的理解。
解答解构：是什么 --> 怎么用 --> 特殊case --> 应用场景。

事件冒泡

事件会从最内层的元素开始发生，一直向上传播，直到document对象。

事件捕获

事件会从最外层开始发生，直到最具体的元素。

addEventListener

w3c 制定了统一的标准——先捕获再冒泡。
addEventListener的第三个参数就是为冒泡和捕获准备的.

element.addEventListener(event, function, useCapture)

当事件捕获和事件冒泡一起存在的情况，事件又是如何触发

• 对于非target节点则先执行捕获在执行冒泡
• 对于target节点则是先执行先注册的事件，无论冒泡还是捕获

事件冒泡与事件捕获应用:事件代理

使用事件代理的好处不仅在于将多个事件处理函数减为一个，而且对于不同的元素可以有不同的处理方法。
假如上述列表元素当中添加了其他的元素（如：a、span等），我们不必再一次循环给每一个元素绑定事件，直接修改事件代理的事件处理函数即可。

扩展：事件对象

触发dom上的某个事件时，会产生一个事件对象，里面包含着所有和事件有关的信息。
常用：

currentTarget   事件处理程序当前正在处理事件的那个元素（始终等于this）
 （currentTarget始终是监听事件者，而target是事件的真正发出者。）
preventDefault  取消事件默认行为,比如链接的跳转
 
stopPropagation 取消事件冒泡
 
target  事件的目标

参考

1. JS中事件冒泡与捕获
2. javascript 事件流
3. 深入理解e.target与e.currentTarget

[zhaofeihao]

9. 如何设计一个 dialog 组件

① 确定UI

三种类型：alert、confirm、modal
样式是否支持自定义

② 确定API

• 对外暴露的props属性配置
• 调用方式
• 确认/取消的回调函数

③ 具体实现

• 遮罩
• 头部、内容和底部的布局

参考

React造轮系列：对话框组件 - Dialog 思路

[zhaofeihao]

indexDB

IndexedDB是HTML5规范里新出现的浏览器里内置的数据库。提供了类似数据库风格的数据存储和使用方式。IndexedDB里的数据是永久保存，适合于储存大量结构化数据，有些数据本应该存在服务器，但是通过indexedDB，可以减轻服务器的大量负担，实现本地读取修改使用，以对象的形式存储，每个对象都有一个key值索引。
IndexedDB里的操作都是事务性的。一种对象存储在一个object store里，object store就相当于关系数据库里的表。IndexedDB可以有很多object store，object store里可以有很多对象。

indexDB优点

• 与service work搭配简直无敌，实现离线访问不在话下；
• 数据储存量无限大（只要你硬盘够），Chrome规定了最多只占硬盘可用空间的1/3，可以储存结构化数据带来的好处是可以节省服务器的开支。

indexDB 缺点

• 兼容性问题，只有ie11以上，根据业务场景慎重考虑需求。
• 同源策略，部分浏览器如Safari手机版隐私模式在访问IndexedDB时，可能会出现由于没有权限而导致的异常（LocalStorage也会），需要进行异常处理。
• API类似SQL比较复杂，操作大量数据的时候，可能存在性能上的消耗。
• 用户在清除浏览器缓存时，可能会清除IndexedDB中相关的数据。

[zhaofeihao]

React diff 策略

• Web UI 中 DOM 节点跨层级的移动操作特别少，可以忽略不计。
• 拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构。
• 对于同一层级的一组子节点，它们可以通过唯一 key 进行区分。

tree diff

基于策略一，React 对树的算法进行了简洁明了的优化，即对树进行分层比较，两棵树只会对同一层次的节点进行比较。
即同一个父节点下的所有子节点。当发现节点已经不存在，则该节点及其子节点会被完全删除掉，不会用于进一步的比较。这样只需要对树进行一次遍历，便能完成整个 DOM 树的比较。

component diff

React 是基于组件构建应用的，对于组件间的比较所采取的策略也是简洁高效。

• 如果是同一类型的组件，按照原策略继续比较 virtual DOM tree。
• 如果不是，则将该组件判断为 dirty component，从而替换整个组件下的所有子节点。
• 对于同一类型的组件，有可能其 Virtual DOM 没有任何变化，如果能够确切的知道这点那可以节省大量的 diff 运算时间，因此 React 允许用户通过 shouldComponentUpdate() 来判断该组件是否需要进行 diff。

element diff（不带key）

• element相同，原地复用
• element 不同，删旧建新

element diff（带key）

带key diff的过程看这里

参考

react diff 策略