当前位置: 首页 > news >正文

从输入URL到渲染页面的整个过程(浏览器访问URL的完整流程)

1.解析URL、查询DNS

浏览器通过输入的url提取协议、域名、端口号等信息,检查本地缓存(包括浏览器缓存、操作系统缓存、路由器缓存)是否有对应的ip地址;

如果没有,则对本地DNS服务地进行递归查询,直到获取到目标IP地址

2.建立TCP连接(进行3次握手)

使用TCP协议与目标服务器建立连接,进行3次握手

  1. 客户端发送SYN
  2. 服务器回复SYN-ACK
  3. 客户端发送ACK,完成连接

如果是HTTPS协议,还要进行TLS握手,建立安全加密通道

3.发送HTTP请求

浏览器组装HTTP请求报文(包括请求行、请求头、请求体)

通过TCP连接,向服务器发送请求

4.服务器返回响应

服务器接受并处理请求,返回HTTP响应

5.浏览器解析并渲染页面

  1. 浏览器对HTML进行解析并构建DOM树、对CSS解析并构建CSSOM(css-object-modal)树
  2. 合并DOM树、CSSOM树生成Render-Tree(渲染树)
  3. layout布局:对render-tree的每一个节点确定精确位置与尺寸
  4. 绘制页面:将render-tree的节点绘制\光栅化到页面上,合并所有图层并显示
  5. 浏览器遇到<script>时,下载并执行js;
    1. 通过js操作,修改DOM或样式,会触发浏览器的重绘和重排;

6.断开连接,进行4次TCP挥手

  1. 客户端发送FIN
  2. 服务器回复ACK
  3. 服务器发送FIN
  4. 客户端回复ACK

断开请求连接2次,断开响应连接2次;

7.性能优化:

  1. 内联关键CSS
  2. 图片懒加载
  3. 减少重绘和重排(使用transform\opcity避免重排)
  4. 静态资源使用CDN加速资源加载
  5. 使用缓存策略(Cache-Control/ETag)、压缩资源(Gzip/Brotli)
  6. 使用HTTP/2或者HTTP/3

相关文章:

  • wordpress后台更新后 前端没变化的解决方法
  • golang -- unsafe 包
  • C++ Programming Language —— 第1章:核心语法
  • C++ 中的尾调用优化TCO:原理、实战与汇编分析
  • Android 中使用 OkHttp 创建多个 Client
  • 【Dv3Admin】系统视图角色菜单按钮权限API文件解析
  • 【Qt】Qt生成的exe依赖库与打包
  • 206. 2013年蓝桥杯省赛 - 打印十字图(困难)- 模拟
  • React Native 基础语法与核心组件:深入指南
  • 后进先出(LIFO)详解
  • 深入解析 sock_skb_cb_check_size 宏及其内核安全机制
  • Spring Boot + Vue 前后端分离项目解决跨域问题详解
  • 一套键鼠控制多台电脑
  • u盘插入电脑后显示无媒体,无盘符,无空间,无卷的修复办法
  • 在写外部FLASH的应用时发现一些问题,在这里分享一下我的想法
  • 【Dv3Admin】系统视图角色管理API文件解析
  • 在Word中使用 Microsoft Print to PDF和另存为PDF两种方式生成的 PDF文件
  • Docker 操作容器[SpringBoot之Docker实战系列] - 第538篇
  • bilibili-mcp 使用示例
  • JBank:Jucoin 推出的 Web3 去中心化自托管银行金融协议
  • 做网站一条龙/国内军事新闻最新消息
  • 网站佣金怎么做会计分录/全球网站排名前100
  • 江西城乡建设网站/重庆百度竞价开户
  • 怎样看一个网站是哪个公司做的/郑州seo学校
  • 六安网络推广/优化一下
  • 网站建设怎么报印花税/网站及搜索引擎优化建议