12-从URL到页面:探寻Web页面渲染的全过程

从URL到页面:探寻Web页面渲染的全过程

笔记+分享
在我们浏览网页时,从输入URL到最终页面呈现在浏览器上,这背后发生了一系列复杂的步骤。本文将详细介绍这个过程,包括TCP连接的建立与终止。

1. DNS解析

当你在浏览器中输入一个URL(例如www.example.com)并按下回车,第一步是DNS解析。浏览器将域名发送给DNS服务器,以获取对应的IP地址。这个过程如下:

  1. 浏览器检查本地缓存是否已有该域名的IP地址。
  2. 系统DNS缓存-路由器DNS缓存-网络运营商缓存
  3. 如果还没有,浏览器向DNS递归解析器发送请求。
  4. 递归解析器向根DNS服务器请求顶级域名服务器的位置(如.com服务器)。
  5. 递归解析器向顶级域名服务器请求权威DNS服务器的位置(存储example.com的服务器)。
  6. 递归解析器向权威DNS服务器请求example.com的IP地址。
  7. 权威DNS服务器返回IP地址给递归解析器,递归解析器再将IP地址返回给浏览器。

2. TCP连接的建立(三次握手)

得到IP地址后,浏览器与服务器建立TCP连接,确保数据可以可靠传输。建立过程如下:

  1. SYN:浏览器向服务器发送一个SYN(同步)包,请求建立连接。
    • 第一次握手,由浏览器发起,告诉服务器我要发送请求了
  2. SYN-ACK:服务器回应一个SYN-ACK(同步-确认)包,表示同意连接。
    • 第二次握手,由服务器发起,告诉浏览器我准备接受了,你赶紧发送吧。
  3. ACK:浏览器再发送一个ACK(确认)包,连接建立。
    • 第三次握手,由浏览器发送,告诉服务器,我马上就发了,准备接受吧

3. 发送HTTP请求

TCP连接建立后,浏览器向服务器发送一个HTTP请求。这通常是一个GET请求,要求服务器发送所请求的资源(如HTML文件)。

4. 服务器处理请求

服务器接收到HTTP请求后,处理请求并生成响应。服务器可能需要查询数据库、执行后台脚本或访问其他服务,然后将响应数据(如HTML、CSS、JavaScript、图像等)发送回浏览器。

5. 浏览器接收响应并开始处理

浏览器接收到服务器的HTTP响应后,开始解析响应内容:

  1. 解析HTML:浏览器解析HTML内容,构建DOM(Document Object Model)树。
  2. 请求资源:在解析HTML时,遇到外部资源(如CSS、JavaScript文件、图像等)的引用,浏览器会并行地发起请求获取这些资源。
  3. 解析CSS:获取到CSS文件后,浏览器解析CSS,生成CSSOM(CSS Object Model)树。
  4. 执行JavaScript:浏览器解析并执行JavaScript代码,JavaScript可能会修改DOM树或CSSOM树。

6. 页面布局和绘制

  1. 生成渲染树:浏览器将DOM树和CSSOM树结合生成渲染树。
  2. 布局(Layout):浏览器计算每个节点的几何信息(位置和大小)。
  3. 绘制(Paint):浏览器将渲染树的各个节点绘制到屏幕上。

7. TCP连接的终止(四次挥手)

当所有数据传输完成后,需要终止TCP连接,以释放资源。过程如下:

  1. 第一次挥手(FIN):主动关闭方(如浏览器)发送一个FIN(Finish)包,表示数据发送完毕。
    • 由浏览器发送的,发送给服务器,我东西发送完了(请求报文),你准备关闭吧
  2. 第二次挥手(ACK):被动关闭方(如服务器)收到FIN包后,发送一个ACK包确认。
    • 由服务器发起的,告诉浏览器,我东西接受完了(请求报文),我准备关闭了,你也准备吧
  3. 第三次挥手(FIN):被动关闭方发送一个FIN包,表示数据发送完毕。
    • 由服务器发起,告诉浏览器,我东西发完了(响应报文),你准备关闭吧
  4. 第四次挥手(ACK):主动关闭方收到FIN包后,发送一个ACK包确认,并等待一定时间(通常是2倍的MSL,最大报文段生存时间)后关闭连接。
    • 由浏览器发起,告诉服务器,我东西接受完了,我准备关闭了(响应报文),你也准备吧

浏览器的优化与缓存

现代浏览器和服务器会进行各种优化,以提高页面加载速度和用户体验:

  • 文件压缩:使用Gzip等方法压缩文件传输。
  • 缓存:利用浏览器缓存、HTTP缓存或Service Worker缓存,减少重复请求。
  • CDN(内容分发网络):通过CDN分布式地存储和传输资源,缩短请求时间。

结论

从输入URL到页面完全渲染,背后涉及的步骤非常多,包括DNS解析、TCP连接的建立与终止、HTTP请求与响应处理、DOM和CSSOM树的构建、JavaScript的执行以及页面的布局和绘制。了解这些步骤,有助于我们更好地优化网页性能,提高用户体验。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/21995.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

工业自动化喷涂生产线设计方案

利用机械臂代替人工进行喷涂工艺生产线的设计实现方案可以减少人工成本,同时提高整厂自动化程度,提高生产效率,改善工人办公环境,本文简单介绍如何利用机械臂代替人工进行自动化喷涂生产线设计。 整体布置包括利用三台埃夫特机械臂…

Github 2024-06-04 Python开源项目日报 Top10

根据Github Trendings的统计,今日(2024-06-04统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目10Shell项目1TypeScript项目1yt-dlp: 一个增强版的youtube-dl分支 创建周期:1184 天开发语言:Python协议类型:The UnlicenseStar数…

数据结构——哈希表、哈希桶

哈希概念 顺序结构以及平衡树中,元素关键码与其存储位置之间没有对应的关系,因此在查找一个元素时,必须要经过关键码的多次比较,顺序查找时间复杂度为O(N),平衡树中为树的高度,即O(logN),搜索的效率取决于搜索过程种元素的比较次…

ElasticSearch学习笔记之一:介绍及EFK部署

1. 系统概述 The Elastic Stack,包括Elasticsearch、Kibana、Beats和Logstash(也成为ELK Stack) Elasticsearch:简称ES,是一个开源的高扩展的分布式全文搜索引擎,是整个Elastic Stack技术栈的核心。它可以…

docker安装redis以及持久化

为了避免当虚拟机关机后redis数据丢失的情况,redis需要持久化。所以要挂载数据卷 创建数据和配置存放的目录 [root192 data]# pwd /root/data [root192 data]# mkdir -p /root/data/redis/conf && chmod 777 /root/data/redis/conf [root192 data]# mkdir …

Ant Design Vue 动态表头并填充数据

在使用 Ant Design Vue 动态生成表头并填充数据时,你需要以下几个关键步骤: 1. **安装 Ant Design Vue**: 确保你已经安装并配置了 Ant Design Vue。 bash npm install ant-design-vue 2. **引入 Ant Design Vue 组件**&#xff…

怎么找抖音视频素材?下载抖音的素材视频网站分享给你

在这个视觉印象至关重要的时代,选用高质量的视频素材对于制作抖音视频来说是关键。如果你正在寻找适合的视频素材来丰富你的抖音创作,以下这份详细的视频素材网站指南将帮助你迈出第一步。 蛙学府网 蛙学府网提供了丰富多样的视频素材,包括动…

香橙派Orange AI Pro / 华为昇腾310芯片 部署自己训练的yolov8模型进行中国象棋识别

香橙派Orange AI Pro / 华为昇腾310芯片 部署自己训练的yolov8模型进行中国象棋识别 一、香橙派简介1.1、香橙派 AI Pro 硬件资源介绍1.2、华为昇腾310(Ascend310) 简介1.3、 昇腾310AI能力和CANN 简介昇腾310 NPU简介 二、远程环境配置2.1、ssh2.2、vnc…

深入理解 Python3 函数:从基础语法到高级应用

Python3 函数是构建模块化代码的基本单位,允许我们将代码组织成独立的、可重用的块。本文将详细介绍 Python3 函数的基本语法、常用命令、示例、应用场景、注意事项,并进行总结。 基本语法 在 Python 中,函数的定义使用 def 关键字&#xf…

VScode中Markdown图片尺寸大小调整

自存用&#xff0c;不保证适用于所有人 默认情况 ![图片描述](2024-06-03-11-57-36.png)图片居中且改变尺寸 <div aligncenter><img src"2024-06-02-15-09-50.png" width"400"></div>"2024-06-02-15-09-50.png"是图片链接&…

HTML5 Canvas 绘图教程二

在本教程中&#xff0c;我们将探讨 canvas 的高级用法&#xff0c;包括复杂的绘图 API、坐标系统和变换操作、平滑动画技术以及复杂应用和游戏开发的实践。 1. 绘图 API 高级方法 1.1 二次贝塞尔曲线 (quadraticCurveTo) 二次贝塞尔曲线需要两个点&#xff1a;一个控制点和一…

沈阳 2024年 融资融券怎么开通,利率多少?

融资融券是什么&#xff0c;为什么能赚钱&#xff0c;怎么赚更多&#xff0c;怎么少付利息 100个4.2% 如果你发现了好股票、好机会&#xff0c;但目前券商的融资利率较高&#xff0c;可以考虑转户并选择低利率的券商&#xff0c; 同时需要注意开通条件和转户产生的成本费用。…

新书推荐:1.3 内存管理模式

本节必须掌握的知识点&#xff1a; 4GB虚拟空间 虚拟内存 多任务切换 1.3.1 4GB虚拟空间 ■Win16操作系统 Windows1.0版本为16位操作系统&#xff0c;支持16位处理器实模式&#xff0c;最大寻址空间为1MB。Win16操作系统的内存管理非常简单&#xff0c;采用分段内存管理模式…

I.MX RT1170之MIPI DSI初始化和显示流程详解

MIPI DSI&#xff08;Mobile Industry Processor Interface Display Serial Interface&#xff09;是一种广泛应用于移动设备显示屏的接口标准。由MIPI联盟制定&#xff0c;DSI接口旨在提供高效、低功耗的显示屏数据传输解决方案。 本节来就通过学习I.MX RT1170单片机中的MIPI…

【Linux】Linux项目自动化构建工具——make/Makefile

1.背景 会不会写makefile&#xff0c;从一个侧面说明了一个人是否具备完成大型工程的能力一个工程中的源文件不计数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;makefile定义了一系列的 规则来指定&#xff0c;哪些文件需要先编译&#xff0c;哪些文件需…

Java集合思维导图

详细内容请看链接内容 Java集合面试题集——2024最新大厂面试

用于对话场景的文本转语音-chattts

网址 https://chattts.com/zh 多语言支持 ChatTTS 的一个关键特性是支持多种语言&#xff0c;包括英语和中文。这使其能够为广泛用户群提供服务&#xff0c;并克服语言障碍 大规模数据训练 ChatTTS 使用了大量数据进行训练&#xff0c;大约有1000万小时的中文和英文数据。这…

【图像识别系统】表情识别Python+人工智能深度学习+TensorFlow+卷积算法网络模型+图像识别

表情识别系统&#xff0c;本系统使用Python作为主要编程语言&#xff0c;通过TensorFlow搭建ResNet50卷积神经算法网络模型&#xff0c;通过对7种表情图片数据集&#xff08;‘Neutral’, ‘Anger’, ‘Disgust’, ‘Fear’, ‘Happy’, ‘Sad’, ‘Surprise’&#xff09;进行…

OpenGL系列(三)VBO、VAO

在OpenGL系列&#xff08;一&#xff09;三角形 用到了VBO和VAO&#xff0c;本文对两者进行介绍。 通过OpenGL的API绘制图形时&#xff0c;需要先定义顶点&#xff0c;如示例中三角形的顶点数组定义如下。 float vertices[] {// 位置信息 // 颜色信息0.5f, -0.5f, 0.…

前端 html格式转md格式插件使用介绍

1.html-to-markdown npm install html-to-markdown 不支持vue32.Marked npm install marked 不支持table转换 官网 https://marked.js.org/3.html-to-md npm i html-to-md import html2md from html-to-md console.log(html2md(<strong><em>strong and italic…