百度面试

捌玖ki
251 阅读7分钟

兜兜转转的又是百度，稍微了解我情况的孩子应该都知道，我第二份工作就是在百度，因为种种原因当时离职了。

整体面试比较顺利，面试整体偏编码能力，一面考察了js基础、编码能力和思维能力。二面主要考察了编码能力。三面考察了综合能力、自主能力和抗压能力。

一面

1. 垂直居中

juejin.cn/post/727823…

  • line-height
  • postion + margin
  • flex + align-item
  • postion + transform
  • grid + align-item

2. 怎么让右侧盒子居于左侧盒子之上（不用absolute和float）

  • 改变父盒子的transform属性，然后子元素用fixed定位
  • 左侧盒子宽度确定时，或者利用js计算出宽度
  • margin负数
  • position：relative, left负数

3. 图片在盒子里面自适应，不拉伸

最佳实践方案： object-fit能完全展示图片，且不会拉伸

<h2>方法一： width</h2>
<div>缺点：高度可能会超出或者不够</div>
<div class="container1">
    <img width="100%" src="https://ts1.cn.mm.bing.net/th/id/R-C.171e8fe1aa1544a1868ab710eed82d82?rik=FLPxvVVL9C9bnQ&riu=http%3a%2f%2fwww.pp3.cn%2fuploads%2fallimg%2f200710%2f14-200G00Z321.jpg&ehk=Lb0IHCCZIdqYQOi28m%2borU8c1ARGbTEC%2f8WYzfwRuHo%3d&risl=&pid=ImgRaw&r=0" />
</div>
<div class="container2">
    <img width="100%" src="https://ts1.cn.mm.bing.net/th/id/R-C.171e8fe1aa1544a1868ab710eed82d82?rik=FLPxvVVL9C9bnQ&riu=http%3a%2f%2fwww.pp3.cn%2fuploads%2fallimg%2f200710%2f14-200G00Z321.jpg&ehk=Lb0IHCCZIdqYQOi28m%2borU8c1ARGbTEC%2f8WYzfwRuHo%3d&risl=&pid=ImgRaw&r=0" />
</div>

<h2>方法二： object-fit</h2>
<div>缺点：高度可能会超出或者不够</div>
<div class="container1">
    <img style="object-fit: contain; width: 100%; height: 100%" src="https://ts1.cn.mm.bing.net/th/id/R-C.171e8fe1aa1544a1868ab710eed82d82?rik=FLPxvVVL9C9bnQ&riu=http%3a%2f%2fwww.pp3.cn%2fuploads%2fallimg%2f200710%2f14-200G00Z321.jpg&ehk=Lb0IHCCZIdqYQOi28m%2borU8c1ARGbTEC%2f8WYzfwRuHo%3d&risl=&pid=ImgRaw&r=0" />
</div>
<div class="container2">
    <img style="object-fit: contain; width: 100%; height: 100%" src="https://ts1.cn.mm.bing.net/th/id/R-C.171e8fe1aa1544a1868ab710eed82d82?rik=FLPxvVVL9C9bnQ&riu=http%3a%2f%2fwww.pp3.cn%2fuploads%2fallimg%2f200710%2f14-200G00Z321.jpg&ehk=Lb0IHCCZIdqYQOi28m%2borU8c1ARGbTEC%2f8WYzfwRuHo%3d&risl=&pid=ImgRaw&r=0" />
</div>

4. setTimeout和setInterval的区别

  • setTimeout回调函数只会执行一次
  • setInteval只是回调执行的间隔，并不保证后一次执行是在看一次执行完成之后执行
  • setTimeout回调执行后，就会释放内存，setInterval如果不及时清除，会一直占用内存

5. 如何一次性清除所有的setInterval

记录下所有的setInterval返回的id，然后依次清除【暂时没找到更好的答案】

6. http请求504怎么解决

HTTP状态码504表示网关超时错误，通常发生在一个服务器作为网关或代理时，无法在规定的时间内获得另一个服务器的响应。这可能是因为目标服务器过载、网络故障或者响应时间过长等原因。

解决方法：

  • 检查目标服务器：确保目标服务器正常运行，没有宕机或者过载的情况。你可以尝试直接访问目标服务器的地址，看看是否能够获得响应。
  • 网络连接：检查网络连接是否稳定，可能是网络问题导致了请求超时。
  • 优化目标服务器：如果目标服务器是你控制的，可以尝试优化其性能，确保能够及时响应请求。
  • 增加超时时间：如果你有控制权，可以尝试增加网关的超时时间，以便等待更长的响应时间。
  • 使用CDN：使用内容分发网络（CDN）可以将部分负载转移到分布在全球各地的缓存服务器上，减轻原始服务器的负担，从而减少超时错误的发生。
  • 负载均衡：如果你有多台服务器，可以考虑使用负载均衡来平衡请求的负担，确保每台服务器都能够及时响应。
  • 错误重试机制：在遇到504错误时，你可以实现一个错误重试机制，当请求失败时，可以尝试重新发送请求，但要设置一个最大重试次数以防止陷入无限循环。
  • 错误处理页面：如果504错误在特定情况下会发生（例如高峰时段），你可以考虑实现一个友好的错误页面，向用户显示一个友好的消息，以免让用户感到困惑或者失望。
  • 与服务提供商联系：如果你使用的是托管服务，可能需要联系服务提供商以解决问题。

HTTP 请求状态码是服务器响应请求时返回的三位数字代码。每个状态码都有特定的含义，它们提供了有关请求处理情况的信息。以下是一些常见的 HTTP 请求状态码及其含义：

  • 1xx（信息类）：
    • 100 Continue：客户端应继续其请求。
    • 101 Switching Protocols：服务器将遵从客户的请求转换到另外一种协议。
  • 2xx（成功）：
    • 200 OK：请求成功。
    • 201 Created：请求已经被实现，而且有一个新的资源已经依据请求的需要而建立。
    • 202 Accepted：服务器已接受请求，但尚未处理。
    • 204 No Content：服务器成功处理了请求，但不需要返回任何实体内容。
  • 3xx（重定向）：
    • 300 Multiple Choices：被请求的资源有多个表示，每个都有自己特定的地址和浏览器可以自行选择。
    • 301 Moved Permanently：被请求的资源已永久移动到新位置。
    • 304 Not Modified：资源未修改，可以使用缓存的版本。
  • 4xx（客户端错误）：
    • 400 Bad Request：服务器未能理解或者处理请求。
    • 401 Unauthorized：请求要求身份验证。
    • 403 Forbidden：服务器理解请求客户端的请求，但是拒绝执行此请求。
    • 404 Not Found：服务器找不到请求的资源。
    • 429 Too Many Requests：用户在给定的时间内发送了太多请求。
  • 5xx（服务器错误）：
    • 500 Internal Server Error：服务器遇到了一个未曾预料的状况。
    • 502 Bad Gateway：服务器作为网关或者代理，从上游服务器收到了一个无效的响应。
    • 503 Service Unavailable：服务器目前无法提供请求的服务。
    • 504 Gateway Timeout：服务器作为网关或者代理，但是没有及时从上游服务器收到请求。

7. $nexttick的原理

$nextTick 是 Vue.js 提供的一个异步更新DOM的方法，它会在 DOM 更新之后执行指定的回调函数。这个方法通常在需要等待 Vue 实例完成一次更新循环后执行某个操作时使用，以确保操作在更新完成后才执行。

$nextTick 的原理涉及到 Vue 的异步更新队列和事件循环机制：

  1. 异步更新队列：Vue 在处理数据变化时，会将需要更新的 DOM 操作放入一个队列中，然后在下一个事件循环中统一执行这些 DOM 更新操作。
  2. 事件循环机制：JavaScript 是单线程的，但是它使用了事件循环来模拟并发。事件循环是一个处理和分发事件的机制，分为宏任务队列（例如setTimeout、setInterval）和微任务队列（例如Promise、MutationObserver）。

8. 算法题-解析字符串

比较好的方法，是使用正则

如果忘记正则如何编写，可以用遍历字符串的方式

const arr = ['民警123人', '处理事件2件']
// 输出 obj=[{title: '民警', num: 123, unit: '人'}, {title: '处理事件', num: , unit: '件'}]
functin transformInfo(arr) {
    const strReg = /[\u4e00-\u9fa5]+/g;
    const numReg = /[0-9]+/g;
    const res = [];
    return arr.reduce((pre, str) => {
        const [titme, unit] = str.match(strReg);
        const [num] = str.match(numReg);
        pre.push({title, unit, num: +num})
        return pre;
    }, []])
}


function transformInfo2(arr) {
    const pattern = /^(.*?)(\d+)(.*?)$/;
    return arr.reduce((pre, str) => {
        const [titme, num, unit] = pattern.exec(str);
        pre.push({title, unit, num: +num})
        return pre;
    }, []])
}

9. 实现数组flat

// 方法一，数组原生方法flat
// 注意： flat默认只打平一层，所以需要传入参数
function arrFlat(arr) {
    return arr.flat(Infinity);
}
// 方法二，concat + 递归
function arrFlat2(arr) {
    const res = [].concat(...arr);
    let isItemArr = res.some(item => Array.isArray(item));
    if(isItemArr) {
        return arrFlat2(res);
    }
    return res;
}
// 方法二，forEach + concat + 递归
function arrFlat3(arr) {
    let res = [];
    arr.forEach(item => {
        res = res.concat(Array.isArray(item) ? arrFlat3(item) : item)
    })
    return res;
}

10. 25人比赛，5个赛道，如何最少比赛轮次选出前3名

11. 2颗玻璃球，1～100层，如何找到会使玻璃球摔坏的某一层

二面

1. 自我介绍，非常简单说了下项目

1. 写一个布局，列数根据屏幕大小进行适应，

总共12个元素， < 800 4行 3列；800 ~1440 3行 4列 ；> 1440 2行 6列

子元素高度 150px，宽度自适应， gap 16px

<style>
    .container {
        display: grid; gap: 16px;
    }
    .item {
        background-color: pink; height: 150px;
    }
    @media screen and (max-width: 800px) {
        .container {
            grid-template-columns: 1fr 1fr 1fr;
        }
    }
    @media screen and (min-width: 800px) and (max-width: 1440px) {
        .container {
            grid-template-columns: 1fr 1fr 1fr 1fr;
        }
    }
    @media screen and (min-width: 1440px) {
        .container {
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        }
     }
</style>

// html部分，直接一个父div.container和12个子div.item

3. 控制任务并发

（一个函数，入参是数字表示最大并发数量，返回时执行一个任务，）

function maxPromise(maxTime = 3) { // 需要执行的任务 const tasks = []; // 正在执行的任务数量 let runingNum = 0; return function () { tasks.push(task); const run = () => { // 正在执行的任务超过最多执行数量 if(runingNum >= maxTime || !tasks.length) { return; } runingNum++; const task = tasks.pop(); task().finnaly(() => { runingNum--; run(); }) } while(runingNum < maxTime && tasks.length) { run(); } } }

4. 获取数组中 和为指定数字 的组合

function getSumArr(arr, sum = 10) {
    const res = [];
    const sortArr = arr.sort((a, b) => a - b);
    let start = 0, end = sortArr.length - 1;
    while(start < end) {
        const curSum = sortArr[start] + sortArr[end];
        if(curSum === sum) {
            res.push([sortArr[start], sortArr[end]]); end--;
        } else if(curSum > sum) {
            end--;
        } else {
            start++;
        }
    }
    return res;
}

三面

三面都是比较开放性的问题，我的答案就不展示了，有什么问题可以评论哟

1. 自我介绍

2. 为什么自学前端

3. 从第一家公司聊到第三家

4. 三家公司你最喜欢的点和最不喜欢的点

5. 最有压力是什么时候

6. 最大的技术成就

7. 后面规划

avatar
文章
阅读
粉丝