字节二面面试总结记录

最新推荐文章于 2022-11-15 14:09:57 发布

婧大

最新推荐文章于 2022-11-15 14:09:57 发布

阅读量451

点赞数

分类专栏：面试文章标签：面试前端

本文链接：https://blog.csdn.net/qq_45678607/article/details/119214786

版权

面试专栏收录该内容

8 篇文章 0 订阅

订阅专栏

项目难点
组件的二次封装
二次封装业务组件要考虑的点

4. 搜索框的防抖节流可以合并使用

function fn(fn,wait) {
    let last = 0, timer = null;

    return function () {
        let context = this;
        let arg = arguments;
        let now = new Date();

        if (now - last < wait) {
            clearTimeout(timer)
            timer = setTimeout(() => {
                last = now
                fn.apply(context,arg)
            },wait)
        } else {
            last = now;
            fn.apply(context,arg)
        }
    }
}

5. http协议不同的版本

http0.9

仅支持请求方式GET，
并且仅能请求访问HTML格式的资源。

http1.0

请求行必须在尾部添加协议版本字段（http/1.0）；必须包含头消息
不再局限于0.9版本的HTML格式，根据Content-Type可以支持多种数据格式
状态码，缓存，一些方法 head post
每次TCP连接只能发送一个请求，当服务器响应后就会关闭这次连接，下一个请求需要再次建立TCP连接，就是不支持keepalive。

http1.1
Connection: keep-alive

持久连接（persistent connection），即TCP连接默认不关闭，可以被多个请求复用，不用声明Connection: keep-alive。解决了1.0版本的keepalive问题，1.1版本加入了持久连接，一个TCP连接可以允许多个HTTP请求；
对于同一个域名，大多数浏览器允许同时建立6个持久连接。降低了延迟同时提高了带宽的利用率。
新增了请求方式PUT、PATCH、OPTIONS、DELETE等。
加入了管道机制，在同一个TCP连接里，允许多个请求同时发送，增加了并发性，进一步改善了HTTP协议的效率；举例来说，客户端需要请求两个资源。以前的做法是，在同一个TCP连接里面，先发送A请求，然后等待服务器做出回应，收到后再发出B请求。管道机制则是允许浏览器同时发出A请求和B请求，但是服务器还是按照顺序，先回应A请求，完成后再回应B请求。
一个TCP连接现在可以传送多个回应，势必就要有一种机制，区分数据包是属于哪一个回应的。这就是Content-length字段的作用，声明本次回应的数据长度。

Content-Length: 3495
上面代码告诉浏览器，本次回应的长度是3495个字节，后面的字节就属于下一个回应了。

http2.0

HTTP/1.1 版的头信息肯定是文本（ASCII编码），数据体可以是文本，也可以是二进制。HTTP/2 则是一个彻底的二进制协议，头信息和数据体都是二进制，并且统称为"帧"（frame）：头信息帧和数据帧。

二进制协议的一个好处是，可以定义额外的帧。HTTP/2 定义了近十种帧，为将来的高级应用打好了基础。如果使用文本实现这种功能，解析数据将会变得非常麻烦，二进制解析则方便得多。
2. 增加服务器推送的功能，即不经请求服务端主动向客户端发送数据。
3. 头信息压缩机制（header compression）。一方面，头信息使用gzip或compress压缩后再发送；另一方面，客户端和服务器同时维护一张头信息表，所有字段都会存入这个表，生成一个索引号，以后就不发送同样字段了，只发送索引号，这样就提高速度了。

6. http2.0 具体了解一下，因为这个现在比较普遍了

7. 强缓存和协商缓存的两个时间也要记清楚一点

Expires指定资源到期的世界，是服务器端的具体的时间点；（受限于如果修改本地时间，会导致缓存失效）
Cache-Control设定的是一段时间段,优先级高于Expires

Cache-Control：max-age=300

8. https的实现原理

客户端发送报文给服务器端开始ssl通信，报文中包含客户端支持的ssl版本，加密组件列表，算法和密钥长度
如果服务器确定了可以使用SSL通信，就会发送响应报文给客户端，报文中包含SSL版本和加密组件
服务器把公开密钥正式发送给客户端
服务器端发送报文通知客户端，最初的SSL握手协商接受
客户端生成随机密码串，并用之前客户端发过来的公钥证书加密，再通过报文发送给服务器端
客户端继续发送报文，告诉服务器端，之后客户端发送的报文，都会使用刚才发送过去的随机密码串进行加密
客户端发送结束报文，包含连接至今的全部报文，如果服务器端可以正确解密该报文，则本次握手成功
服务器端也会发送报文，告诉客户端，之后服务端响应的数据都会使用随机密码串进行加密
服务器端发送结束报文，包含连接至今的全部报文的整体校验值。如果客户端可以正确解密该报文，则本次握手协商成功

9. 对称加密和非对称加密

对称加密：就是有一个密钥，它可以加密一段信息，也可以对加密后的信息进行解密。
非对称加密：两把密钥，通常一把叫做公钥、一把叫私钥，用公钥加密的内容必须用私钥才能解开，同样，私钥加密的内容只有公钥能解开。

10. vue3与vue2 的区别

数据绑定原理发生了变化：
vue2 利用ES5 的一个 API Object.definePropert()对数据进行劫持结合发布订阅模式的方式来实现的。
vue3 相比于vue2.x，使用proxy的优势如下

defineProperty只能监听某个属性，不能对全对象监听
可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化

Vue 3 的 Template 支持多个根标签，Vue 2 不支持
Vue 3 有 createApp()，而 Vue 2 的是 new Vue()
createApp(组件)，new Vue({template, render})
合成式API（Composition API）

11. Proxy 和之前重写数组方法

Vue2 中，对于给定的 data，如 { count: 1 }，是需要根据具体的 key 也就是 count，去对「修改 data.count 」和「读取 data.count」进行拦截，也就是

Object.defineProperty(data, 'count', {
 get() {},
 set() {},
})

必须预先知道要拦截的 key 是什么，这也就是为什么 Vue2 里对于对象上的新增属性无能为力。
而 Vue3 所使用的 Proxy，则是这样拦截的：

new Proxy(data, {
 get(key) { },
 set(key, value) { },
})

可以看到，根本不需要关心具体的 key，它去拦截的是「修改 data 上的任意 key」和「读取 data 上的任意 key」。
所以，不管是已有的 key 还是新增的 key，都逃不过它的魔爪。
但是 Proxy 更加强大的地方还在于 Proxy 除了 get 和 set，还可以拦截更多的操作符。

12. vdom 的好处和主要作用

用一个js对象去描述一个DOM节点，比创建一个DOM的代价小很多通过class去描述的
需要包含操作 DOM 的方法，因此它是非常轻量和简单的。

13. react的hooks和class的区别

14. 爬楼梯空间复杂度时间复杂度

你在爬楼梯，需要n步才能爬到楼梯顶部
每次你只能向上爬1步或者2步。有多少种方法可以爬到楼梯顶部？
每次你能爬上n步

/**
 * @param {number} n
 * @return {number}
 */
var climbStairs = function(n) {
   if(n < 2) return n;
    let q = 0,p = 1,r = 1; // n最开始可能0
   for (let i = 2;i <= n;i++) {
       q = p;
       p = r;
       r = q + p;
   }
   return r;
};