【前端】浏览器输入url到页面呈现发生了什么？

news2024/12/28 18:41:14

前言

在此总结记录下浏览器输入url到页面呈现期间的流程。

浏览器输入url发生了什么？

从浏览器地址栏上输入url到页面渲染主要分为以下流程：

  • 解析请求url，建立连接
  • 发送请求
  • 浏览器渲染页面

在输入url地址后，浏览器识别输入的是url后会根据url的http类型请求这个url，首先进行缓存查找，若没有则会使用DNS进行域名解析，然后根据IP地址找到服务器，建立TCP链接,然后发送请求，服务器接收请求处理后将返回资源。
浏览器拿到服务器反的html资源后会进行解析渲染，包括html所需的css资源和js资源等也进行解析和处理，进行合并就算、布局、合成，以及渲染等步骤呈现页面内容。

解析请求url

URL（统一资源定位符）是因特网中的唯一资源的地址。它是浏览器用于检索已发布资源（例如 HTML 页面、CSS 文档、图像等）的关键机制之一。

url通常包含url协议、域名（IP）、端口、路径、路径参数和锚点。

如果 url中使用的是域名，则会DNS解析（基于UDP）查找到IP地址。浏览器向域名服务器发起 DNS 查询请求，最终得到一个 IP 地址。第一次请求之后，这个 IP 地址可能会被缓存一段时间，这样可以通过从缓存里面检索 IP 地址而不是再通过域名服务器进行查询来加速后续的请求。

然后根据IP地址找到服务器，创建TCP链接。
创建TCP链接总共经历三次握手：

  1. 浏览器发送一个带SYN标记的tcp包给服务器，表示请求建立连接。
  2. 服务器同意后会发送一个带SYN-ACK的确认包给浏览器，表示同意建立连接。
  3. 浏览器收到SYN-ACK确认包后，再向服务器发送一个确认包（ACK),表示连接已经建立。

TCP 的“三次握手”技术经常被称为“SYN-SYN-ACK”——更确切的说是 SYN、SYN-ACK、ACK——因为通过 TCP 首先发送了三个消息进行协商，然后在两台电脑之间开始一个 TCP 会话。是的，这意味着当请求尚未发出的时候，终端与每台服务器之间还要来回多发送三条消息。

对于通过 HTTPS 建立的安全连接，还需要进行TLS协商。协商决定使用哪种密码对通信进行加密，验证服务器，并在开始实际数据传输前建立安全连接。这就需要在实际发送内容请求之前，再往返服务器五次。

在这里插入图片描述
虽然建立安全连接的步骤增加了等待加载页面的时间，但是为了建立一个安全的连接而增加延迟是值得的，因为在浏览器和 web 服务器之间传输的数据不可以被第三方解密。
如此经过 8 次往返，浏览器终于可以发出请求。

发送请求

一旦我们建立了和 web 服务器的连接，浏览器就会代表用户发送一个初始的 HTTP GET 请求，对于网站来说，这个请求通常是一个 HTML 文件。一旦服务器收到请求，它将使用相关的响应头和 HTML 的内容进行回复。

超文本传输协议（HTTP）是一个用于传输超媒体文档（例如 HTML）的应用层协议。它是为 Web 浏览器与 Web 服务器之间的通信而设计的，但也可以用于其他目的。HTTP 遵循经典的客户端—服务端模型，客户端打开一个连接以发出请求，然后等待直到收到服务器端响应。HTTP 是无状态协议，这意味着服务器不会在两个请求之间保留任何数据（状态）。

如果http响应状态码以3开头表示重定向，则会使用响应头的location的值进行再次请求。

浏览器渲染页面

浏览器拿到数据后，就立马进行解析。

HTML 和CSS

在这里插入图片描述

  1. 浏览器解析HTML，得到DOM树。（document）

  2. 浏览器解析CSS,得到CSSOM对象。（document.styleSeets）

  3. DOM和CSSOM进行合并计算出每个节点的具体样式，得到渲染树。（Attachment）

  4. 布局步骤，在渲染树上运行布局以计算每个节点的几何体。布局是确定呈现树中所有节点的尺寸和位置，以及确定页面上每个对象的大小和位置的过程。

    重排是后续过程中对页面的任意部分或整个文档的大小和位置的重新计算。

  5. 通过布局树，进行分层步骤（定位、透明属性、transform属性、clip等）生成图层树。

  6. 将不同图层栅格化进行绘制，转交给合成线程处理，最后呈现页面内容。此时

    重绘会触发重新绘制和重新合成。

回流（Reflow）： 当页面布局和几何属性发生变化，导致部分或全部元素的尺寸、位置、结构发生改变时，浏览器需要重新计算元素的几何属性和页面的布局，这个过程被称为回流。

在第一步解析DOM时，当解析器发现非阻塞资源，例如一张图片，浏览器会请求这些资源并且继续解析。当遇到一个 CSS 文件时，解析也可以继续进行，但是对于 <script> 标签（特别是没有 async 或者 defer 属性的）会阻塞渲染并停止 HTML 的解析。

在解析 CSS 和创建 CSSOM 的同时，包括 JavaScript 文件在内的其他资源也在下载（这要归功于预加载扫描器）。JavaScript 会被解析、编译和解释。脚本被解析为抽象语法树。有些浏览器引擎会将抽象语法树输入编译器，输出字节码。这就是所谓的 JavaScript 编译。大部分代码都是在主线程上解释的,但也有例外，例如在 web worker 中的代码将会在独立线程运行。

在合成渲染树阶段，不会被显示的元素，如 <head> 元素及其子元素，以及任何带有 display: none 的节点，如用户代理样式表中的 script { display: none; }，都不会包含在渲染树中，因为它们不会出现在渲染输出中。应用了 visibility: hidden 的节点会包含在渲染树中，因为它们会占用空间。

JavaScript

在解析到js时，会进行并行下载js文件,停止渲染，下载完成后使用v8串行执行js文件。

js的执行过程一定是会阻塞Dom Tree和Css OM的。有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
在这里插入图片描述
v8执行js代码流程：

  1. 通过词法分析和语法分析生成抽象语法树（AST），有了 AST 后，那接下来 V8 就会生成该段代码的执行上下文。
  2. 解释器 Ignition生成字节码。
  3. 字节码通过即时编译（JIT）技术生成机器码执行，

即时编译（JIT，就是指解释器 Ignition 在解释执行字节码的同时，收集代码信息，当它发现某一部分代码变热了（经常使用）之后，TurboFan 编译器便闪亮登场，把热点的字节码转换为机器码，并把转换后的机器码保存起来，以备下次使用。

JavaScript 是一种基于原型、多范式、单线程的动态语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
js在执行I/O操作时为了不阻塞主线程，采用一种事件循环的异步编程机制。

其他

HTTP请求类型

HTTP0.9 - 请求由单行指令构成，以唯一可用方法 GET 开头，其后跟目标资源的路径（一旦连接到服务器，协议、服务器、端口号这些都不是必须的）。

HTTP1.0 - 开始有请求头概念，默认模型是短连接。

HTTP1.1- 默认是长连接，即开启了keep-alive链路复用；增加管线化技术，允许在第一个应答被完全发送之前就发送第二个请求，以降低通信延迟；以及支持响应分块、支持缓存控制机制等。

HTTP/2 - HTTP/2 是二进制协议而不是文本协议。这是一个多路复用协议(一个域名一个TCP连接)，解决了HTTP的队头阻塞问题。并行的请求能在同一个链接中处理，移除了 HTTP/1.x 中顺序和阻塞的约束。压缩了标头。因为标头在一系列请求中常常是相似的，其移除了重复和传输重复数据的成本。其允许服务器在客户端缓存中填充数据，通过一个叫服务器推送的机制来提前请求。

HTTP/3 - HTTP/3 有着与 HTTP 早期版本的相同语义，但在传输层部分使用 QUIC 而不是 TCP。QUIC 旨在为 HTTP 连接设计更低的延迟。类似于 HTTP/2，它是一个多路复用协议，通过 UDP 运行多个流，并为每个流独立实现数据包丢失检测和重传，因此如果发生错误，只有该数据包中包含数据的流才会被阻止。

浏览器的多进程模型

浏览器的多进程模型提高了浏览器的稳定性和安全性，缺点是内存消耗高。

进程是操作系统资源分配的基本单位 ，进程中包含线程。
在这里插入图片描述

  • 浏览器进程：负责界面显示、用户交互、子进程管理、提供存储等。
  • 渲染进程：每个窗口都会有一个渲染进程，用于显示页面。它包括GUI线程（渲染页面）、js线程（v8引擎）、定时触发器线程（定时器计数）、事件触发线程、异步http请求线程。
  • 网络进程： 处理网络资源加载（html、css、js等）。
  • GPU进程：负责处理整个应用程序的GPU任务。
  • 插件进程：浏览器的插件使用。

事件循环

事件循环由浏览器内部的"任务队列"管理，主要包括宏任务（Macro Task）和微任务（Micro Task）。

宏任务包括：

  • 整体的脚本（script）
  • setTimeout
  • setInterval
  • I/O操作
  • setImmediate（只在IE中有效）

微任务包括：

  • process.nextTick（Node.js中有效）
  • Promise
  • async/await
  • Object.observe（已废弃）
  • MutationObserver

事件循环流程 :

  1. 主线程执行第一个宏任务 。
  2. 遇到同步操作直接执行并弹出栈。
  3. 遇到异步操作时，交给宿主环境异步执行，执行成功后将回调函数推入任务队列。若执行的是宏任务则推入宏任务队列，否则推入微任务队列。
  4. 当调用栈执行完宏任务的所有代码，将微任务队列中的代码依次推入调用栈执行，直到微任务执行完毕被清空。
  5. 将下一个宏任务推入调用栈执行。
  6. 以上过程会不断重复，直到宏任务队列全部执行完毕。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

深入云电脑PC Farm技术探讨，以阿里云、华为云、ToDesk为例

深入云电脑PC Farm技术探讨，以阿里云、华为云、ToDesk为例

&#x1f31d;引言 近年来&#xff0c;云计算技术的飞速发展为各行各业的数字化转型带来了全新机遇&#xff0c;其中云电脑作为一种虚拟化桌面解决方案&#xff0c;逐渐成为个人用户与企业的核心选择。从远程办公、在线教育到高性能计算需求&#xff0c;云电脑通过为用户提供随…
阅读更多...
Windows中MySQL8.3.4 MSI版本——详细安装教程

Windows中MySQL8.3.4 MSI版本——详细安装教程

一、下载MySQL安装文件。 下载地址&#xff1a;MySQL官网 进入后点击下面的MySQL社区版下载 点击MySQL Comunity Server。 我这里选择的是版本8.4.3LTS版本&#xff0c;在线对应的msi文件。 点击No thanks,直接下载。 二、安装MySQL 2.1、双击刚刚下载好的msi文件&#xff0c;…
阅读更多...
Appium：安装uiautomator2失败

Appium：安装uiautomator2失败

目录 1、通过nmp安装uiautomator2&#xff1a;失败 2、通过 Appium 的平台直接安装驱动程序 3、通过pip 来安装 uiautomator2 1、通过nmp安装uiautomator2&#xff1a;失败 我先是通过npm安装的uiautomator2&#xff0c;也显示已经安装成功了&#xff1a; npm install -g …
阅读更多...
计算机网络-IPSec VPN基本概念

计算机网络-IPSec VPN基本概念

企业分支之间经常有互联的需求&#xff0c;企业互联的方式很多&#xff0c;可以使用专线线路或者Internet线路。部分企业从成本和需求出发会选择使用Internet线路进行互联&#xff0c;但是使用Internet线路存在安全风险&#xff0c;如何保障数据在传输时不会被窃取&#xff1f;…
阅读更多...
【Linux】环境ChatGLM-4-9B 模型之 openai API 服务

【Linux】环境ChatGLM-4-9B 模型之 openai API 服务

一、摘要 最近看到 Function Call 比较感兴趣，它的核心是赋予大模型能够调用外部API的能力，能够解决大模型功能扩展性问题，允许模型调用外部数据库或API，提供特定领域的详细信息；解决信息实时性问题，模型可以实时获取最新数据；解决数据局限性问题，大模型训练数据虽多但…
阅读更多...
实践教程｜Transformer Decoder-Only 模型批量生成 Trick

实践教程｜Transformer Decoder-Only 模型批量生成 Trick

导读 本文给出了一个用单Transformer decoder&#xff08; GPT&#xff09;模型进行批量生成时的解决方法。 发现用单 Transformer decoder &#xff08;Aka GPT&#xff09;模型进行生成时&#xff0c;因为位置对齐等问题&#xff0c;进行批量生成时十分麻烦。 训练时&#…
阅读更多...
【NoSQL数据库】MongoDB数据库——文档的查询操作（多条件查询、聚合aggregate、管道）

【NoSQL数据库】MongoDB数据库——文档的查询操作（多条件查询、聚合aggregate、管道）

往期文章&#xff1a; ​​​​​​【NoSQL数据库】MongoDB数据库的安装与卸载-CSDN博客 【NoSQL数据库】MongoDB数据库——集合和文档的基本操作&#xff08;创建、删除、更新、查询&#xff09;-CSDN博客 目录 一、MongoDB文档查询原理 1、使用 find() 方法进行文档基本…
阅读更多...
git pull error: cannot lock ref

git pull error: cannot lock ref

Git: cannot lock ref ‘refs/remotes/origin/feature/xxx’: refs/remotes/origin/feature/xxx/car’ exists; cannot create refs/remotes/origin/feature/xxx git remote prune origin重新整理服务端和本地的关联关系即可
阅读更多...
Harnessing Large Language Models for Training-free Video Anomaly Detection

Harnessing Large Language Models for Training-free Video Anomaly Detection

标题&#xff1a;利用大型语言模型实现无训练的视频异常检测 原文链接&#xff1a;https://openaccess.thecvf.com/content/CVPR2024/papers/Zanella_Harnessing_Large_Language_Models_for_Training-free_Video_Anomaly_Detection_CVPR_2024_paper.pdf 源码链接&#xff1a;ht…
阅读更多...
Flutter解压文件并解析数据

Flutter解压文件并解析数据

Flutter解压文件并解析数据 前言 在 Flutter 开发中&#xff0c;我们经常需要处理文件的读取和解压。 这在处理应用数据更新、安装包、存档文件等场景中尤为常见。 本文将介绍如何在Flutter中使用archive插件来解压文件并解析数据。 准备 在开始之前&#xff0c;我们需要…
阅读更多...
论文阅读：Single-cell transcriptomics of 20 mouse organs creates a Tabula Muris

论文阅读：Single-cell transcriptomics of 20 mouse organs creates a Tabula Muris

The Tabula Muris Consortium., Overall coordination., Logistical coordination. et al. Single-cell transcriptomics of 20 mouse organs creates a Tabula Muris. Nature 562, 367–372 (2018). 论文地址&#xff1a;https://doi.org/10.1038/s41586-018-0590-4 代码地址…
阅读更多...
【算法】模拟

【算法】模拟

阿华代码&#xff0c;不是逆风&#xff0c;就是我疯 你们的点赞收藏是我前进最大的动力&#xff01;&#xff01; 希望本文内容能够帮助到你&#xff01;&#xff01; 目录 一&#xff1a;替换所有的问号 二&#xff1a;提莫攻击 三&#xff1a;z字形变换 四&#xff1a;外观…
阅读更多...
MongoDB整合SpringBoot

MongoDB整合SpringBoot

MongoDB整合SpringBoot 环境准备 1.引入依赖 <!--spring data mongodb--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-mongodb</artifactId> </dependency> 2.配置yml spr…
阅读更多...
【简洁明快】使用python读取数据建立pptx （python-pptx图文调整案例）

【简洁明快】使用python读取数据建立pptx （python-pptx图文调整案例）

使用python自动读取数据建立pptx 前言如何使用 Python 自动生成 PPTX第一步&#xff1a;安装所需库第二步&#xff1a;创建一个新的 PPTX第三步&#xff1a;添加幻灯片第四步&#xff1a;添加内容添加文本添加图片第五步&#xff1a;保存 PPTX 图文实操案例&#xff08;自动读取…
阅读更多...
三维扫描检测在汽车制造中的应用

三维扫描检测在汽车制造中的应用

三维扫描&#xff0c;通过先进三维扫描技术获取产品和物体的形面三维数据&#xff0c;建立实物的三维图档&#xff0c;满足各种实物3D模型数据获取、三维数字化展示、3D多媒体开发、三维数字化存档、逆向设计、产品开发、直接3D打印制造或辅助加工制造等一系列的应用。 三维扫描…
阅读更多...
flyway执行sql遇到变量执行报错解决

flyway执行sql遇到变量执行报错解决

前两天在公司使用flyway工具执行sql时&#xff0c;开发写的sql里面有变量&#xff0c;于是这个flyway工具不识别这个变量直接报错&#xff0c;不接着往下执行了。报错信息如下&#xff1a; flyway工具执行sql报错 information: No value provided for placeholder: ${ep1} 于是…
阅读更多...
go语言的sdk项目搭建与git 操作标签tag并推送至远程仓库

go语言的sdk项目搭建与git 操作标签tag并推送至远程仓库

在搭建 SDK 项目并结合 Git 操作标签&#xff08;Tag&#xff09;时&#xff0c;通常会涉及项目初始化、版本管理、Git 标签的创建与管理等内容。以下是一个完整的步骤指南&#xff0c;帮助您搭建 SDK 项目并学习如何使用 Git 标签。 ### 1. **搭建 SDK 项目** 首先&#xff…
阅读更多...
机器学习算法的核心理论小总结

机器学习算法的核心理论小总结

机器学习算法的核心在于利用数据构建模型以解决实际问题&#xff0c;而理解其理论基础是高效应用的关键。本文从机器学习的基本概念出发&#xff0c;详细解析监督学习中的几种经典算法&#xff0c;如逻辑回归、决策树和支持向量机&#xff08;SVM&#xff09;。同时&#xff0c…
阅读更多...
3.STM32通信接口之SPI通信---SPI实战（W25Q64存储模块介绍）《精讲》

3.STM32通信接口之SPI通信---SPI实战（W25Q64存储模块介绍）《精讲》

上一节介绍了SPI的通信过程和方法&#xff0c;接下来就要进行STM32与外围模块通信了&#xff0c;这个模块是一块非易失型存储芯片&#xff0c;能够提供8MB的存储空间。接下来跟着Whappy脚步&#xff0c;进行探索新大陆吧&#xff01;【免费】W25Q64(中英文数据手册)资源-CSDN文…
阅读更多...
第七节（1）、T型加减速转动【51单片机-TB6600驱动器-步进电机教程】

第七节（1）、T型加减速转动【51单片机-TB6600驱动器-步进电机教程】

摘要&#xff1a;本节介绍步进电机T型加减速的控制方法&#xff0c;分2个小节&#xff0c;本小节主要内容为该控制方法的推导与计算&#xff0c;第二节对T型加减速进行了简化计算 一.加速阶段计算 1.1 计算时间与步数关系 根据位移公式可得&#xff1a; a n g l e 0 n ∗ s…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023