浏览器运作过程

166 阅读3分钟

浏览器运作过程

用户在浏览器地址上输入url到显示页面的步骤

URL解析==》DNS查询==》TCP连接==》服务器处理请求==》接受响应==》渲染页面

  1. URL
  2. DNS域名解析(找到真实的IP)
  3. 请求服务器
  4. 服务器发给后台
  5. 后台返回数据(html,JS,CSS)给浏览器
  6. 浏览器拿到数据解析数据,建立相应的内部数据结构(如HTML的DOM)
  7. 载入解析到的资源文件,渲染页面

详细版

  1. 浏览器 ---- 用户输入URL
  2. 浏览器 ---- 查看缓存
  3. 浏览器 --- 无缓存 ----》 向服务器请求 ===》返回请求结果,缓存标识,存入缓存
  4. 浏览器 ===》 有缓存 ===》是否过期(exipres和Cache-control) ===》没有过期 ==》读取缓存 ==》返回缓存
  5. 浏览器 ===》 有缓存 ===》是否过期(exipres和Cache-control) ===》过期了 ==》携带着标识(if-Modified-Since和if-None-Match)向服务器请求==》是否有资源更新 ===》 (没有更新,则返回304使用缓存)有更新则重新返回资源和缓存标识,存入缓存 ===》页面加载成功。

第一步:URL解析

分为合法 和待搜索的关键词

根据你输入的内容进行自动完成字符编码等操作,使用HSTS强制客户端使用HTTPS访问页面

第二步:DNS查询

检查域名是否存在本地的Hots文件里,没有则向自己的DNS服务器发送查询请求

浏览器缓存==》操作系统缓存==》路由器缓存==》IP DNS缓存==》根域名服务器

第三步:TCP连接

TCP/IP分为四层,在发送数据时,每层都要对数据进行封装:

发送和接受步骤,发送端每通过一层增加首部,接受端每通过一层删除首部

  1. 打开网页,使用的是GET方法
  2. 发送端通过第一层(应用层):HTTP数据 :发送HTTP请求
  3. 发送端通过第二层(传输层):TCP首部:TCP三次握手,分割数据成报文段。传输报文
  4. 发送端通过第三层(网络层):IP首部
  5. 发送端通过第四层(链路层):以太网首部: 以太网协议,mac地址,ARP攻击。广播发出
  6. 来到接受端
  7. 接受端链路层:删除以太网首部
  8. 接受端网络层: 删除IP首部
  9. 接受端传输层: 删除TCP首部
  10. 接受端应用层: 得到HTTP数据

第四步:服务器处理请求

主进程监听===》创建子进程处理===》解析验证封装==》是否重定向(如果有则返回301重定向地址,重新发起请求)没有的话到下一步==》URL重写模块 ==》真实资源(是,则返回资源)不是则到下一步 ==》REST, URL ===》解析器===》代码层面===》返回响应

第五步:浏览器接受响应

查看Response header ,根据不同状态码做不同的事

根据响应资源里的MIME类型去解析响应内容

第六步:渲染页面

代码解析

script解析

1、阻塞后续

2、会先加载后面的css

HTML解析

1、解码

2、预解析

3、符号化

4、构建树

5、生成DOM树

style解析

1、匹配规则

2、css规则树

通过DOM树和css规则树,计算,级联生成渲染树