当您在浏览器中输入“google.com”并按 Enter 键时会发生什么?
那么会发生什么?
有什么明显的不同?
那么问题本身又如何呢?
我遇到过的最喜欢的面试问题是“你在浏览器地址栏中输入‘google.com’并点击<Enter>
,然后会发生什么?”
有人可能会连续几天都想用某种形式完整地回答这个问题。他们会深入到什么程度呢?纯粹为了好玩,我把我的答案写在这里。在一次真正的面试中,我被问到这个问题时,我滔滔不绝地说了足足10分钟,他们才打断我。然后,即使面试结束后,我还是会想起那些我忘了说的内容。
我将把它格式化为一整段文字,因为这是在对话中回答这个问题的感受。
那么会发生什么?
浏览器会分析输入。通常,如果输入的是“.com”,它不会认为你输入的是搜索词。一旦它确定输入的肯定是 URL,就会检查其是否包含协议,如果没有,则会在开头添加“http://”。由于你没有指定 HTTP 协议的一些特性,它会默认使用默认值,例如端口 80、GET 方法以及无基本身份验证。
然后它会创建一个 HTTP 请求并发送。我不太确定自己的底层网络知识,但如果我足够了解的话,我会说一些关于 MAC 地址、TCP 数据包传输和丢包处理的知识。不过,无论如何,都会进行“google.com”的 DNS 查询,如果该 IP 地址尚未缓存,DNS 服务会返回一个 IP 地址列表,因为“google.com”不只有一个 IP 地址。我相信浏览器会默认选择第一个 IP 地址。我不确定这些 IP 地址是否受地区限制,也不知道列表是如何运作的,但我知道它就在那里。
因此,HTTP 请求会从一个节点跳转到另一个节点,直到到达 google.com 负载均衡器的 IP 地址。这种情况不会持续太久,Google 会回复说您需要使用 HTTPS——假设是 301 永久重定向。因此,它会一路返回到您的浏览器,浏览器会将方案更改为 HTTPS,使用默认的 443 端口并重新发送。这一次,负载均衡器和浏览器客户端之间会进行 TLS 握手。虽然我不太确定具体是如何运作的,但我知道请求会告诉 Google 它支持哪些协议(TLS 1.0、1.1、1.2),Google 会回复“我们使用 1.2”。然后,请求会使用 TLS 加密发送。
我认为谷歌接下来会做的是,让它通过其负载均衡器上的 Web 应用防火墙规则,看看它是否是恶意请求。如果通过了,安全连接很可能已经被终止(因为 PCI-DSS 法规规定无需加密内部流量),请求会被分配到其 CDN 中的一个池中,然后谷歌端缓存的主页会以 HTTP 响应的形式返回。很可能已经预先进行了 gzip 压缩。
浏览器会读取 Google 的响应头,并根据响应头缓存策略进行缓存,然后解压响应体。由于是 Google 的响应头,它很可能经过了极度优化:经过最小化处理,可能包含大量预渲染内容、内联 CSS、JavaScript 和图片,以减少网络请求和首次渲染时间。但该请求会触发一系列其他请求,由于浏览器应该运行 HTTP/2,所有请求都是并发的。在发出这些请求时,JavaScript 会被解析,可能不会阻塞,因为它们在标签中使用了 defer 属性——或者说是 async 属性,我从未了解过这些属性各自做了什么。
但浏览器可能已经呈现了搜索框并正在处理顶部的工具栏,这将需要一些额外的网络请求 - 我可能已经有一个 cookie 或带有 OAuth 令牌的本地存储 - 或者也许我正在使用 Chrome 并且它已经知道我是谁,并且带有身份验证的请求被发送到他们的 Google+ API,该 API 会告诉 Google 搜索页面应用程序我是谁。
另一个请求会被发送来获取我的头像图片。此时,他们已经嗅探过浏览器,确认我是否在使用 Chrome。如果是,他们会弹出一个提示框,告诉我 Chrome 很棒,我应该使用它,而不是其他浏览器。
我想那时一切都会安静下来。一切都发生在一瞬间。
有什么明显的不同?
让我们查找 DNS:
- 我知道我以前见过 google.com 返回多个 IP 地址,但现在好像不再这样了。他们以前好像用的是轮询机制,但现在不用了。StackOverflow上的这个问答也提到了这个问题。我都忘了它叫轮询了。
网络层...
在正式结构化的答案中,您可能会参考 OSI 模型,我知道这个模型,但并不精通。查阅之后,我认为它的网络分层图如下:
- 应用程序 - 发起请求的逻辑
- 演示 - HTTP
- 会话 - TLS
- 传输-TCP
- 网络 - 数据包路由 (IP)
- 数据链路 - 帧(看起来像是数据包容器)
- 物理 - 比特流
- 我错过了在 TLS 中他们在同意协议后交换证书。
- 网络并不是我的强项。
在我的浏览器中打开 google.com,禁用缓存:
- 我错过了主机名规范化 - 这是一个 301。
- 从 HTTP 到 HTTPS 的更正是 307 内部重定向。
- 然后它会下载字体、徽标图片和我的头像图片。无需 API 调用,这意味着他们将我的个人资料信息推送到页面中,并将其与返回结果捆绑在一起——所以当你访问 google.com 时,他们会进行实际的数据检索,而不仅仅是提供缓存的资源。
回应
以上是 IE 11 和 Chrome 响应的文件比较 - 均已注销。
- IE11 和 Chrome 之间差别不大。但这意味着它们在服务器端而不是客户端嗅探用户代理。我本来可以在回答中提到这一点的。
- 出乎意料的是,Chrome 的响应大小竟然大了 22kB。我怀疑是不是因为语音搜索功能,IE 11 明显没有这个功能。IE11 可能需要一些 polyfill 和 Chrome 的广告,但这些都已经被混淆了,我不想再折磨自己了。
- 即使我在 Chrome 中清除了 Cookie,它仍然会在第一次请求时发送 Cookie。但在 IE 11 中则不会发生这种情况。
让我们深入研究一下该渲染!
上面的图片是 Chrome 为您提供的第一张屏幕截图。
- script 标签上没有任何 async 或 defer 属性,只有 nonce 属性。我现在正在学习 nonce,它似乎与安全相关。我猜他们想要那些阻塞脚本。我敢肯定他们之前也尝试过用不用 async/defer,最后还是决定不用。
- 提醒自己:完整的响应内容是一堆 JavaScript、CSS 和 HTML 的混合体。它们没有遵循任何关于分隔位置的规则。
那么问题本身又如何呢?
你知道吗?对于开发者来说,这道面试题可能不太好,因为答案牵涉到太多网络方面的问题。我喜欢这种开放式的问题形式,包含一些猜测。这让面试官有机会继续提问,比如“你认为TLS是如何建立的?”,以此来了解应聘者的思维方式,了解他们的创造力,了解他们的极限(耐心有多强?)。
您最喜欢的面试问题是什么?
文章来源:https://dev.to/antonfrattaroli/what-happens-when-you-type-googlecom-into-a-browser-and-press-enter-39g8