# 11-20

# 11、http2.0做了哪些改进，3.0呢

# http2.0

二进制分帧传输，由纯文本传输改为二进制格式编码。二进制分帧层是在应用层和传输层之间的中间层，所有信息都会从中经过、转换。
多路复用，允许在单个TCP上并行地️进行多个请求和响应。
头部压缩 HPACK算法压缩头部。霍夫曼编码
服务端推送

# http3.0

连接迁移，wifi切换移动网络，ip发生变化，断开tcp连接
无队头阻塞，tcp三次握手，队头阻塞，3.0依靠一个单调递增的packet序列，数据包包含ID以及offset偏移量，即使丢包或者超时确认，后面的数据包不会等待，等接受完之后可以寄依据ID和offset进行重新拼接。
自定义的拥塞控制
前向安全和前向纠错，每发送一组数据之后，就对这组数据进行异或运算（效率高），并将结果也发送过去，那么接收方就有两份数据版本，可以对初使版本进行纠错和校验，以此保证了可靠性。

# 12、position有哪些值，作用分别是什么。

static; 默认值，没有定位，处于正常的文档流中。会忽略left、top、right、bottom和z-index属性。
relative; 相对定位。设置相对于原本位置的定位，元素并不脱离文档流。元素原本位置会被保留，其他元素位置不受影响。
absolute; 绝对定位。是指给元素设置绝对的定位。
fixed; 相对于body定位，而非父元素非static元素。特殊absolute;
sticky; 粘性定位。
inherit; 继承父元素定位。

# 13、垂直居中；

绝对定位+transform
fixed;

# 14、路由原理history和hash两种路由特点

# hash

依赖#后面东西（fragment），但是不会被包含在HTTP请求中，对后端完全无影响，因为hash更改不会重载页面。
会被记录在浏览器历史记录中。
使用hashchange监听改变。

# history

利用history.pushState\replaceState, 利用popState监听变化。

# 15、手写bind

Function.prototype.mybind = function (content, ...arg) {
    const self = this;
    const Fn = function () {
        return self.apply(this instanceof Fn ? this : content, [...arg, ...arguments]);
    }
    Fn.prototype = Object.create(self.prototype);
    return Fn;
}

# 16、手写promise.all 和race; - 京东

function all(promiseArr) {
    const result = [];
    let count = 0;
    return new Promise((resolve, reject) => {
        for (let i = 0; i < promiseArr.length; i++) {
            Promise.resolve(promiseArr[i])
                .then(
                    res => {
                        result.push(res);
                        count++;
                        if (count === promiseArr.length) {
                            resolve(result);
                        }
                    }, err => {
                        reject(err);
                    }
                )
        }
    })
}

function race(promiseArr) {
    return new Promise((resolve, reject) => {
        for (let i = 0; i < promiseArr.length; i++) {
            Promise.resolve(promiseArr[i])
                .then(res => {
                    resolve(res);
                }, err => {
                    reject(err);
                })
        }
    })
}

# 17、手写一个寄生组合式继承

function Parent(name) {
    this.name = name;
    this.say = () => {
        console.log('111');
    }
}

Parent.prototype.play = () => {
    console.log('222');
}

function Son(name) {
    Parent.call(this);
    this.name = name;
}

Son.prototype = Object.create(Parent.prototype);
Son.prototype.constructor = Son;

# 18、手写一个new

function _new(fn, ...arg) {
    const obj = Object.create(fn.prototype);
    const result = fn.apply(obj, arg);
    return result instanceof 'objecr' ? result : obj;
}

# 19、setTimeout模拟setInterval - 阿里

function mySetInterVal(fn, delay) {
    let timer = null;

    function mySetTimeout() {
        timer = setTimeout(() => {
            fn();
            mySetTimeout();
        }, delay);
    }
    mySetTimeout();
    return () => clearTimeout(timer)
}

// let a = mySettimeout(() => {
//   console.log(111);
// }, 1000)
// let cancel = mySettimeout(() => {
//   console.log(222)
// }, 1000)
// cancel()

# 20、手写发布订阅 -字节

on、 off、once、emit

class Parse {
    constructor() {
        this.events = {};
    }
    on(eventName, cb) {
        if(!this.events[eventName]) {
            this.events[eventName] = [];
        }
        this.events[eventName].push(cb);
    }
    once(eventName, cb) {
        const fn = () => {
            cb();
            this.off(fn);
        }
        this.on(eventName, fn);
        
    }
    off(eventName, fn) {
        if (!this.events[eventName]) return;
        this.events[eventName] = this.events[eventName].filter(item => item !== fn);
    }
    emit(eventName, ...rest) {
        this.events[eventName].map(fn => {
          fn.apply(this, rest);
        })
    }
}
// 使用如下
// const event = new EventEmitter();

// const handle = (...rest) => {
//   console.log(rest);
// };

// event.on("click", handle);

// event.emit("click", 1, 2, 3, 4);

// event.off("click", handle);

// event.emit("click", 1, 2);

// event.once("dbClick", () => {
//   console.log(123456);
// });
// event.emit("dbClick");
// event.emit("dbClick");

← 1-10 21-30 →