字节一面提前批面试记录总结

最新推荐文章于 2026-01-01 17:43:06 发布

原创最新推荐文章于 2026-01-01 17:43:06 发布 · 136 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #面试 #前端

面试专栏收录该内容

8 篇文章

订阅专栏

本文探讨了Vue的双向绑定机制，通过v-model实现数据与DOM的同步更新，以及在组件间的应用。同时，讲解了webpack的代理Proxy功能，用于解决开发环境中的跨域问题。此外，介绍了Diff算法在虚拟DOM更新中的作用，以及在实际项目中如何实现数组操作如reduce和map。最后，讨论了HTTP请求的GET和POST方法的区别，TCP与UDP的特性，以及TCP的可靠性机制如序列号、确认应答和拥塞控制。

1. vue双向绑定原理

在vue中通过v-model去实现双向绑定，数据驱动DOM，DOM的变化反过来影响数据，是一个双向的关系

v-model可以用在表单上，也可以用在组件上。

input

<input
  v-bind:value="message"
  v-on:input="message=$event.target.value">

组件

子： <input :value="value" @input="updateValue" placeholder="edit me">
父： <child v-model="message"></child>

能不能实现双向绑定：
vue双向绑定的原理，

<body>
    <div id="app">
        <input type="text" id="txt">
        <p id="show-txt"></p>
    </div>
</body>
<script>
    var obj = {}
    Object.defineProperty(obj, 'txt', {
        get: function() {
            return obj
        },
        set: function(newValue) {
            document.getElementById('txt').value = newValue
            document.getElementById('show-txt').innerHTML = newValue
        }
    })
    document.addEventListener('keyup', function(e) {
        obj.txt = e.target.value
    })
</script>

2. webpack 代理 Proxy

使用
webpack proxy 是webpack提高的代理服务
将客户端发送的请求转发给其他服务器，目的是便于开发者在开发环境下解决跨域问题

实现代理首先需要一个中间服务器，webpack提高服务器工具未webpack-dev-server

devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000,
        proxy: {
            '/api': {
                target: 'https://api.github.com'
            }
        }

原理
proxy工作原理实质是利用http-proxy-middleware这个http代理中间件，实现请求转发给其他服务器

服务器与服务器之间请求数据并不会存在跨域行为，跨域行为是浏览器安全策略限制

3. diff算法 key

patch 的过程，对旧的vnode进行修补

创建节点
删除节点
更新节点

两个简单的假设：使得虚拟DOM的Diff算法的复杂度从O(n^3)降到了O(n)。

两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构。
同一层级的一组节点，他们可以通过唯一的id进行区分
当页面的数据发送改变的时候，diff算法只会比较同一层级的节点，

如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点以后的子节点了。

如果节点类型相同，则会重新设置该节点的属性，从而实现节点的更新。

当某一层的节点相同的时候，也就是跟上面一样列表节点，diff算法更新的过程默认也会这样

所以一句话，key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，

reduce实现 reduce实现map

Array.prototype.myReduce = function (fn, value) {
    if (value === undefined && !this.length) {
        throw new console.error();
    }

    let res = value ? value : this[0]
    for (let i = value ? 0 : 1; i < this.length; i++) {
        res = fn.call(res,this[i],i,this)
    }
    return res;
}

Array.prototype.myMap = function(condiction,thisArr){
    let ans = []
    thisArr = thisArr || []
    this.reduce((pre,curr,index) => {
      ans.push(condiction.call(thisArr,curr,index))
    },[])
    return ans;
  }
  let arr = [1,2,4]
  let test = arr.myMap(item => {
    return item *= 2;
  })
  console.log(test);//[2, 4, 8]

一个项目到上线的过程

6. 垂直水平居中四种以上

flex 布局
margin auto 上下左右
margin-top left 相对父元素需要知道宽高
transform translate -50% 相对自己可以不知道自己的宽高

margin translate 相对谁

8. 跨域具体

协议域名端口

Cookie、LocalStorage 和 IndexDB 无法读取。
dom window.opener window.open
XMLHttpRequest

9. 解决跨域具体

浏览器允许通过设置 document.domain共享 Cookie。一级域名是相同的，二级域名的不同的
cookie的一些属性： Domain Secure HttpOnly SameSite
window.postMessage
jsonp
cors
代理 nginx webpack-dev-server

10. get post 不同的地方 100状态

GET请求会被浏览器主动cache，而POST不会，除非手动设置。
get方式提交数据的大小（一般来说1024字节），http协议并没有硬性限制，而是与浏览器、服务器、操作系统有关，而POST理论上来说没有大小限制，http协议规范也没有进行大小限制，但实际上post所能传递的数据量根据取决于服务器的设置和内存大小
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息
GET参数通过URL传递，POST放在Request body中。
GET产生一个TCP数据包；POST产生两个TCP数据包。

对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；
而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

GET是用来向获取服务器信息的，请求报文传输的信息只是用于描述所需资源的参数，返回的信息才是数据本身；POST是用来向服务器传递数据的，其请求报文传递的信息就是数据本身，返回的报文只是操作的结果。

11. tcp udp区别

tcp 面向连接面向字节流安全可靠
udp 无连接面向数据报不安全

12. tcp如何实现可靠滑动窗口序列号拥塞控制慢启动

校验和
如果不一致，那么数据一顶有误，如果一致，不一定成功
发送方：在发送数据之前计算检验和，并进行校验和的填充。
接收方：收到数据后，对数据以同样的方式进行计算，求出校验和，与发送方的进行比对
序列号
序列号：TCP传输时将每个字节的数据都进行了编号，这就是序列号。
确认应答：TCP传输的过程中，每次接收方收到数据后，都会对传输方进行确认应答。也就是发送ACK报文。这个ACK报文当中带有对应的确认序列号，告诉发送方，接收到了哪些数据，下一次的数据从哪里发。

序列号的作用不仅仅是应答的作用，有了序列号能够将接收到的数据根据序列号排序，并且去掉重复序列号的数据。这也是TCP传输可靠性的保证之一。

超时重传
超时以500ms为一个单位进行控制，每次判定超时重发的超时时间都是500ms的整数倍。重发一次后，仍未响应，那么等待2*500ms的时间后，再次重传。等待4*500ms的时间继续重传。以一个指数的形式增长。累计到一定的重传次数，TCP就认为网络或者对端出现异常，强制关闭连接。
连接管理
流量控制
接收端在接收到数据后，对其进行处理。如果发送端的发送速度太快，导致接收端的结束缓冲区很快的填充满了。此时如果发送端仍旧发送数据，那么接下来发送的数据都会丢包，继而导致丢包的一系列连锁反应，超时重传呀什么的。TCP根据接收端对数据的处理能力，决定发送端的发送速度，这个机制就是流量控制。
拥塞控制

发送方开始发送数据的时候，如果嘎嘎开始就发送大量数据，那么可能造成一些问题。网络会很拥堵
tcp引入了慢启动的机制，在开始发送数据时，先发送少量的数据探路
这时候就引入一个叫做拥塞窗口的概念。发送刚开始定义拥塞窗口为 1，每次收到ACK应答，拥塞窗口加 1。在发送数据之前，首先将拥塞窗口与接收端反馈的窗口大小比对，取较小的值作为实际发送的窗口。
拥塞窗口的增长是指数级别的。慢启动的机制只是说明在开始的时候发送的少，发送的慢，但是增长的速度是非常快的。为了控制拥塞窗口的增长，不能使拥塞窗口单纯的加倍，设置一个拥塞窗口的阈值，当拥塞窗口大小超过阈值时，不能再按照指数来增长，而是线性的增长。在慢启动开始的时候，慢启动的阈值等于窗口的最大值，一旦造成网络拥塞，发生超时重传时，慢启动的阈值会为原来的一半（这里的原来指的是发生网络拥塞时拥塞窗口的大小），同时拥塞窗口重置为 1。

13. 数组乱序

 const randomIndex = Math.round(Math.random() * (arr.length - 1 - i)) + i;
  [arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]];

14. 最长不重复子串

var lengthOfLongestSubstring = function(s) {
    let max = 0;
    let arr = []
    for (let str in s) {
        // console.log(s[str])
        let index = arr.indexOf(s[str])
        if (index !== -1) {
             arr.splice(0,index + 1)
        } 
            arr.push(s.charAt(str))
            console.log(arr.length,'1')
            max = Math.max(max,arr.length)
        
    }
    return max
};