[面经]-[小红书]-[2020.3.17]

[zhaofeihao]

1. 衡量网络请求的指标 。 ftp
2. 性能优化的指标
3. mobX和redux的区别 ，除了使用上的区别，内部原理上有什么区别？单向数据流还是双向数据流
4. webpack，用过什么什么吗。什么什么我没听清，反正是没用过。。。
5. bind和call的区别，js原生实现call 6.react的cloneElement和creatElement的含义和区别 7.节流函数实现 8.react componentDidMount里执行的操作，用hooks应该怎么写，写在哪里 const [count, setCount] = useState(0); useEffect(() => { setInterval(()=>{ setCount(count++) },1000) }); // 这段代码里，页面上count显示什么？

9.react的state是异步的吗，是一直表现异步还是有同步的表现 10.项目中遇到过什么比较难解决的问题，怎么解决的 11.如果让你去设计一个搜集网络请求崩溃的功能，你会考虑从哪些方面收集 12.对RN是怎么理解的 13.jsBridge的原理，RN的jsBridge实现和web的jsBridge实现有什么区别吗

[zhaofeihao]

第十二题

[xxx407410849]

第一题

一.吞吐量（Throughput） 吞吐量是指网络中主机（server和client）之间的实际数据传输速率，即单位时间内实际传输的数据量，常用的单位有Kbps,Mbps。

而带宽是指网络的最大数据传输速率，常用单位也是Kbps,Mbps。

二.时延（Delay） 时延是指从网络中的一端（如server）开始发送数据算起，到网络中的另一端完全接收这个数据的时间间隔。

常用的相关概念还包括最大时延和平均时延。比如说一定时间里，发送好多个数据包，计算这些数据包的总时延，然后求出平均时延和最大时延。

三.信道利用率（Channel Utilization） 信道利用率是指发送时延除以发送时延加上往返传输时延，真是晦涩难懂，举个栗子：

假设信道的长度为10km，往返传输时延为10ms,传输数据长度为2048bit，发送端的发送速率为1Mbps，在其他时延忽略的情况下，求信道利用率。 发送时延：2048/(110001000)=2.048ms

信道利用率：2.048/(2.048+10)=17%

[xxx407410849]

第二题

响应时间 指的是从客户端发起一个请求开始，到客户端接收到从服务器端返回的响应结束，这个过程所耗费的时间。响应时间通常用时间单位来衡量（一般为秒）。 响应时间 = N1+A1+N2+A2+N3+A3+N4 网络传输时间：N1 + N2 + N3 + N4 应用服务器处理时间：A1 + A3 数据库服务器处理时间：A2

并发用户数 系统用户数：系统额定的用户数量，如一个OA系统，可能使用该系统的用户总数是2000个，那么这个数量，就是系统用户数 同时在线用户数：在一定的时间范围内，最大的同时在线用户数量 平均并发用户数的计算： C=nL /T

C是平均的并发用户数，n是平均每天访问用户数，L是一天内用户从登录到退出的平均时间（操作平均时间），T是考察时间长度（一天内多长时间有用户使用系统）

吞吐量 吞吐量指的是单位时间内处理的客户端请求数量。 从业务角度看，吞吐量可以用：请求数/秒、页面数/秒、人数/天或处理业务数/小时等单位来衡量 从网络角度看，吞吐量可以用：字节/秒来衡量

对于交互式应用来说，吞吐量指标反映的是服务器承受的压力，他能够说明系统的负载能力 以不同方式表达的吞吐量可以说明不同层次的问题，例如，以字节数/秒方式可以表示数要受网络基础设施、服务器架构、应用服务器制约等方面的瓶颈；已请求数/秒的方式表示主要是受应用服务器和应用代码的制约体现出的瓶颈。

当没有遇到性能瓶颈的时候，吞吐量与虚拟用户数之间存在一定的联系，可以采用以下公式计算：F=VU * R / T F为吞吐量，VU表示虚拟用户个数，R表示每个虚拟用户发出的请求数，T表示性能测试所用的时间

资源利用率 资源利用率指的是对不同系统资源的使用程度，例如服务器的CPU（s），内存，网络带宽等。 资源利用率通常以占用最大值的百分比n %来衡量。

当某个资源利用率随着负载的增加最终在100%居高不下时，就可能意味着这个资源变成了系统的性能瓶颈所在，提高这个资源的量，将会提高系统的吞吐量，同时降低交易的响应时间，即改进了系统的性能。

[xxx407410849]

第三题

https://blog.csdn.net/weixin_44369568/article/details/90713881

[xxx407410849]

第五题 原生实现bind

Function.prototype.mybind = function (context) {
//非function抛错
    if (typeof this !== "function") {
        throw new Error(this + "is not a function");
    }
    var self = this;
    var args = [];
//保存原传入的参数
    for (var i = 1, len = arguments.length; i < len; i++) {
        args.push(arguments[i]);
    }

    var fbound = function () {
        var bindArgs = Array.prototype.slice.call(arguments);
//拼接参数，并验证新函数被调用时是否用的new（构造函数），如果是用的new，则this指向新函数的实列（this）。
        self.apply(this instanceof self ? this : context, args.concat(bindArgs));
    }
    fbound.prototype = Object.create(self.prototype);
    //返回的函数不仅要和 被调函数的函数体相同，也要继承人家的原型链
    return fbound;
}

call、apply原生实现

Function.prototype.call = function (context) {
//为null时指向全局
    var context = context || window;
//谁调用，this指向谁。
    context.fn = this;

    var args = [];
//另外的写法
//for(var i = 1 , len = arguments.length ; i < len ; i++){
//args.push(arguments[i]);
//}
//var result = context.fn(...args);
//拆出并拼接参数。
    for(var i = 1, len = arguments.length; i < len; i++) {
        args.push(`arguments[${i}]`);
    }

    var result = eval('context.fn(' + args +')');

    delete context.fn
    return result;
}

Function.prototype.newApply = function(applyItem,arr){
    let context = applyItem || window;
    context.fn = this;
    let res;
    if(!arr){
        res = context.fn();
    }else{

        //res = context.fn(...arr);
        let args = [];
        for (var i = 0, len = arr.length; i < len; i++) {
            args.push('arr[' + i + ']');
        }
        res = eval('context.fn('  + args + ')')
    }
    delete context.fn;
    return res;
}

[xxx407410849]

第八题 React生命周期与hooks等价实现 关于第八题的计时器问题的实现 计时器问题的hooks讨论 //过于复杂，实际上就是useEffect只调用了一次，count被闭包了（依赖欺骗）所以永远都是1

[xxx407410849]

第六题 一个是复制ReactElement 一个可以传入DomElement或者ReactElement 复制保留原类的键值（合并），而新建则不保留

参考链接

[xxx407410849]

第七题

const throttle = (fn, wait = 50) => {
  // 上一次执行 fn 的时间
  let previous = 0
  // 将 throttle 处理结果当作函数返回
  return function(...args) {
    // 获取当前时间，转换成时间戳，单位毫秒
    let now = +new Date()
    // 将当前时间和上一次执行函数的时间进行对比
    // 大于等待时间就把 previous 设置为当前时间并执行函数 fn
    if (now - previous > wait) {
      previous = now
      fn.apply(this, args)
    }
  }
}

[xxx407410849]

第九题 当react在可以进行批量更新的场景表现为异步。 当react在无法判断是否进行Batch Update（批量更新）的时候，表现为同步。

前者是指在复合事件中，比如React自己的onChange、onClick等等，原因是实际上复合事件的调用在setState之前，所以无法拿到即时更新的state，需要用回调拿到。 也表示在普通的函数中，多次调用setState会被合并成一次操作，所以表现为异步。

后者是指在某些原生事件中，比如addEventListener绑定的事件、ajax、setTimeOut中，脱离了react的控制，导致无法进行批操作，表现为同步。 即便是多次调用都会表现为同步。

个人理解，存疑，没有其他佐证 实际上setState是宏任务，复合事件是微任务。。。 ajax的回调是宏任务Event Queue setTimeOut、addEventListener都是 可以用Promise和process.nextTick验证一下 Promise的then和process.nextTick的注册函数都是微任务。 这代表着在Promise的then里多次调用setState不会生效。

[L1116]

实现call和apply

实现一个call：

1. 如果不指定this，则默认指向window
2. 将函数设置为对象的属性
3. 指定this到函数并传入给定参数执行函数
4. 执行&删除这个函数，返回函数执行结果

Function.prototype.myCall = function(thisArg = window) {
    // thisArg.fn 指向当前函数 fn (fn.myCall)
    thisArg.fn = this;
    // 第一个参数为 this，所以要取剩下的参数
    const args = [...arguments].slice(1);
    // 执行函数
    const result = thisArg.fn(...args);
    // thisArg上并不存在fn，所以需要移除
    delete thisArg.fn;
    return result;
}

function foo() {
    console.log(this.name);
}
const obj = {
    name: 'litterStar'
}
const bar = function() {
    foo.myCall(obj);
}
bar();
// litterStar

apply和call类似，只是参数不同

Function.prototype.myApply = function(thisArg = window) {
    thisArg.fn = this;
    let result;
    // 判断是否有第二个参数
    if(arguments[1]) {
        // apply方法调用的时候第二个参数是数组，所以要展开arguments[1]之后再传入函数
        result = thisArg.fn(...arguments[1]);
    } else {
        result = thisArg.fn();
    }
    delete thisArg.fn;
    return result;
}

function foo() {
    console.log(this.name);
}
const obj = {
    name: 'litterStar'
}
const bar = function() {
    foo.myApply(obj);
}
bar();
// litterStar