阿里面试官的”说一下从url输入到返回请求的过程“问的难度就是不同！

时间  2021-08-12 标签 css html 前端 java node 面试 chrome 后端 浏览器 缓存

前言

年前准备换工做，总结了一波面试最频繁的面试问题跟你们交流。此文章是关于浏览器的常见问题，大概面试10家遇到6家提问相似问题（主要是大厂和中厂）。（面试的部份内容已经忘了，为了串联成一个完整的故事，增长可读性，20%的内容为虚构），目前入职滴滴出行成都团队。css

推荐计算机基础精品文章：juejin.cn/post/684490…html

问题: 从浏览器地址栏输入url到请求返回发生了什么

你一看这种烂掉牙的问题，小case，但996面试大佬由此延展的问题已经远远超越了这个问题自己了，不信你就接着看。前端

我回答了首先会进行 url 解析，根据 dns 系统进行 ip 查找。java

话音刚落，此时一位喜欢修福报的公司的大佬打断了我，说url为啥要解析，dns查询规则是什么？我一听就内心想，不按套路出牌啊，网上通常都没问这两个问题，内心再一想，俗话说，万事开头难，扛过这一波，答出来，就是阳光明媚，万物骚动的春天！node

先说为何url要解析（也就是编码)面试

  • 我回答大概内容是：由于网络标准规定了URL只能是字母和数字，还有一些其它特殊符号（-_.~ ! * ' ( ) ; : @ & = + $ , / ? # [ ]，特殊符号是我下来查的资料，实在背不住这么多，比较常见的就是不包括百分号和双引号），并且若是不转义会出现歧义，好比http:www.baidu.com?key=value,假如个人key自己就包括等于=符号，好比ke=y=value，就会出现歧义，你不知道=究竟是链接key和value的符号，仍是说自己key里面就有=。
  • 大佬接着毒打我说，那url编码的规则是什么呢，我说utf-8
  • 大佬接着穷追不舍，为啥是utf-8呢，全部浏览器都是这样吗？中文的话用gb2312编码吗，还有就是万一浏览器不是你说的这样统一用utf-8，你怎么保证都是utf-8的编码?
  • 我支支吾吾的说，我了解的大概是这样，不太清楚, 应该和html自己的编码格式有关，而后怎么保证utf-8的编码，我以为能够用encodeURIComponent
  • 大佬说encodeURIComponent比encodeURI有什么区别?
  • 区别就是encodeURIComponent编码范围更广，适合给参数编码，encodeURI适合给URL自己（locaion.origin）编码,固然项目里通常都是用qs库去处理

而后说说dns解析流程，而且html如何作dns优化chrome

首先dns这个属于好久之前在计算机网络谢希仁版看到过了，有一些细节忘了，可是大体流程是记得的。好比说查询一个网址为：www.baidu.com后端

一、器中输入www.baidu.com 域名，操做系统会先查hosts件是否有记录，有的话就会把相对应映射的IP返回。浏览器

二、hosts文件没有就去查本地dns解析器有没有缓存。（这个我没答上来）缓存

三、而后就去找咱们计算机上配置的dns服务器上有或者有缓存，就返回

四、尚未的话就去找根DNS服务器(全球13台，固定ip地址)，而后判断.com域名是哪一个服务器管理，若是没法解析，就查找.baidu.com服务器是否能解析，直到查到www.baidu.com的IP地址

注:后面查资料才发现dns查询有两种模式，一种是转发模式，一种是非转发模式，我上面说的4是非转发模式。

前端的dns优化，能够在html页面头部写入dns缓存地址，好比

<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
复制代码

终于抗过了第一轮的猛问，接着我继续说从浏览器地址栏输入url到请求返回发生了什么

查找到IP以后，就是http协议的三次握手（以及后面会涉及到四次分手）

我刚恢复节奏，准备侃侃而谈，修福报的大佬再次打断了我，说三次握手，为啥两次不行，顺便说一下3次握手发生了什么。

我去，大意了，没有闪，这是否是说我每说一句都要夹杂着各类问题，太难了啊！！！

没有办法，继续回答大佬，我说我先回答三次握手发生的事情吧，简答来讲：

  • 第一次握手：主机A发送位码为SYN＝1的TCP包给服务器，而且随机产生一个做为确认号（这是tcp包的一部分），主机B收到SYN码后直到A要求创建链接;

  • 第二次握手：主机B收到请求后，向A发送确认号（主机A的seq+1），syn=1，seq = 随机数 的TCP包；

  • 主机A收到后检查确认号是否正确，即第一次A发送的确认号是否+1了，以及位码ack是否为1，若正确，主机A会再发送确认号(主机B的seq+1)，ack=1，主机B收到后确认seq值与ack=1则链接创建成功。

接着补上小问题为何两次握手不行，由于第二次握手，主机B还不能确认主机A已经收到确认请求，也是说B认为创建好链接，开始发数据了，结果发出去的包一直A都没收到，那攻击B就很容易了，我专门发包不接收，服务器很容易就挂了。

接着，大佬说出个加分题，我看你不是科班出身，能答多少是多少。问题是,从网卡把数据包传输出去到服务器发生了什么，提示我OSI参考模型

我一听，好嘛，这不是计算机网络的知识吗，幸好以前看过书，但也是很久之前看过了，只能凭借本身的理解解答了。

  • 我说，先从局域网把数据发送到公司的交换机（若是交换机没有缓存本地mac地址和IP地址的映射，此时会经过ARP协议来得到），交换机的好处是能够隔离冲突域（由于以太网用的是CSMA/CD协议,这个协议规定网线上同一时刻只能有一台机器发送数据），这样就能够不只仅同一时刻只有一台机器发送网络包了
  • 而后交换机再将数据发送到路由器，路由器至关于公司网关（咱们公司小），路由器具备转发和分组数据包的功能（路由器经过选定的路由协议会构造出路由表，同时不按期的跟相邻路由器交换路由信息），而后这算是通过了物理层，数据链路层（以太网）,开始到网络层进行数据转发了
  • 而后路由器转发IP数据报，通常公司的IP地址都会通过NAT转换，让内网的ip也可以访问外网，咱们公司我注意了一下是192.168打头的内网ip地址。经过路由器的分组传输，全部数据到达服务器。
  • 而后服务器的上层协议传输层协议开始发挥做用，根据tcp包里的端口号，让服务器特定的服务来处理到来的数据包，而且tcp是面向字节流的(tcp有四大特性，可靠传输、流量控制、拥塞控制、链接管理)，因此咱们node的request对象，它的监听事件data事件为何要用字符串一块儿拼接起来呢（buffer），就是由于tcp自己就是字节流，request对象使用的data（http层面）是tcp传来的数据块。
  • 最后数据由传输层转交给应用层，也就是http服务（或者https），后端通过一系列逻辑处理，返回给前端数据。

答完这里，我说大佬我只知道大概的流程，具体细节我不是很清楚，但本身后面会补上。。。

大佬让我继续，我就接着3次握手以后接着说道，创建完连接，就该请求html文件了，若是html文件在缓存里面浏览器直接返回，若是没有，就去后台拿

刚说到缓存，立马就有一种不详的预感，果不其然大佬先让把缓存解释一下。缓存这种问烂的问题，本觉得能轻松应对，结果仍是被问了个满头包。。。。

我说的大概意思是:

  • 浏览器首次加载资源成功时，服务器返回200，此时浏览器不只将资源下载下来，并且把response的header(里面的date属性很是重要，用来计算第二次相同资源时当前时间和date的时间差)一并缓存;

  • 下一次加载资源时，首先要通过强缓存的处理，cache-control的优先级最高，好比cache-control：no-cache,就直接进入到协商缓存的步骤了，若是cache-control：max-age=xxx,就会先比较当前时间和上一次返回200时的时间差，若是没有超过max-age，命中强缓存，不发请求直接从本地缓存读取该文件（这里须要注意，若是没有cache-control，会取expires的值，来对比是否过时），过时的话会进入下一个阶段，协商缓存

  • 协商缓存阶段，则向服务器发送header带有If-None-Match和If-Modified-Since的请求，服务器会比较Etag，若是相同，命中协商缓存，返回304；若是不一致则有改动，直接返回新的资源文件带上新的Etag值并返回200;

  • 协商缓存第二个重要的字段是，If-Modified-Since，若是客户端发送的If-Modified-Since的值跟服务器端获取的文件最近改动的时间，一致则命中协商缓存，返回304；不一致则返回新的last-modified和文件并返回200;

果不其然，大佬问了一些缓存不常问的，首先就是问我知道什么是from disk cache和from memory cache吗，何时会触发？

  • 我说强缓存会触发，这两种，具体什么行为不知道,大概内容以下：
一、先查找内存，若是内存中存在，从内存中加载；
二、若是内存中未查找到，选择硬盘获取，若是硬盘中有，从硬盘中加载；
三、若是硬盘中未查找到，那就进行网络请求；
四、加载到的资源缓存到硬盘和内存；
复制代码

接着大佬又问知道什么是启发式缓存吗，在什么条件下触发？

这个问题给个人感受就两个字，懵逼！而后如实回答不知道。（查了下资料大概以下）

启发式缓存:

若是响应中未显示Expires，Cache-Control：max-age或Cache-Control：s-maxage，而且响应中不包含其余有关缓存的限制，缓存可使用启发式方法计算新鲜度寿命。一般会根据响应头中的2个时间字段 Date 减去 Last-Modified 值的 10% 做为缓存时间。

// Date 减去 Last-Modified 值的 10% 做为缓存时间。
// Date：建立报文的日期时间, Last-Modified 服务器声明文档最后被修改时间
  response_is_fresh =  max(0,（Date -  Last-Modified)) % 10
复制代码

接着回答，我说返回html以后，会解析html,这部分知识我提早准备过，可是答的不是很详细，大概意思就是cssom + domTree = html,而后布局和绘制

  • 构建DOM树(DOM tree)：从上到下解析HTML文档生成DOM节点树（DOM tree），也叫内容树（content tree）；

  • 构建CSSOM(CSS Object Model)树：加载解析样式生成CSSOM树；

  • 执行JavaScript：加载并执行JavaScript代码（包括内联代码或外联JavaScript文件）；

  • 构建渲染树(render tree)：根据DOM树和CSSOM树,生成渲染树(render tree)；

  • 渲染树：按顺序展现在屏幕上的一系列矩形，这些矩形带有字体，颜色和尺寸等视觉属性。

  • 布局（layout）：根据渲染树将节点树的每个节点布局在屏幕上的正确位置；

  • 绘制（painting）：遍历渲染树绘制全部节点，为每个节点适用对应的样式，这一过程是经过UI后端模块完成；

接着面试官问我一些页面渲染层的一些优化手段，大概以下：

页面渲染优化

  • HTML文档结构层次尽可能少，最好不深于六层；
  • 脚本尽可能后放，放在前便可；
  • 少许首屏样式内联放在标签内；
  • 样式结构层次尽可能简单；
  • 在脚本中尽可能减小DOM操做，尽可能缓存访问DOM的样式信息，避免过分触发回流；
  • 减小经过JavaScript代码修改元素样式，尽可能使用修改class名方式操做样式或动画；
  • 动画尽可能使用在绝对定位或固定定位的元素上；
  • 隐藏在屏幕外，或在页面滚动时，尽可能中止动画；
  • 尽可能缓存DOM查找，查找器尽可能简洁；
  • 涉及多域名的网站，能够开启域名预解析

最后面试官问我，如何诊断页面渲染时各个性能指标，我大概说了，经过chrome浏览器的工具，好比看网络请求状况的network，还有看页面渲染状况的perfermance，面试下来本身查了一些资料，好比知乎的这篇文章，我以为写的很详细，如下是摘抄部分，我打算之后有机会本身总结一篇。

zhuanlan.zhihu.com/p/105561186

顺便成都这边成都滴滴招聘前端，java和测试。我这边直接推到内推系统里，欢迎你们投递，简历投放邮箱为2298613245@qq.com

联系我们 沪ICP备13005482号-10