腾讯前端面试篇（二）

在腾讯前端面试篇（一）中，我主要讲了笔者面试腾讯一面和二面的经历，文章获得了不错的反响，笔者一激动大晚上把女友晾在一边，写下了第二篇，如今耳朵和膝盖都还有点痛。第二篇会讲述笔者面试腾讯的第三面，第四面会在后续的文章更新。你们看我辛苦的份上，关注一下呗！

第三面——电话面加远程机试

这一面问的问题很少，问了一下网络相关的问题，还问了几个智力题，其余都为机试！

来来来，废话不说，干货搞起来！

1. 从输入URL到页面加载发生了什么？

这个问题有没有以为很眼熟，相信不少人在面试中都遇到过，这是一道很是很是经典的面试题！面试官喜欢问，是由于这道题真的能够考察不少方面的知识。

答案：

一、浏览器的地址栏输入URL并按下回车。

二、浏览器查找当前URL是否存在缓存，并比较缓存是否过时。

三、DNS解析URL对应的IP。

四、根据IP创建TCP链接（三次握手）。

五、HTTP发起请求。

六、服务器处理请求，浏览器接收HTTP响应。

七、渲染页面，构建DOM树。

八、关闭TCP链接（四次挥手）。

这个问题涉及不少细节问题，这里没法彻底说清楚，笔者会在后续单独写一篇文章来阐述这个经典问题，读者能够先关注一下。这里主要说一下鹅厂大佬是如何一步步来追问个人，😝。

1.1 刚刚你说到过缓存，说一下缓存相关的知识吧？

答案：

浏览器缓存,HTTP缓存有多种规则，根据是否须要从新向服务器发起请求来分类，我将其分为强制缓存，对比缓存（协商缓存）。

强制缓存判断HTTP首部字段：cache-control，Expires。

Expires是一个绝对时间，即服务器时间。浏览器检查当前时间，若是还没到失效时间就直接使用缓存文件。可是该方法存在一个问题：服务器时间与客户端时间可能不一致。所以该字段已经不多使用。

cache-control中的max-age保存一个相对时间。例如Cache-Control: max-age = 484200，表示浏览器收到文件后，缓存在484200s内均有效。若是同时存在cache-control和Expires，浏览器老是优先使用cache-control。

对比缓存经过HTTP的last-modified，Etag字段进行判断。

last-modified是第一次请求资源时，服务器返回的字段，表示最后一次更新的时间。下一次浏览器请求资源时就发送if-modified-since字段。服务器用本地Last-modified时间与if-modified-since时间比较，若是不一致则认为缓存已过时并返回新资源给浏览器；若是时间一致则发送304状态码，让浏览器继续使用缓存。

Etag：资源的实体标识（哈希字符串），当资源内容更新时，Etag会改变。服务器会判断Etag是否发生变化，若是变化则返回新资源，不然返回304。

若是还有疑问，也能够查看黑金团队的一篇关于缓存的文章，讲的很是透彻，前端缓存最佳实践 。

1.2 请描述一下DNS解析的具体过程？

DNS解析是一个递归查询的过程，三言两语没法阐述清楚，你们看图吧。

1.3 TCP是如何发起链接和关闭链接的？

答案： 这个So easy!三次握手，四次挥手呗！

1.4 你知道哪些状态码？

1xx：指示信息–表示请求已接收，继续处理。

2xx：成功–表示请求已被成功接收、理解、接受。

3xx：重定向–要完成请求必须进行更进一步的操做。

4xx：客户端错误–请求有语法错误或请求没法实现。

5xx：服务器端错误–服务器未能实现合法的请求。 平时遇到比较常见的状态码有:200, 204, 301, 302, 304, 400, 401, 403, 404, 422, 500(分别表示什么请自行查找)。

1.5 刚刚你说的整个过程当中，有哪些优化手段能够优化提升网页响应速度？

分享一篇很是全面的优化的文章

2. 5点15分，时钟和分钟的夹角？

67.5度哈，这个是有个公式的，本身推理一波，若是不清楚能够在评论区问我。

3. 8个外表同样的小球 其中7个球重量相同 1个球为[异常球] 可能重量比较重也可能比较轻 利用天平称重至少多少次能够确保找出这个[异常球]，并须要知道究竟是轻了仍是重了。

这是一道很是有意思的题，答案为3次。

答案

1、将8个球先取四个组成A、B两组，每组2个。

2、、将A、B组进行第一次称，若不一样重则有一组有问题。

3、将重组两个球第二次称，若不一样重则有一个有问题。 将重组重球（若选轻球则如下结论相反）与轻组一球进行第三次称。 若球重，则这粒为重球为异常球；若相同，则剩余那个为轻异常球。

面试结束了，😁，我们进入笔试环节

一. 用原生js实现，要求：不能搜索网上资源，作到组件化，时间100 min。

1. 实现一个div滑动的动画，由快至慢5s结束（不许用css3)。

2. 页面内有一个input输入框，实如今数组arr查询命中词并要求autocomplete效果。

题目很是简单，可是很是考验面试者的代码实现能力、设计能力，功能实现基本谁都能作到。

实话实说，笔者这道题实现的有点挫，但架不住我长得可爱😊呢！因此面试官审阅了代码后，又给了我一次机会，你再作一题吧，这两题答案我不太满意！

二. 实现超出整数存储范围的两个大整数相加function add(a,b)。注意a和b以及函数的返回值都是字符串。

这道题笔者却是轻松的完成了，直接上代码。

function add (a, b) {
    let lenA = a.length,
        lenB = b.length,
        len = lenA > lenB ? lenA : lenB;

    // 先补齐位数一致
    if(lenA > lenB) {
        for(let i = 0; i < lenA - lenB; i++) {
            b = '0' + b;
        }
    } else {
        for(let i = 0; i < lenB - lenA; i++) {
            a = '0' + a;
        }
    }

    let arrA = a.split('').reverse(),
        arrB = b.split('').reverse(),
        arr = [],
        carryAdd = 0;

    for(let i = 0; i < len; i++) {
        let temp = Number(arrA[i]) + Number(arrB[i]) + carryAdd;
        arr[i] = temp > 9 ? temp - 10 : temp;
        carryAdd = temp >= 10 ? 1 : 0;
    }

    if(carryAdd === 1) {
        arr[len] = 1;
    }

    return arr.reverse().join('');
    
}
复制代码

结语

三面就这样愉快的结束了，笔者能够开开心心给女友煮水饺喽！祝你们冬至快乐！

下一篇

@author: Even