【高频】从输入URL到页面展示到底发生了什么?

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: 【高频】从输入URL到页面展示到底发生了什么?

一、相关衍生面试问题:

浏览器输入美团网站,从回车到浏览器展示经历了哪些过程 ?

http输入网页之后的流程?

百度搜索页面,从点开搜索框,到显示搜索页面经历了什么?


二、探究各个过程:

(以下回答针对问题1回答)

1. DNS 解析

  • 浏览器首先会检查本地 DNS 缓存,看是否有美团网站的 IP 地址。如果没有,则会向本地 DNS 服务器发送请求,查询美团网站的域名对应的 IP 地址。
  • 本地 DNS 服务器可能无法直接找到美团网站的 IP 地址,它会向根域名服务器发送请求,根域名服务器会指引本地 DNS 服务器去查询 .com 域名的顶级域名服务器。
  • 顶级域名服务器会指引本地 DNS 服务器去查询美团网站的域名服务器。
  • 美团网站的域名服务器会最终返回美团网站的 IP 地址给本地 DNS 服务器。
  • 本地 DNS 服务器将 IP 地址返回给浏览器,并将其缓存起来。

【涉及到的相关知识:


1.DNS缓存:存储近期浏览、连接过的网站服务器的IP用的一个缓存系统。浏览器会尽可能利用缓存来提高性能,减少不必要的网络请求和DNS解析。


2.域名服务器:根域名服务器、顶级域名服务器(org\com\edu)、权限域名服务器、本地域名服务器[迭代查询(常用) | | 递归查询]。


3.DNS解析:用来把便于人们记忆的主机域名和电子邮件地址映射为计算机易于识别的IP地址。


2. 建立 TCP 连接


浏览器使用获得的 IP 地址,尝试与美团网站的服务器建立 TCP 连接。

浏览器会发送一个 SYN 包(同步请求)到服务器,服务器收到后会回复一个 SYN-ACK 包(同步确认)。

浏览器收到 SYN-ACK 包后,会发送一个 ACK 包(确认),完成三次握手过程,建立 TCP 连接。

【相关知识点:


1.三次握手的原因:首要原因是为了防止旧的重复连接初始化造成混乱,最主要原因就是防止「历史连接」初始化了连接。


2.每次建立 TCP 连接时,初始化的序列号都要求不一样:为了防止历史报文被下一个相同四元组的连接接收(主要方面);为了安全性,防止黑客伪造的相同序列号的 TCP 报文被对方接收。


3.SYN攻击属于DDoS攻击的一种,它利用TCP协议缺陷,通过发送大量的半连接请求,耗费CPU和内存资源。【最直接的表现就会把 TCP 半连接队列打满,这样当 TCP 半连接队列满了,后续再在收到 SYN 报文就会丢弃,导致客户端无法和服务端建立连接。】


  • 半连接队列,也称 SYN 队列;
  • 全连接队列,也称 accept 队列;

4.避免办法:


  • 调大 netdev_max_backlog;
  • 增大 TCP 半连接队列;
  • 开启 tcp_syncookies;
  • 减少 SYN+ACK 重传次数


3. 发送 HTTP 请求


  • 浏览器向美团网站的服务器发送一个 HTTP 请求,包含以下信息:
  • 请求方法:GET
  • 请求 URL:美团网站的首页地址
  • 请求头:包含一些浏览器信息、语言信息、Cookie 信息等。
  • 服务器收到请求后,会根据请求信息进行处理。

【相关知识点:


1.post、get、put、delete就是对这个资源进行增、删、改、查的操作!


2.URI 用字符串标识某一互联网资源【身份证号】,而 URL 表示资源的地点【居住地址】


3.Cookie为“小型文本文件”,是某些网站为了辨别用户身份,进行Session跟踪而储存在用户本地终端上的数据(通常经过加密),由用户客户端计算机暂时或永久保存的信息



4. 服务器处理请求


  • 服务器会根据请求 URL,找到对应的页面文件。
  • 服务器会根据页面文件的内容,生成 HTML 代码。
  • 服务器会根据请求头中的 Cookie 信息,判断用户是否已登录,并根据用户状态,添加一些个性化的内容到 HTML 代码中。
  • 服务器会根据请求头中的语言信息,选择合适的语言版本。

【相关知识点:


1.跨站请求伪造(Cross-Site Request Forgery,简称CSRF)是指,攻击者可能利用网页中的恶意代码强迫受害者浏览器向被攻击的Web站点发送伪造的请求,篡夺受害者的认证Cookie等身份信息,从而假冒受害者对目标站点执行指定的操作。


2.保护措施主要有:(1 )加入MAC以进行完整性校验;(2)防止非法用户非法截获后的重放,可以让用户对相关信息进行数字签名,加强有效性验证;(3)对Cookie本身进行随机密钥加密,保证Cookie本身的信息安全。



5. 服务器返回响应


  • 服务器将生成的 HTML 代码,以及一些其他信息(例如图片、CSS、JavaScript 文件等),打包成 HTTP 响应,发送回浏览器。
  • 响应头包含一些状态码、内容类型、缓存信息等。

6. 浏览器解析响应


  • 浏览器收到响应后,会解析响应头中的状态码。
  • 如果状态码为 200,表示请求成功,浏览器会继续解析响应内容。
  • 如果状态码为 404,表示页面未找到,浏览器会显示错误页面。
  • 浏览器会解析响应内容中的 HTML 代码,并将其渲染成网页。
  • 浏览器会加载响应内容中的图片、CSS、JavaScript 文件,并将其应用到网页中。

【相关知识点:


  • 1xx(信息性状态码):表示接收的请求正在处理。
  • 2xx(成功状态码):表示请求正常处理完毕。
  • 3xx(重定向状态码):需要后续操作才能完成这一请求。
  • 4xx(客户端错误状态码):表示请求包含语法错误或无法完成。
  • 5xx(服务器错误状态码):服务器在处理请求的过程中发生了错误。


7. 网页展示


浏览器将渲染好的网页展示给用户。

8. 持续交互


用户在网页上进行操作,例如点击链接、提交表单等,浏览器会发送新的 HTTP 请求到服务器,服务器会根据请求进行处理,并返回新的响应,浏览器会继续更新网页内容。


三、面试回答:

  1. 用户在浏览器地址栏输入"meituan.com"并按下回车键。
  2. 浏览器首先会查看自己的缓存,看是否之前已经访问过这个网站并缓存了相关资源。如果缓存中有相关的资源,浏览器就可以直接使用缓存中的内容,无需进行其他操作。
  3. 如果缓存中没有找到所需的资源,浏览器就需要进行DNS解析,查找"meituan.com"对应的IP地址。这个过程中,浏览器会先查看本地DNS缓存,如果没有找到就会向DNS服务器发起查询请求。
  4. 获得IP地址后,浏览器会向该IP地址发起HTTP请求,向web服务器请求获取"meituan.com"网页的内容。


  1. web服务器收到请求后,会处理并生成相应的HTML页面内容,然后将其返回给浏览器。


  1. 浏览器收到HTML页面内容后,会对其进行解析和渲染,构建出网页的DOM树并显示出来。


  1. 在渲染网页的过程中,还可能需要加载额外的资源,如CSS文件、JavaScript文件、图片等。对于这些资源,浏览器也会遵循之前的流程,先检查缓存,再进行DNS解析和网络请求。


  1. 当所有必需的资源都加载完毕后,浏览器就能将完整的网页呈现给用户。


【下图为代码随想录推荐回答:】

相关实践学习
通过Ingress进行灰度发布
本场景您将运行一个简单的应用,部署一个新的应用用于新的发布,并通过Ingress能力实现灰度发布。
容器应用与集群管理
欢迎来到《容器应用与集群管理》课程,本课程是“云原生容器Clouder认证“系列中的第二阶段。课程将向您介绍与容器集群相关的概念和技术,这些概念和技术可以帮助您了解阿里云容器服务ACK/ACK Serverless的使用。同时,本课程也会向您介绍可以采取的工具、方法和可操作步骤,以帮助您了解如何基于容器服务ACK Serverless构建和管理企业级应用。 学习完本课程后,您将能够: 掌握容器集群、容器编排的基本概念 掌握Kubernetes的基础概念及核心思想 掌握阿里云容器服务ACK/ACK Serverless概念及使用方法 基于容器服务ACK Serverless搭建和管理企业级网站应用
相关文章
|
7月前
|
Web App开发 缓存 前端开发
【面试题】从输入 URL 到页面显示,这中间发生了什么?
【面试题】从输入 URL 到页面显示,这中间发生了什么?
110 0
|
1月前
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密
|
1月前
|
域名解析 缓存 网络协议
浏览器中输入URL返回页面过程(超级详细)、DNS域名解析服务,TCP三次握手、四次挥手
浏览器中输入URL返回页面过程(超级详细)、DNS域名解析服务,TCP三次握手、四次挥手
|
4月前
|
网络协议 前端开发 JavaScript
浏览器加载网页的幕后之旅:从URL到页面展示详解
【8月更文挑战第31天】当在浏览器地址栏输入URL并回车后,一系列复杂过程随即启动,包括DNS解析、TCP连接建立、HTTP请求发送、服务器请求处理及响应返回,最后是浏览器页面渲染。这一流程涉及网络通信、服务器处理和客户端渲染等多个环节。通过示例代码,本文详细解释了每个步骤,帮助读者深入理解Web应用程序的工作机制,从而在开发过程中作出更优决策。
77 5
|
4月前
|
缓存 前端开发 JavaScript
输入URL到页面渲染的全过程
输入URL到页面渲染的全过程
37 1
|
4月前
|
JavaScript Linux 应用服务中间件
【Azure 应用服务】FTP 部署 Vue 生成的静态文件至 Linux App Service 后,访问App Service URL依旧显示Azure默认页面问题
【Azure 应用服务】FTP 部署 Vue 生成的静态文件至 Linux App Service 后,访问App Service URL依旧显示Azure默认页面问题
|
4月前
|
API UED 开发者
Vaadin路由魔法:导航之舟,带你穿越页面迷宫!驾驭神奇URL,解锁无限可能!
【8月更文挑战第31天】Vaadin是一款现代Java Web开发框架,其路由机制结合前后端路由,确保流畅的用户体验和高效服务器资源利用。通过`@Route`注解和`Router`类,开发者可以轻松定义和管理页面路径。例如,`@Route("home")`可指定视图路径,而参数化路由如`@Route("user/:userId")`则允许URL传参。此外,Vaadin还提供了丰富的导航API和自定义路由事件监听器,助力开发者构建结构清晰且体验优秀的Web应用。
64 0
|
4月前
|
缓存 网络协议 JavaScript
面试常考题:输入url到页面渲染发生了什么?(前半段)
面试常考题:输入url到页面渲染发生了什么?(前半段)
|
4月前
|
JavaScript 前端开发 网络协议
面试常考题: 输入url到页面渲染发生了什么(后半段)
面试常考题: 输入url到页面渲染发生了什么(后半段)
|
6月前
|
Web App开发 移动开发 安全
如何做到修改 url 参数页面不刷新
如何做到修改 url 参数页面不刷新