输入 url 到看到页面发生了什么

总

浏览器是多进程的，每个页面是一个进程 浏览器进程：输入 URL 地址获取到地址，开启新的进程 网络进程，发起资源请求，获取到文件交给渲染进程 渲染进程：解析并渲染文件

网络进程 （网络七层模型）

缓存资源

• 请求资源，先去检查浏览器缓存，存在着直接返回资源

应用层： 域名解析

• 看域名是否被解析，通过 DNS 协议将域名解析成 IP 地址（过程基于 UDP）
  • URL 找到先找浏览器缓存，没有找本机缓存，没有找 HOST，在没有找 DNS 域名服务找到，中间可能经过路由缓存
  • HTTP 生成请求报文 请求行 空行 请求主体

传输层

• 请求如果是 HTTPS 的话需要进行 TLS 协商
• 建立 TCP 通信连接，进行三次握手
• 利用 TCP 传输数据包（可靠、有序），服务器按照顺序来收
• 默认不会断开 keep-alive 复用上次链接

其他层

• 网络层：路由转发找到对应服务器 物理 MAC 地址
• 物理链路层：通过物理设备

服务器

• 服务器收到数据
  • 负载均衡 HTTP 复用
• HTTP 响应报文
• 缓存设置

渲染进程

• GUI 渲染线程

  • HTML 解析成 DOM Tree， CSS 解析成 CSSOM，合成 RenderTree，计算布局 render,然后绘制渲染

• JS 引擎解析线程

  • EventLoop 作用域链 变量提升 回收机制 垃圾回收 作用域链 原型链

OSI 七层模型

理想化模型，给我们网络划分层次，复杂内容简单化，专人干专事 下一层为上一层做服务的

应用层：接口 【报文】 表式：数据进行描述、压缩 会话：建立管理会话 传输层：UDP TCP 协议给对方传过去数据，丢了重传【数据端-增加端口】 网络层：寻址找到对方【数据包-增加 ip】 数据链路层：讲两个设备进行连接，中转【数据帧-增加 mac 地址】 物理层：怎么把数据传输过去 用 0、1 表示

每一层的数据格式是

• 报文：应用层 + 数据
• 数据段：传输层 + 数据 + 端口
• 数据包：网络层 + 数据 + 端口 + ip
• 数据帧：数据链路鞥 + 数据 + 端口 + ip + mac 地址

ip 地址 + mac 地址

目的 ip 地址 找到 mac 地址

• ip 地址不是固定的

// ipV4
255.255.255.255 = 255 * 255 *  255 * 255 = 42 亿个

// ipv6
4444.4444.4444.4444.4444.4444.4444.4444

• mac 每个网卡自动的 mac 地址，原则上不变

每个层的设备有哪些

物理层设备

• 光线、电缆 网线有大传输距离 100，需要放大器，解决距离

链路层

• 交换机，有 mac 地址映射表

网络层

• 路由器（网关）wan lan
• 不具备 wan 就是交换机
• 与交换机区别，就是可以上网

mac 地址在变化，ip 是不变的

每一层的协议

约定和规范, 网络层以上有协议

• 应用层：HTTP DNS DHCP
• 传输层：TCP UDP
• 网络层：IP ARP

ARP

ip 转化为 mac, 最终通过 mac 转化传输，做一个广播

DHCP

动态主机配置协议，基于 UDP 自动分配 IP， 无需手动配置