腾讯前端面试篇(二)

30,779 阅读6分钟

腾讯前端面试篇(一)中,我主要讲了笔者面试腾讯一面和二面的经历,文章得到了不错的反响,笔者一激动大晚上把女朋友晾在一边,写下了第二篇,现在耳朵和膝盖都还有点痛。第二篇会讲述笔者面试腾讯的第三面,第四面会在后续的文章更新。大家看我辛苦的份上,关注一下呗!

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

这一面问的问题不多,问了一下网络相关的问题,还问了几个智力题,其他都为机试!

来来来,废话不说,干货搞起来!

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

这个问题有没有觉得很眼熟,相信很多人在面试中都遇到过,这是一道非常非常经典的面试题!面试官喜欢问,是因为这道题真的可以考察很多方面的知识。

答案:

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

2、浏览器查找当前URL是否存在缓存,并比较缓存是否过期。

3、DNS解析URL对应的IP。

4、根据IP建立TCP连接(三次握手)。

5、HTTP发起请求。

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

7、渲染页面,构建DOM树。

8、关闭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次。

答案

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

二、、将A、B组进行第一次称,若不同重则有一组有问题。

三、将重组两个球第二次称,若不同重则有一个有问题。 将重组重球(若选轻球则以下结论相反)与轻组一球进行第三次称。 若球重,则这粒为重球为异常球;若相同,则剩余那个为轻异常球。

面试结束了,😁,咱们进入笔试环节

一. 用原生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