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

zhaofeihao commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

9. 如何设计一个 dialog 组件

① 确定UI

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

② 确定API

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

③ 具体实现

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

参考

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

zhaofeihao commented 4 years ago

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 commented 4 years ago

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 策略

zhaofeihao / no-cross-no-crown