是什么

描述的是请求发出到页面展示所经历的过程

简单过程

• url解析
• dns查询
• tcp链接
• http请求
• 响应请求
• 页面渲染

详细过程

url解析

• 判断是否为合法url，如果是则进行url拆解，如果是域名则解析成ip，如果是ip则直接请求tcp链接

dns查询

• 根据域名进行dns查询（浏览器-操作系统-本地服务器-根服务器等）得到对应ip

tcp链接

• 通过3次握手协议，建立tcp链接

http请求

• 数据包组装，发送http请求
• 请求行、请求头、请求体

响应请求

• 状态行、响应头、响应正文

页面渲染

• 资源解析
  • 根据响应头的信息，做对应处理， 如重定向、存储cookie、解压gzip，缓存资源等
  • 根据content-type的值，对不同资源类型采用不同的解析方式
• 页面渲染
  • 解析html，构建dom树
  • 解析css，构建css树
  • 合并dom树和css树，生成render树
  • 布局render树，负责各元素尺寸、位置的计算
  • 绘制render树， 绘制页面像素信息
  • 浏览器将各层的信息发送给gpu，gpu将各层合成，显示在屏幕上

原理

FAQ