在腾讯前端面试篇 (一) 中, 我主要讲了笔者面试腾讯一面和二面的经历, 文章得到了不错的反响, 笔者一激动大晚上把女朋友晾在一边, 写下了第二篇, 现在耳朵和膝盖都还有点痛. 第二篇会讲述笔者面试腾讯的第三面, 第四面会在后续的文章更新. 大家看我辛苦的份上, 关注一下呗!
第三面 -- 电话面加远程机试
这一面问的问题不多, 问了一下网络相关的问题, 还问了几个智力题, 其他都为机试!
来来来, 废话不说, 干货搞起来!
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 字段进行判断.
- // 实现超出整数存储范围的两个大整数相加, 参数 a 和 b 以及函数的返回值都是字符串
- function add(a, b){
- var n1 = a.length;
- var n2 = b.length;
- for(let i = 0; i <Math.max(n1, n2)-Math.min(n1, n2); i++){
- if(n1> n2) b = '0' + b;
- if(n1 <n2) a = '0' + a;
- }
- a = a.split('').reverse();
- b = b.split('').reverse();
- //split()基于指定的分隔符将一个字符串分隔成多个子字符串, 并将结果放在一个数组中
- //reverse() 反转数组项的顺序
- var n = Math.max(n1, n2);
- var result = Array.apply(this, Array(n)).map((item, i) => {
- return 0;
- })
- // 生成一个长度为 n 的每个元素都为 0 的数组
- for(let k = 0; k <n; k++){
- var temp = parseInt(a[k])+parseInt(b[k])
- if(temp> 9){
- result[k] += temp -10 ;
- result[k+1] = 1;
- }else{
- result[k] += temp;
- }
- }
- return result.reverse().join('').toString()
- }
来源: https://juejin.im/post/5c1869ab6fb9a049f154207a