首页 > 爱奇艺 一面 40min 已挂
头像
JJCool
发布于 2021-08-29 15:32
+ 关注

爱奇艺 一面 40min 已挂

爱奇艺

一面 40min 已挂

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

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

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

  3. 没有'prototype'属性

  4. 不能更改'this'

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

询问结果题

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'方法的参数,他们三个方法的不同:

  1. 'call'的第二个参数是'正常传参'
  2. 'apply'的第二个参数是以'数组'的形式
  3. '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/

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

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

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

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

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

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

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)
//著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

全部评论

(3) 回帖
加载中...
话题 回帖

推荐话题

相关热帖

近期热帖

历年真题 真题热练榜 24小时
技术(软件)/信息技术类
查看全部

热门推荐