从输入URL到浏览器显示页面发生了什么

147 阅读2分钟

浏览器进程的相互调用

  • 用户输入url()浏览器进程
  • 浏览器进程 会准备一个渲染进程用于渲染页面
  • 网络进程加载资源,最终将加载的资源交给渲染进程来处里
  • 渲染完毕, ipc

网络 7层 物理层 数据层 网络层(ip) 传播层(tcp,udp) (会 表 应)http

  • 先去查找缓存 检测缓存是否过期,直接返回缓存中的内容
  • 看域名是否被解析过,DNS协议 将域名解析成ip地址(DNS基于UDP)
  • 请求是HTTP SSL协商
  • IP地址来寻址,排队等待,最多能发送6个http请求
  • tcp 创建连接 用于传输(三次握手)
  • 利用tcp 传输数据(拆分数据包 有序)可靠 有序 服务器会按照顺序接收
  • http 请求(请求行,请求头, 请求体)
  • 默认不会断开keep-alive 为了下次传输数据是,可以复用上次的创建的链接
  • 服务器收到数据后(响应行 响应头 响应体)
  • 服务器301,302重定向操作
  • 服务器304, 去查询浏览器的缓存并返回
  • 浏览器接受资源后怎么处理

http 发展历史

  • http 0.9 负责传输html最早的时候没有请求头和响应头
  • http 1.0 提供http的header 根据header的不同来处理不同的资源
  • http 1.1 默认开启了keep-alive 链接复用,管线花 服务器处理多个请求(对头阻塞)
  • http 2.0 用同一个tcp链接来发送数据 一个域名一个tcp(多路复用)头部压缩 服务器可以推送数据给客户端

渲染流程

  • 浏览器无法直接使用HTML,需要将HTML转化成DOM树(document)
  • 浏览器无法解析纯文本的css样式,需要对css进行解析成styleSheets,cssOM(document.styleSheets)
  • 计算出DOM树中每个节点的具体样式(Attachment)
  • 创建渲染(布局)树,将DOM树中可见节点,添加到布局树中。并计算节点渲染到页面的坐标位置(layout)
  • 通过布局树,进行分层(根据定位属性,透明属性,transform属性,clip属性等)生产图层树
  • 将不同图层进行检测,转交给合成线程处理,最终生产页面,并显示到浏览器上(Painting.Display)

1,DNS解析:将于明解析成ip地址 2,TCP连接:TCP三次握手 3,发送HTTP请求 4,服务起处理请求并返回THHP报文 5,浏览器解析渲染页面,构建dom树,样式树,渲染树,layout布局,padinting绘制

6,断开连接:TCP 四次挥手