爱奇艺一面 40min 已挂

爱奇艺

一面 40min 已挂

箭头函数与其他函数的区别？

没有'this'、'super'、'arguments'、'new.target'，使用'箭头函数'时只能用'剩余参数'和'具名参数'来代替'arguments'

不能被'new'调用，'箭头函数'没有'Constructor'方法，因为不能用作'构造函数'

没有'prototype'属性

不能更改'this'

不允许重复的'具名参数'，'传统函数'是可以传多个'同名'的'形参',但是'引用最后一个'重名参数

询问结果题

obj = {value:2};
var value = 3;
obj.foo = function(){
    var func = function(){
        this.value = this.value+this.value;
        console.log(this.value)
    }
    func()
}
obj.foo()
//打印结果是多少？现在是6 为什么？
//New 绑定 > 显示绑定 > 隐式绑定 > 默认绑定
//函数调用的位置没有上下文对象，没有被某个对象拥有或者包含，默认指向window，严格模式指向undefined

//如何让它变成4
//1、func改成箭头函数 
//2、func执行时绑定this值func.bind(obj)() func.call(obj) func.apply(obj)

call和bind还有apply的区别？

'call'和'apply'以及'bind'后面的是'sum'方法的参数，他们三个方法的不同：

'call'的第二个参数是'正常传参'
'apply'的第二个参数是以'数组'的形式
'bind'是虽然也可以改变'this'指向，它是'创建一个新的函数'，第二个参数是'正常传参'

Function.prototype.newBind = function (ctx, ...args) {
    return (...newArgs) => {
        this.call(ctx, ...args, ...newArgs)
        //this.apply(ctx, [...args, ...newArgs])
    }
}

运行题：promise的all实现

对于 all 方法而言，需要完成下面的核心功能:
1）传入参数为一个空的可迭代对象，则直接进行resolve。
2）如果参数中有一个promise失败，那么Promise.all返回的promise对象失败。
3）在任何情况下，Promise.all 返回的 promise 的完成状态的结果都是一个数组

Promise.all = function(arr){
    return new Promise((resolve,reject)=>{
        let res = []
        let index = 0
        let len = arr.length
        if(len==0){
            resolve(result);
            return;
        }

        for(let i=0;i<len;i++){
            Promise.resolve(arr[i]).then(data=>{
                res[i]=data;
                index++;
                if (index===len) resolve(res);
            }).catch(err=>{
                reject(err)
            })
        }
        /* arr.forEach((p,i)=>{
            p.then(val=>{
                res[i] = val;
                index++;
                if(index===len) resolve(res)
            },err=>{
                reject(err)
            })
        }) */
    })
}

从输入URL到输出内容的过程？

大的过程：网络请求->解析->渲染->重绘重排

网络请求：
1、浏览器解析URL获取协议，域名，端口，路径

2、查看浏览器是否有资源的缓存：
------有：
如果已有且未过时，直接读取内存/磁盘中的缓存，这叫做强缓存；
如果已有且过时，则需要发送HTTP请求询问服务器缓存是否已修改，这叫做协商缓存；
浏览器在请求头中携带相应的缓存tag来向服务器发请求，由服务器根据这个tag，来决定是否使用缓存。If-None-Match（这一次的请求报文）：Etag（上一次的响应报文），lf-Modified-Since：Last-Modified（上一次的响应报文）。文件修改了则把新资源发给浏览器（状态码200），没修改则告诉浏览器读取缓存（状态码304）
------没有，直接跳到3

3、DNS解析域名（浏览器先检查自身有没有缓存，如果没有就检查操作系统有没有缓存，如果还是没有就会向本地域名服务器发起一个请求来解析这个域名；如果本地域名服务器还是没有，则会从根域名服务器开始递归查找域名）

4、建立TCP连接
三次握手过程?为什么是三次？

双方互相确认接收能力和发送能力。

客户端传的第一个syn被堵塞未到，第二个syn已到服务器端，客户端建立连接后又已断开的情况下，服务器收到第一个SYN还保持连接，造成了连接资源的浪费。

5、发送HTTP请求报文（请求行请求头请求体）

如果是HTTP请求，对HTTP报文进行报文分割并标记序号和端口号。

如果是HTTPS请求，将HTTP报文交给TLS处理.......

6、服务器网络响应（响应行响应头响应体）

7、TCP 连接是否断开

如果请求头或响应头中包含Connection: Keep-Alive，表示建立了持久连接，这样 TCP 连接会一直保持，之后请求统一站点的资源会复用这个连接。

四次挥手过程？为什么是四次？

服务器必须等所有报文传给客户端之后再发送FIN，时间可能较长，导致客户端重复发FIN，所以先发ACK表示收到，处理好之后再发FIN，让客户端断开。

解析：标记化，构建树，计算CSS样式，生成渲染树，生成布局树

渲染：建立图层数，生成绘制列表，生成图块

http的缓存？ https://messiahhh.github.io/blog/

强缓存和协商缓存的区别？

若缓存没过期，则浏览器不会向服务器发请求，而是直接读取缓存中的资源，这叫做强制缓存。此时在Network一栏中看到资源对应的状态码为200（虽然实际上并不存在HTTP请求）。如果我们是直接刷新页面，资源会从内存缓存中读取：200(from memory cache)；如果我们是打开了新的页面，资源会从硬盘缓存中读取: 200(from disk cache)

若缓存已过期，我们需要向服务器查看服务器中的该资源是否有被修改，如果服务器中的资源没有被修改，我们会直接读取本地的缓存资源，这叫做协商缓存，状态码为 304(Not Modify) ；如果服务器中的资源被改动了，那么服务器需要把改动后的资源作为响应体发给浏览器，状态码为200(OK)

如果资源对应的响应头部有Etag，那么我们发送的请求需要带上If-None-Match
如果资源对应的响应头部有Last-Modified，那么我们发送的请求需要带上If-Modified-Since
服务器收到我们的请求后，根据这两个请求头部来判断资源是否修改过，进而决定是响应304还是200。

https的加密过程 https://messiahhh.github.io/blog/

将HTTP报文交给TLS处理，TLS和服务端进行TLS握手，交换版本信息，加密算法，压缩算法，随机数（浏览器一个，客户端一个）。
服务端发送证书，浏览器用CA的公钥对其进行验证。
浏览器用服务端的公钥加密生成的预备主密码发送给服务端，两个随机数和预备主密码生成主密码
使用主密码生成对称加密的密钥对，消息认证码的密钥对，对称加密的CBC分组（分组模式）需要的初始化向量密钥对。
握手之后进行加密，对HTTP报文分组，分组后压缩，压缩后的数据和MAC一起加密。
对称加密保障私密性，消息认证码保障完整性，数字证书保障认证，防止中间人攻击。

CSS的垂直水平居中？

知道宽高时？

absolute(top:50%;left:50%) + margin-top:-height/2 margin-left:-width/2
absolute (top:50%;left:50%) + calc(50% -height/2) calc(50% -width/2)

不知道宽高的情况下怎么做？

子元素 absolute(top:50%;left:50%) + transform:translate(-50%,-50%)
父 display: flex;子 margin:auto;
父元素display: flex；

position:absolute 和relative的区别？

static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。

relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过zindex属性定义。

fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。

sticky：具体是类似 relative 和 fixed，在 viewport 视口滚动到阈值之前应用 relative，滚动到阈值之后应用 fixed 布局，由 top 决定。

BFC是什么？渲染上有什么特性

BFC，也就是Block Formatting Contexts （块级格式化上下文)。明确地，它是一个独立的盒子，并且这个独立的盒子内部布局不受外界影响。

触发条件：

根元素()
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
overflow 值不为 visible 的块元素 -弹性元素（display为 flex 或 inline-flex元素的直接子元素）网格元素（display为 grid 或 inline-grid 元素的直接子元素）等等。

渲染特性：

（1） BFC垂直方向边距重叠
（2） BFC的区域不会与浮动元素的box重叠
（3） BFC是一个独立的容器，外面的元素不会影响里面的元素
（4）计算BFC高度的时候浮动元素也会参与计算

应用场景：

防止浮动导致父元素高度塌陷；开启父元素的BFC。

避免外边距折叠：同属一个BFC的相邻元素会发生外边距（margin）重叠。

阻止元素被浮动元素覆盖，可用来实现两列布局

用js写了一个两数之和的算法？

var twoSum = function(nums, target) {
    let map = new Map()
    for (let i = 0,len = nums.length; i < len; i++) {
        let key = target - nums[i];
        if (map.has(key)) {
            return [map.get(key), i]
        }
        map.set(nums[i], i)
    }
    throw Error('No two sum solution')
};

//作者：carson999
//链接：https://leetcode-cn.com/problems/two-sum/solution/jsha-xi-ying-she-jie-fa-zhi-xing-yong-sh-lpsr/
//来源：力扣（LeetCode）
//著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

#爱奇艺##笔经#