浏览器的工作原理

从输入一个url到页面加载完成,中间都发生了什么?
参考原文地址

首先在浏览器地址栏输入一个地址并回车之后,

1. DNS查找

浏览器会进行DNS查找,把域名https://example.com转化为真实的IP地址10.29.33.xx,根据IP地址找到提供网站内容的服务器。

2. TCP握手、建立连接

找到服务器之后,浏览器会通过TCP握手机制跟浏览器建立连接,如图:
请添加图片描述

而现在大部分服务器传输都是基于HTTPS协议的,那么就会多一步TLS握手,建立加密的隧道,保证数据传输不被监听和篡改,如图:
请添加图片描述

3. 发起请求、接收响应

建立好浏览器和服务器之间的连接后,浏览器会发起HTTP或者HTTPS请求,来获取服务器响应,一般对于网站来说,响应就是服务器返回的HTML网页代码。这里在接收响应时,有一个slow start机制(受制于TCP连接,浏览器会先收到前14KB的数据),后续才会慢慢增加传输速率,下载其他文件。
所以,对服务器来说,能在这24KB数据里完整展示页面就非常重要。
请添加图片描述

4. 渲染页面

在收到html代码之后,浏览器开始渲染页面,这个过程分为5步:

(1)构建DOM树

解析html并构建DOM树,(DOM树是html文档在浏览器中的对象表示,可以使用js来操作DOM树)在这里插入图片描述
浏览器在解析html的时候是顺序执行的,并且只有一个主线程负责解析,当解析到script标签时,浏览器会加载javascript文件并执行其中的代码,此时主线程暂停解析html文档,等javascript文件中代码执行完后,对html文档的解析才会继续。

对于图片img或者CSS文件,或者设置了defer\async的javascript标签,不会影响主线程的解析,而是会创建线程,异步加载,(其中,对于defer属性的javascript标签,加载完后要等DOM树构建完成之后才会被执行)。
请添加图片描述

(2) 构建CSSOM树

CSSOM是CSS文件在浏览器中的对象表示,也是树状结构。如图:请添加图片描述

(3)合并DOM和CSSOM

浏览器会从DOM的跟节点开始,合并CSSOM中的样式到DOM树中的每个节点,形成一颗渲染树请添加图片描述

(4)布局

生成渲染树之后,浏览器会根据生成的样式,计算每个可见节点,也就是没有设置display:none; 的节点,对除display:none; 以外的节点计算他们的宽高和位置等,对所有的节点进行布局规划。请添加图片描述

对于像图片这样的节点,如果没有指定宽高,浏览器会先忽略他的大小,在图片加载完成后,浏览器会根据图片的宽高和位置,再次对受影响的其他节点的宽高位置进行计算,这个过程就叫做回流(reflow)。请添加图片描述

(5)重绘

在第一次布局完成之后,浏览器会真正地把节点和节点样式,例如背景、阴影、边框等绘制到屏幕上,这个过程要求必须要快,否则会影响动画和交互性能。如果之前布局发生了回流(也就是加载了图片),浏览器会发生重绘,把变化的布局重新绘制,
第一次绘制:第一次绘制
重绘: 请添加图片描述

绘制期间可能会有组合发生,因为在渲染节点时可能会产生新的图层,例如:video标签或者设置了opacity等属性的节点,浏览器需要把这些图层组合起来,按正确的堆叠顺序渲染。请添加图片描述

以上过程包含的知识点:

1. 前后端交互- HTTP协议

HTTP协议包含客户端和服务端2个实体,客户端发送请求给服务端,服务端返回响应给客户端。
在HTTP中,数据称为资源,可以是html文档、图片、也可以是普通文本。
资源是通过URL进行定位的,URL结构如下:
请添加图片描述
HTTP请求内容:
请添加图片描述
GET是默认请求方式,意思是从服务端获取资源,常用还有:
POST请求,创建资源
PUT请求,更新资源,
DELETE请求,删除资源
区别是:GET和DELETE通常没有请求体,POST和PUT通常带有请求体,

请求头:包含额外信息来帮助服务器决定如何响应,比如:使用Accept设置接收响应的类型。
服务器端在处理好请求后发送响应给客户端,
请添加图片描述
响应状态码取值及对应表示:请添加图片描述
响应头与请求头类似,包含额外的响应信息,比如:告知客户端如何控制缓存和cookie。
响应体是服务端返回的数据。

HTTP请求是无状态的:每次客户端发送的请求都被认为是从一台新的客户端发送过来的,如果需要记录状态,应该使用cookie和session来记录会话(实现登录和购物车之类的功能)

HTTP/2

区别于HTTP/1.1,数据通过二进制形式进行传输,不再是文本形式;多路复用,建立连接后可以一次发送多个HTTP请求;压缩HTTP headers,减少负载;支持Server Push

HTTPS

在标准HTTP中,客户端和服务端交互的信息都是通过公共互联网进行传输的,由于传输的内容是明文所以当传输一些敏感信息时很容易被监听盗取,为了加强安全性,HTTPS(更安全的超文本传输协议)诞生。
HTTPS会加密传输的数据,他通过两个协议来保障数据安全,一个是SSL,一个是TSL,(原理基本都是通过服务器端对客户端进行身份验证,然后对数据加密什么的)。

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

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

相关文章

linux驱动——中断

1.Cortex-A系列的中断的简介 中断的基本概念:(interrupt) 中断本质上是系统内部的异常机制,当中断产生之后,他会停下当前正在执行的任务,转而去做其他的事情,在停下当前正在执行的任务之前,要先入栈(保护现场,其他的事情做完之后…

Mysql/Redis缓存一致性

如何保证MySQL和Redis的缓存一致。从理论到实战。总结6种来感受一下。 理论知识 不好的方案 1.先写MySQL,再写Redis 图解说明: 这是一幅时序图,描述请求的先后调用顺序; 黄色的线是请求A,黑色的线是请求B; 黄色的…

TYPE C模拟耳机POP音产生缘由

关于耳机插拔的POP音问题,小白在之前的文章中讲述过关于3.5mm耳机的POP音产生原因。其实这类插拔问题的POP音不仅仅存在于3.5mm耳机,就连现在主流的Type C模拟耳机的插拔也存在此问题,今天小白就来讲一讲这类耳机产生POP音的缘由。 耳机左右…

两个笔记本如何将一个笔记本作为另一个笔记本的拓展屏

需求是有两个笔记本,一个笔记本闲置,另一个笔记本是主力本。想将另一个闲置的笔记本连接到主力本上作为拓展屏使用。网上搜了好久,有一些人提到了,也有一些视频但是文章比较少。简单总结一下吧 上述需求有两种方式 第一种&#x…

浅谈Redis 的 保护模式(protected-mode)

今天在一台服务器上面部署了redis,发现始终无法用工具远程连接,项目里面是正常的,就是工具不行,防火墙也关闭了.折腾了一会才突然想起来,是不是触发了保护模式. 什么时候触发保护模式protected-mode: 同时满足以下两个: 1.bind未指定ip 2.未配置密码 解决方案: 编辑redis…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的交通标志识别系统详解(深度学习模型+UI界面代码+训练数据集)

摘要:本篇博客详细介绍了利用深度学习构建交通标志识别系统的过程,并提供了完整的实现代码。该系统采用了先进的YOLOv8算法,并与YOLOv7、YOLOv6、YOLOv5等早期版本进行了性能评估对比,分析了性能指标如mAP、F1 Score等。文章深入探…

计算机组成原理实验报告1 | 实验1.1 运算器实验(键盘方式)

本文整理自博主大学本科《计算机组成原理》课程自己完成的实验报告。 —— *实验环境为学校机房实验箱。 目录 一、实验目的 二、实验内容 三、实验步骤及实验结果 Ⅰ、单片机键盘操作方式实验 1、实验连线(键盘实验) 2、实验过程 四、实验结果的…

代码随想录-java-栈与队列总结

栈(Stack):是只允许在一端进行插入或删除的线性表。栈是一种线性表,限定这种线性表只能在某一端进行插入和删除操作。进行操作的这一端称为栈顶。 队列(Queue)是只允许在一端进行插入操作,而在另…

Python使用FastAPI提供图片缩略图生成接口

使用pillow的thumbnail生成缩略图时,会保持原图的宽高比;使用的opencv的resize则不会 具体代码如下: #!/usr/bin/env python import re import sys from enum import Enum from io import BytesIO from pathlib import Path from typing im…

汇编课设——秒表2

1. 设计要求 基于 51 开发板,利用键盘作为按键输入,将数码管作为显示输出,实现电子秒表。 功能要求: (1)计时精度达到百分之一秒; (2)能按键记录下5次时间并通过按键回看 (3)设置时间,实现倒计时,时间到,数码管闪烁 10 次,并激发蜂鸣器,可通过按键解除。 2. 设计思…

思科网络中如何进行动态NAT配置

一、什么是动态NAT?动态NAT与静态NAT的区别是什么? (1)动态NAT(Network Address Translation)是一种网络地址转换技术,它会动态地将内部私有网络中的局域网IP地址映射为公共IP地址,…

Hack The Box-Codify

目录 信息收集 rustscan nmap dirsearch WEB 提权 get user get root 信息收集 rustscan ┌──(root㉿ru)-[~/kali/hackthebox] └─# rustscan -b 2250 10.10.11.239 --range0-65535 --ulimit4500 -- -A -sC .----. .-. .-. .----..---. .----. .---. .--. .-. …

JVM 类的加载篇

我们都知道一个类从加载到卸载一共分为七个过程 加载 - 链接(验证 - 准备 - 解析) - 初始化 - 使用 - 卸载 下文我们将详细解析这些过程 谁需要加载? 在Java中数据类型分为基本数据类型和引用数据类型,基本数据类型由虚拟机预定义,引用数据类型则需要类的加载 1.加载/装载(loa…

Docker入门二(应用部署、迁移与备份)

文章目录 一、应用部署1.MySQL部署2.Redis部署3.Nginx部署 二、迁移与备份1.容器做成镜像2.把镜像被分成压缩包 一、应用部署 1.MySQL部署 在dokcer中部署mysql,以后不需要在宿主机上装mysql1.做端口映射docker run -id --namemysql5.7 -p 3306:3306 -e MYSQL_ROOT…

网工内推 | 国企、上市公司网工、运维,CCNA即可,补贴福利多

01 深圳新思 招聘岗位:网络工程师(中电集团) 职责描述: 1:负责办公室电脑的桌面运维,主要是windows维护与应用维护; 2:负责办公室网络设备配置,如防火墙,交换…

CMake 编译 raylib 程序

CMakeLists.txt 内容如下: cmake_minimum_required(VERSION 3.0) project(t001) # 搜索指定目录下源文件 file(GLOB SRC_LIST ${CMAKE_CURRENT_SOURCE_DIR}/*.cpp) # 包含头文件路径 include_directories(F:/vclib/raylib-5.0_win64_mingw-w64/include) # 包含静态…

CountDownLatch介绍和使用

1. CountDownLatch是什么 CountDownLatch 是 Java.util.concurrent 包中的一个同步工具类,用于控制线程的执行顺序。它的主要作用是让一个或多个线程等待其他线程完成操作后再继续执行。 2. CountDownLatch 类常用方法 CountDownLatch(int count) 是 CountDownLa…

软件测试基础概念

一、需求 定义:满足用户期望或正式规定文档所需条件和技能,包含用户需求 用户需求:用户使用产品所必须完成的任务 该需求比较简略 软件需求:详细描述开发人员必须实现的软件功能 需求是标准,测试人员按照这个标准测…

全球首个 AI 超级工程师:拥有全栈技能,一个指令就能完成整个开发过程

全球首位AI软件工程师Devin是由初创公司Cognition推出的,它被认为是世界上第一个完全自主的AI软件工程师[2][15]。Devin具备强大的编程和软件开发能力,能够在多个方面协助或完全独立地完成软件开发任务[15]。它的核心能力包括自学新语言、开发迭代App、自…

C语言分析基础排序算法——归并排序

目录 归并排序 递归版本 非递归版本 非递归版本的问题 归并排序小优化 归并排序 归并排序,分为分治以及合并,分治部分可以使用递归或者非递归完成,归并排序的基本思路是:将已有序的子序列合并,得到完全有序的序列…