在腾讯前端面试篇(一)中,我主要讲了笔者面试腾讯一面和二面的经历,文章得到了不错的反响,笔者一激动大晚上把女朋友晾在一边,写下了第二篇,现在耳朵和膝盖都还有点痛。第二篇会讲述笔者面试腾讯的第三面,第四面会在后续的文章更新。大家看我辛苦的份上,关注一下呗!
第三面——电话面加远程机试
这一面问的问题不多,问了一下网络相关的问题,还问了几个智力题,其他都为机试!
来来来,废话不说,干货搞起来!
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