type
status
date
slug
summary
tags
category
icon
password
日期
时长
重点

How does it work工作原理

路由器传输数据,传输需要遵循几个协议

传输协议

Internet Protocol (IP)
Transmission Control Protocol (TCP)
DNS(Domain Name System (DNS)
Hypertext Transfer Protocol (HTTP)
Secure Sockets Layer/Transport Layer Security (SSL/TLS) protocol
IP 负责将数据包路由到正确的目的地,而 TCP 和 UDP 则确保数据包的可靠和高效传输。DNS 用于将域名转换为 IP 地址,HTTP 用于在客户端和服务器之间传输数据。

基本概念名词

  • Packet: A small unit of data that is transmitted over the internet.
  • Router: A device that directs packets of data between different networks.
  • IP Address: A unique identifier assigned to each device on a network, used to route data to the correct destination.
  • Domain Name: A human-readable name that is used to identify a website, such as google.com.
  • DNS: The Domain Name System is responsible for translating domain names into IP addresses.
  • HTTP: The Hypertext Transfer Protocol is used to transfer data between a client (such as a web browser) and a server (such as a website).
  • HTTPS: An encrypted version of HTTP that is used to provide secure communication between a client and server.
  • SSL/TLS: The Secure Sockets Layer and Transport Layer Security protocols are used to provide secure communication over the internet.
 
 

TCP/IP关键概念

192.168.2.6 IP Address
9998 Port
192.168.2.6:9998 Sockets
notion image
  • Ports: Ports are used to identify the application or service running on a device. Each application or service is assigned a unique port number, allowing data to be sent to the correct destination.
  • Sockets: A socket is a combination of an IP address and a port number, representing a specific endpoint for communication. Sockets are used to establish connections between devices and transfer data between applications.
  • Connections: A connection is established between two sockets when two devices want to communicate with each other. During the connection establishment process, the devices negotiate various parameters such as the maximum segment size and window size, which determine how data will be transmitted over the connection.
  • Data transfer: Once a connection is established, data can be transferred between the applications running on each device. Data is typically transmitted in segments, with each segment containing a sequence number and other metadata to ensure reliable delivery.
 

SSL/TLS基本概念

  • Certificates: SSL/TLS certificates are used to establish trust between the client and server. They contain information about the identity of the server and are signed by a trusted third party (a Certificate Authority) to verify their authenticity.
  • Handshake: During the SSL/TLS handshake process, the client and server exchange information to negotiate the encryption algorithm and other parameters for the secure connection.
  • Encryption: Once the secure connection is established, data is encrypted using the agreed-upon algorithm and can be transmitted securely between the client and server.
 

新技术与趋势

  • 5G: 5G is the latest generation of mobile network technology, offering faster speeds, lower latency, and greater capacity than previous generations. It is expected to enable new use cases and applications, such as autonomous vehicles and remote surgery.
  • Internet of Things (IoT): IoT refers to the network of physical devices, vehicles, home appliances, and other objects that are connected to the internet and can exchange data. As IoT continues to grow, it is expected to revolutionize industries such as healthcare, transportation, and manufacturing.
  • Artificial Intelligence (AI): AI technologies such as machine learning and natural language processing are already being used to power a wide range of applications and services, from voice assistants to fraud detection. As AI continues to advance, it is expected to enable new use cases and transform industries such as healthcare, finance, and education.
  • Blockchain: Blockchain is a distributed ledger technology that enables secure, decentralized transactions. It is being used to power a wide range of applications, from cryptocurrency to supply chain management.
  • Edge computing: Edge computing refers to the processing and storage of data at the edge of the network, rather than in centralized data centers. It is expected to enable new use cases and applications, such as real-time analytics and low-latency applications.
 

HTTP 超文本传输协议

HTTP 是每个网络开发者都应该知道的协议,因为它是整个网络的动力。了解 HTTP 当然可以帮助您开发更好的应用程序。
 

三方握手

三方握手的简单形式是,所有 TCP 连接都以三方握手开始,其中客户机和服务器在开始共享应用程序数据之前共享一系列数据包。
  • SYN - Client picks up a random number, let's say x, and sends it to the server.
  • SYN ACK - Server acknowledges the request by sending an ACK packet back to the client which is made up of a random number, let's say y picked up by server and the number x+1 where x is the number that was sent by the client
  • ACK - Client increments the number y received from the server and sends an ACK packet back with the number y+1
notion image
 

HTTP/2 - 2015

HTTP/2是为低延迟的内容传输而设计的。
HTTP/2倾向于通过使用二进制协议来解决 HTTP/1.x 中存在的延迟增加的问题。作为一个二进制协议,它更容易解析,但不同于 HTTP/1.x,它不再是人眼可读的。HTTP/2的主要构建模块是 Frames 和 Streams
 

HTTP/3 Is Now a Standard

HTTP/3是超文本传输协议(HTTP)的第三个版本,以前称为 HTTP-over-QUIC。QUIC 最初由 Google 开发,是 HTTP/2的继承者。像谷歌和 Facebook 这样的公司已经使用 QUIC 来加速网络。
 

Domain Name域名

域名是互联网基础设施的关键组成部分。它们为因特网上任何可用的 Web 服务器提供了一个人类可读的地址。
任何连接到互联网的计算机都可以通过公共 IP 地址,或者是 IPv4地址(例如192.0.2.172) ,或者是 IPv6地址(例如2001: db8:8b73:0000:0000:8 a2e: 0370:1337)。
计算机可以很容易地处理这些地址,但人们很难找出谁在运行服务器或网站提供什么服务。IP 地址很难记住,而且随着时间的推移可能会改变。
为了解决所有这些问题,我们使用称为域名的人类可读地址。
一个域名有一个由几个部分组成的简单结构(它可能只有一个部分,两个,三个...) ,用点隔开,从右到左读

TLD顶级域名

TLD (Top-Level Domain).
TLDs tell users the general purpose of the service behind the domain name. The most generic TLDs (.com.org.net) don't require web services to meet any particular criteria, but some TLDs enforce stricter policies so it is clearer what their purpose is. For example: • Local TLDs such as .us.fr, or .se can require the service to be provided in a given language or hosted in a certain country — they are supposed to indicate a resource in a particular language or country. • TLDs containing .gov are only allowed to be used by government departments. • The .edu TLD is only for use by educational and academic institutions. TLDs can contain special as well as latin characters. A TLD's maximum length is 63 characters, although most are around 2–3.
 

Label

Label (or component)
The labels are what follow the TLD. A label is a case-insensitive character sequence anywhere from one to sixty-three characters in length, containing only the letters A through Z, digits 0 through 9, and the '-' character (which may not be the first or last character in the label). a97, and hello-strange-person-16-how-are-you are all examples of valid labels. The label located right before the TLD is also called a Secondary Level Domain (SLD). A domain name can have many labels (or components). It is not mandatory nor necessary to have 3 labels to form a domain name. For instance, www.inf.ed.ac.uk is a valid domain name. For any domain you control (e.g. mozilla.org), you can create "subdomains" with different content located at each, like developer.mozilla.orgiot.mozilla.org, or bugzilla.mozilla.org.
 

DNS如何工作

正如我们已经看到的,当你想在浏览器中显示一个网页时,输入域名比输入 IP 地址更容易。让我们来看看这个过程:
1.在浏览器的位置栏中输入 mozilla.org
2.您的浏览器询问您的计算机是否已经识别该域名标识的 IP 地址(使用本地 DNS 缓存)。如果是这样,名称就会转换为 IP 地址,浏览器就会与 Web 服务器协商内容。就这样。
3.如果您的计算机不知道 mozilla.org 名称背后的 IP 是什么,它会继续询问 DNS 服务器,该服务器的工作正是告诉您的计算机哪个 IP 地址与每个注册域名匹配。
4.现在计算机知道了所需的 IP 地址,您的浏览器可以与 Web 服务器协商内容。
 

URL与域名

一个统一资源定位符(URL) ,有时称为网址,包含一个网站的域名以及其他信息,包括协议和路径。例如,在 URL“ https://cloudflare.com/learning/”中,“ Cloudflare.com”是域名,而“ https”是协议,“/learning/”是网站上某个特定页面的路径。
 

Hosting网络托管

让你的内容可以在互联网上浏览
托管服务包含 硬盘存储和 流量
 

Shared host共享主机

价格优惠
服务器上几千个一起用,无法处理资源激增
如果服务器被攻击,所有的网站都会手影响

VPS virtual private surver 虚拟个人服务器

分离程度更高,享有固定的资源
容易扩展或者降级 存储和内存
 

Dedicated hosting 专用托管

物理上独立
但不能轻易升级和降级 而且非常昂贵
 

DNS Records DNS 记录

A Record

指向IP地址
 

CNAME Record

别名记录 指向别的域名
 

MX Record

代表邮件 指向邮箱地址

TXT Record

允许我们分配文本到域名
用于验证域名所有权

NS Record

服务器记录,提供你的地址
 

host命令操作

可以在linux下使用host 命令获取 域名dns记录信息
notion image
 

Browsers浏览器

快速站点提供更好的用户体验。用户希望并且期望网络体验中的内容能够快速加载并且交互流畅。
Web 性能中的两个主要问题是与延迟有关的问题,以及与浏览器在大多数情况下是单线程的事实有关的问题。
延迟是对我们确保快速加载页面能力的最大威胁。开发人员的目标是使网站加载速度尽可能快ーー或者至少看起来加载速度非常快ーー这样用户就能尽可能快地获得所请求的信息。网络延迟是指通过无线方式向计算机传输字节所需的时间。Web 性能是我们必须做的,以使页面加载尽可能快。
在大多数情况下,浏览器被认为是单线程的。也就是说,他们从头到尾执行一项任务,然后再开始执行另一项任务。对于平滑的交互,开发人员的目标是确保性能良好的网站交互,从平滑的滚动到响应触摸。呈现时间是关键,确保主线程能够完成我们扔给它的所有工作,并且始终可以处理用户交互。通过理解浏览器的单线程特性和尽可能减少主线程的责任,可以提高 Web 性能,从而确保渲染的顺利性和对交互的即时响应。

Navigation 导航

导航是加载网页的第一步。当用户通过在地址栏中输入 URL、单击链接、提交表单以及其他操作来请求页面时,就会发生这种情况。
Web 性能的目标之一是尽量减少导航完成所需的时间。在理想情况下,这通常不会花费太长时间,但延迟和带宽是可能导致延迟的敌人。
 

DNS lookup 查找DNS

导航到网页的第一步是找到该网页的资产所在位置。如果导航到 https://example.com ,HTML 页面位于 IP 地址为93.184.216.34的服务器上。如果您从未访问过此站点,则必须进行 DNS 查找。
您的浏览器请求 DNS 查找,最终由名称服务器进行字段查找,名称服务器反过来用 IP 地址进行响应。在这个初始请求之后,IP 可能会被缓存一段时间,这会通过从缓存中检索 IP 地址而不是再次联系名称服务器来加速后续请求。
对于页面加载,每个主机名通常只需要执行一次 DNS 查找。但是,必须对请求的页引用的每个唯一主机名执行 DNS 查找。如果您的字体、图像、脚本、广告和指标都有不同的主机名,则必须为每个主机名进行 DNS 查找。
 

TCP handshake 三方握手

一旦知道了 IP 地址,浏览器通过 TCP 三方握手建立到服务器的连接。这种机制的设计目的是使两个试图通信的实体(在这种情况下是浏览器和 Web 服务器)能够在传输数据(通常是通过 HTTPS)之前协商网络 TCP 套接字连接的参数。
 

TLS negotiation 安全协商

对于通过 HTTPS 建立的安全连接,需要另一个“握手”。这种握手,或者更确切地说是 TLS 协商,确定将使用哪种密码对通信进行加密,验证服务器,并在开始实际数据传输之前建立安全连接。这需要在实际发送内容请求之前再往返5次服务器。
notion image
 

Response 响应

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

Parsing 解析

一旦浏览器接收到第一块数据,它就可以开始解析接收到的信息。解析是浏览器将通过网络接收的数据转换为 DOM 和 CSSOM 的步骤,渲染器使用这两个步骤将页面绘制到屏幕上。
DOM 是浏览器标记的内部表示形式。DOM 也是公开的,可以通过 JavaScript 中的各种 API 进行操作。
即使请求页面的 HTML 大于最初的14KB 数据包,浏览器也会开始解析并尝试基于它所拥有的数据呈现体验。这就是为什么网页性能优化必须包括浏览器开始渲染页面所需的所有东西,或者至少是页面的模板ーー第一次渲染所需的 CSS 和 HTML ーー在第一个14KB 中。但是在将任何内容呈现到屏幕之前,必须解析 HTML、 CSS 和 JavaScript。
 

Render 渲染

呈现步骤包括样式、布局、绘制,在某些情况下还包括合成。在解析步骤中创建的 CSSOM 和 DOM 树合并为一个呈现树,然后用于计算每个可见元素的布局,然后将其绘制到屏幕上。在某些情况下,可以将内容提升到自己的层并进行组合,通过在 GPU 而不是 CPU 上绘制屏幕的部分来提高性能,从而释放主线程。
关键呈现路径的第三步是将 DOM 和 CSSOM 组合成呈现树。计算样式树或呈现树的构造从 DOM 树的根开始,遍历每个可见节点。
不会显示的元素,比如 < head > 元素及其子元素,以及任何带 display: none 的节点,比如用户代理样式表中的脚本{ display: none; } ,都不包含在呈现树中,因为它们不会出现在呈现的输出中。具有可见性的节点: 应用的隐藏节点包含在呈现树中,因为它们确实占用空间。由于我们没有给出任何指令来覆盖用户代理默认值,因此上面代码示例中的脚本节点将不包含在呈现树中。
每个可见节点都应用了自己的 CSSOM 规则。呈现树包含所有具有内容和计算样式的可见节点ーー将所有相关样式与 DOM 树中的每个可见节点匹配,并根据 CSS 级联确定每个节点的计算样式。
WSL101HTML
KashiwaByte
KashiwaByte
求田问舍,怕应羞见,刘郎才气
公告
type
status
date
slug
summary
tags
category
icon
password
日期
时长
重点
🎉欢迎来到我的博客🎉
-- 感谢您的关注 ---
👏阅读以下内容获得更好体验👏