访问URL之后

[Lmagic16]

访问URL之后发生了什么

github回答
segmentfault的回答

1. 解析URL（获得域名或IP地址）
   URL的构成：协议+主机名+目录+片段标识符(带#符号)，例如http://www.lmagic.site/home/#hashinfo
   若URL 中没有给出端口号，则采用默认端口号（http 协议默认端口号是 80， https 默认端口号是 443）
2. DNS域名解析（域名—>IP地址）
   • 检查浏览器缓存
   • 检查本地Hosts缓存
   • 向DNS 服务器发送查询请求：使用 53 端口向 DNS 服务器发送 UDP 请求包，如果响应包太大，会使用 TCP 协议，如果本地/ISP DNS 服务器没有找到结果，它会发送一个递归查询请求，一层一层向高层 DNS 服务器做查询，直到查询到起始授权机构，如果找到会把结果返回。
3. 层层封装请求报文
   • 请求一个 TCP流套接字，这个请求先被交给传输层，在传输层请求被封装成 TCP 报文，报文头部包括源端口和目的端口，源端口会在系统内核的动态端口范围内选取。
   • TCP报文发送到网络层，加上ip头部信息封装为ip报文，包括源ip地址和目的ip地址。
4. 建立网络连接
   • 主机根据目的ip查询路由表，决定从哪个网卡端口转发出去。
   • ip报文会被发送到链路层，并封装为链路层的报文。
   • 若目标服务器和主机在同一个子网内，主机通过ARP地址解析协议找到目标服务器的mac地址，并与之建立连接。
   • 若目标服务器和主机不在同一个子网内，主机通过ARP地址解析协议找到网关的mac地址，并将报文发送到网关，经由网关发往目标服务器。
   • 请求报文经过网络中路由的寻址转发，最后达到目的服务器。
   • 目标服务器层层解包，获取请求信息。
5. 上述为一次TCP的连接，而网络连接的建立，需要TCP三次握手。最后建立网络连接。
6. HTTP 服务器请求处理（浏览器获得资源）
   • 服务器把请求解析为 请求方法、域名、资源路径等，根据请求，返回相应的资源（HTML，CSS，JS，图片等）
7. 解析
   • HTML解析生成DOM文档树
   • 加载css、js等外部文件
   • CSS解析为样式表对象
8. 渲染
   • 遍历DOM树，计算每个节点的CSS样式值，宽度高度等，然后构建坐标，层处理；然后进行GPU图形渲染。
9. 当页面内容和布局需要改变时，产生又一轮渲染与绘制。

浏览器的组件

• 用户界面 用户界面包含了地址栏，前进后退按钮，书签菜单等等，除了请求页面之外所有你看到的内容都是用户界面的一部分
• 浏览器引擎 浏览器引擎负责让 UI 和渲染引擎协调工作
• 渲染引擎 渲染引擎负责展示请求内容。如果请求的内容是 HTML，渲染引擎会解析 HTML 和 CSS，然后将内容展示在屏幕上
• 网络组件 网络组件负责网络调用，例如 HTTP 请求等，使用一个平台无关接口，下层是针对不同平台的具体实现
• UI后端 UI 后端用于绘制基本 UI 组件，例如下拉列表框和窗口。UI 后端暴露一个统一的平台无关的接口，下层使用操作系统的 UI 方法实现
• Javascript 引擎 Javascript 引擎用于解析和执行 Javascript 代码
• 数据存储 数据存储组件是一个持久层。浏览器可能需要在本地存储各种各样的数据，例如 Cookie 等。浏览器也需要支持诸如 localStorage，IndexedDB，WebSQL 和 FileSystem 之类的存储机制