浏览器从输入url到渲染页面发生了什么？

浏览器从输入url到渲染页面发生了什么？

一、解析URL

首先浏览器做的第一步工作就是要对 URL 进行解析，浏览器会判断这个url的合法性 ，以及是否有可用缓存（如果有缓存即可以不用进行下一步的DNS域名解析），如果判断是 url 则进行域名解析，如果不是 url ，则直接使用搜索引擎搜索。

二、DNS域名解析

输入 url 并点击确定访问后，第二步是进行DNS域名解析，如果输入的是 ip地址，则可以省略这一步，因为DNS域名解析目的就是把域名解析成ip地址。

域名系统（DNS）： 域名系统是互联网的一项服务，是一个将域名和ip地址相互映射的分布式数据库。

域名的层级关系

DNS 中的域名都是用句点来分隔的，比如 www.server.com，这里的句点代表了不同层次之间的界限。在域名中，越靠右的位置表示其层级越高。

实际上域名最后还有一个点，比如 www.server.com.，这个最后的一个点代表根域名。

所以域名的层级关系类似一个树状结构：

  • 根 DNS 服务器（.）
  • 顶级域 DNS 服务器（.com）
  • 权威 DNS 服务器（server.com）

本地DNS服务器

每个 ISP 都有一台本地 DNS 服务器，但严格来说，本地 DNS 服务器并不属于 DNS 的层次结构，但它对 DNS 层次结构是至关重要的。那什么是本地 DNS 服务器呢？

当主机发出 DNS 请求时，该请求被发往本地 DNS 服务器，本地 DNS 服务器起着代理的作用，并负责将该请求转发到 DNS 服务器层次结构中。

域名解析流程

递归加迭代

在这里插入图片描述

  1. 首先，主机 wei-z.top 向它的本地 DNS 服务器发送一个 DNS 查询报文，其中包含期待被转换的主机名 wei-z.top；（DNS查询请求）
  2. 本地 DNS 服务器将该报文转发到根 DNS 服务器；（转发）
  3. 该根 DNS 服务器注意到 top 前缀，便向本地 DNS 服务器返回 top 对应的顶级域 DNS 服务器的 IP 地址列表。（返回查询结果）
  4. 本地 DNS 服务器则向其中一台 顶级域服务器发送查询报文；（DNS查询请求）
  5. 该顶级域服务器注意到 wei-z.top 前缀，便向本地 DNS 服务器返回wei-z对应的权威 DNS 服务器的 IP 地址。（返回查询结果）
  6. 本地 DNS 服务器又向其中一台权威服务器发送查询报文；（DNS查询请求）
  7. 终于，该权威服务器返回了 wei-z.top 的 IP 地址；(拿到ip地址)
  8. 本地 DNS 服务器将 wei-z.top 跟 IP 地址的映射返回给主机 ，主机就可以用该 IP 向 a.b.com 发送请求啦。

::: tip

主机向本地 DNS 服务器发出的查询就是递归查询，这个查询是主机以自己的名义向本地 DNS 服务器请求想要的 IP 映射，并且本地 DNS 服务器直接返回映射结果给到主机。

后继的三个查询是迭代查询，包括本地 DNS 服务器向根 DNS 服务器发送查询请求、本地 DNS 服务器向 TLD 服务器发送查询请求、本地 DNS 服务器向权威 DNS 服务器发送查询请求，所有的请求都是由本地 DNS 服务器发出，所有的响应都是直接返回给本地 DNS 服务器。

:::

递归查询

在这里插入图片描述

DNS优化

DNS缓存

为了让我们更快的拿到想要的 IP，DNS 广泛使用了缓存技术。DNS 缓存的原理非常简单，在一个 DNS 查询的过程中，当某一台 DNS 服务器接收到一个 DNS 应答它就能够将映射缓存到本地，下次查询就可以直接用缓存里的内容。

当然，缓存并不是永久的，每一条映射记录都有一个对应的生存时间，一旦过了生存时间，这条记录就应该从缓存移出。

有了缓存，大多数 DNS 查询都绕过了根 DNS 服务器，需要向根 DNS 服务器发起查询的请求很少。

DNS负载均衡（DNS重定向）

DNS负载均衡技术的实现原理是在DNS服务器中为同一个主机名配置多个IP地址，在应答DNS查询时， DNS服务器对每个查询将以DNS文件中主机记录的IP地址按顺序返回不同的解析结果，将客户端的访问 引导到不同的机器上去，使得不同的客户端访问不同的服务器，从而达到负载均衡的目的。

DNS Prefetch

DNS Prefetch 是一种 DNS 预解析技术。当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接时就无需进行 DNS 的解析，减少用户等待时间，提高用户体验。

三、建立TCP连接

TCP 传输数据之前，要先三次握手建立连接

所以三次握手目的是保证双方都有发送和接收的能力。

四、发送HTTP请求

检查浏览器是否有缓存

  1. 通过Cache-Control和Expires来检查是否命中强缓存，命中则直接取本地磁盘的html（状态码为200 from disk(or memory) cache，内存or磁盘）；
  2. 如果没有命中强缓存，则会向服务器发起请求（先进行下一步的TCP连接），服务器通过Etag和Last-Modify来与服务器确认返回的响应是否被更改（协商缓存），若无更改则返回状态码（304 Not Modified）,浏览器取本地缓存；
  3. 若强缓存和协商缓存都没有命中则返回请求结果。

封装HTTP请求消息

接着就是将http消息交给传输层进行TCP报文的封装，为报文加上TCP头部再交给网络层进行IP定位，最后由数据链路层给IP头部再加上MAC头部并封装成数据帧发送到网络上。

网络接口层的传输单位是帧（frame），IP 层的传输单位是包（packet），TCP 层的传输单位是段（segment），HTTP 的传输单位则是消息或报文（message）。但这些名词并没有什么本质的区分，可以统称为数据包。

五、TCP四次挥手断开连接

当数据传送完毕，需要断开 tcp 连接，此时发起 tcp 四次挥手。

六、页面渲染

最后一步就是页面渲染了，这是一个很复杂的过程

1. 解析HTML，构建DOM树
2. 解析CSS，生成CSS规则树
3. 合并DOM树和CSS规则，生成render树
4. 布局render树（Layout/reflow），负责各元素尺寸、位置的计算(回流)
5. 绘制render树（paint），绘制页面像素信息（重绘）

总结：

::: tip

  1. 首先是URL地址解析，判断输入的是一个合法的URL还是一个带搜索的关键词，并且根据你输入的内容进行自动完成字符编码等操作。

  2. 接着发起真正的URL请求。如果浏览器本地缓存了这个资源，则会直接将数据转发给浏览器进程，如果没有缓存，则会查询DNS，解析域名。

  3. 首先找浏览器有没有DNS缓存，如果有则返回IP，如果没有则向本地域名服务器发送DNS请求，如果本地域名服务器中有之前对该域名的应答则直接返回缓存的IP，如果没有则从根域服务器、顶级域服务器、权威域服务器中查找对应主机的IP并返回给本地域服务器，再由它返回给浏览器。

  4. 浏览器拿到IP后，再向服务器发起HTTP请求之前还要先进行TCP连接。即TCP三次握手

    1. 第一次握手，客户端向服务器发送SYN包请求建立连接。

    2. 第二次握手，服务端收到来自客户端建立连接的请求后，返回SYN/ACK表示我能收到你的请求，那就建立连接吧

    3. 第三次握手，客户端收到服务端的返回后，再回复ACK表示我也能收到你的请求

      TCP三次握手的目的是为了确认双方都有发送和接受的的能力

  5. 建立TCP连接成功后，就可以发送HTTP请求到服务器请求数据了。

  6. 当获取到服务器返回的数据后，就开始对资源进行解析。

    1. HTML通过HTML解析器生成DOM树
    2. CSS样式通过CSS解析器解析输出CSS规则
    3. 结合DOM树和CSS规则，计算出DOM树中每个节点的具体样式，生成渲染树（render Tree）
    4. 浏览器根据渲染树开始布局和绘制，会触发回流和重绘
    5. 生成布局（flow），即将所有的渲染树的所有节点进行平面合成
    6. 将布局绘制（print）在浏览器上。

:::

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

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

相关文章

CAN总线测试——CAN一致性之物理层

CAN总线测试——CAN一致性之物理层

CAN一致性物理层测试项 1.最小通讯电压测试2.最大通讯电压测试3.显性位/隐性位输出电压测试4.信号跳变沿测试5. 地偏移6. 终端电阻 1.最小通讯电压测试 2.最大通讯电压测试 3.显性位/隐性位输出电压测试 4.信号跳变沿测试 5. 地偏移 6. 终端电阻
阅读更多...
Docker笔记-docker搭建nginx及移植

Docker笔记-docker搭建nginx及移植

从官网找到对应的镜像： ​​​​​​https://hub.docker.com/_/nginx/tags 查看镜像 docker images 运行容器，然后将配置文件等拷贝到主机上： docker run --name nginx -d nginx 拷贝路径： docker cp nginx:/etc/nginx/nginx…
阅读更多...
JDBC相关记录

JDBC相关记录

JDBC：Java DadaBase Connectivity 即Java语言连接数据库。 本质：JDBC是SUN公司制定的一套接口（interface）。 作用：不同的数据库有自己独特设计原理，JDBC的可以让Java程序员关注业务本身，而不需要…
阅读更多...
爬虫学习日记第八篇（爬取fofa某端口的协议排行及其机器数目，统计top200协议）

爬虫学习日记第八篇（爬取fofa某端口的协议排行及其机器数目，统计top200协议）

需求 找到最常用的200个协议 通过fofa搜索端口，得到协议排名前五名和对应机器的数目。 遍历端口，统计各个协议对应的机器数目（不准，但能看出个大概） 读写API API需要会员，一天只能访问1000次。 import…
阅读更多...
【JavaEE】初识计算机网络（TCP/IP五层模型及封装和分用）

【JavaEE】初识计算机网络（TCP/IP五层模型及封装和分用）

一、 网络通信基础 网络互连的目的是进行网络通信，也即是网络数据传输，更具体一点，是网络主机中的不同进程间，基于网络传输数据。 那么，在组建的网络中，如何判断到底是从哪台主机，将数据传输到…
阅读更多...
（免费领源码）hadoop#Mysql离线与实时的离线与实时的电影推荐系统10338-计算机毕业设计项目选题推荐

（免费领源码）hadoop#Mysql离线与实时的离线与实时的电影推荐系统10338-计算机毕业设计项目选题推荐

摘 要 随着互联网与移动互联网迅速普及，网络上的电影娱乐信息数量相当庞大，人们对获取感兴趣的电影娱乐信息的需求越来越大,个性化的离线与实时的电影推荐系统 成为一个热门。然而电影信息的表示相当复杂，己有的相似度计算方法与推荐算法都各…
阅读更多...
【Rust】4 一文讲解重点 pattern matching | trait | 生命周期 | 闭包 | 迭代器 | 智能指针 | 并发与并行

【Rust】4 一文讲解重点 pattern matching | trait | 生命周期 | 闭包 | 迭代器 | 智能指针 | 并发与并行

文章目录 一、pattern matching二、trait2.1 常见 trait2.1.1 Copy 和 Clone2.1.2 PartialEq 和 Eq2.1.3 PartialOrd 和 Ord2.1.4 Hash2.1.5 From, Into, TryFrom, TryInto 2.2 概念2.2.1 关联类型2.2.2 关联常量2.3.3 泛型关联类型2.3.3.1 示例: 用泛型关联类型, 创建集合工厂…
阅读更多...
Hadoop3教程（三十三）：（生产调优篇）慢磁盘监控与小文件归档

Hadoop3教程（三十三）：（生产调优篇）慢磁盘监控与小文件归档

文章目录 （161）慢磁盘监控（162）小文件归档小文件过多的问题如何对小文件进行归档 参考文献 （161）慢磁盘监控 慢磁盘，是指写入数据时特别慢的一类磁盘。这种磁盘并不少见，当机器运行…
阅读更多...
结构体学习

结构体学习

struct是结构体关键字 我们用C语言中通常都是用关键字来定义类型变量。例如我们的整型变量，int book;是用整型关键字定义出来的。同样的，struct book同样是一个类型，不过我们叫他结构体。我认为的结构体的作用，无外乎是将一些毫…
阅读更多...
基于侏儒猫鼬优化的BP神经网络（分类应用） - 附代码

基于侏儒猫鼬优化的BP神经网络（分类应用） - 附代码

基于侏儒猫鼬优化的BP神经网络（分类应用） - 附代码 文章目录 基于侏儒猫鼬优化的BP神经网络（分类应用） - 附代码1.鸢尾花iris数据介绍2.数据集整理3.侏儒猫鼬优化BP神经网络3.1 BP神经网络参数设置3.2 侏儒猫鼬算法应用 4.测试结果…
阅读更多...
闭包（函数）

闭包（函数）

把内部函数通过return扔出去 必要条件
阅读更多...
RobotRules 和UserAgent来下载文件

RobotRules 和UserAgent来下载文件

以下是一个使用WWW::RobotRules和LWP::UserAgent来下载文件的Perl程序： #!/usr/bin/perl ​ use strict; use warnings; use WWW::RobotRules; use LWP::UserAgent; use HTTP::Request; use HTTP::Response; ​ my $url http://www.people.com.cn/; my $agent LW…
阅读更多...
网络协议--Traceroute程序

网络协议--Traceroute程序

8.1 引言 由Van Jacobson编写的Traceroute程序是一个能更深入探索TCP/IP协议的方便可用的工具。尽管不能保证从源端发往目的端的两份连续的IP数据报具有相同的路由，但是大多数情况下是这样的。Traceroute程序可以让我们看到IP数据报从一台主机传到另一台主机所经过…
阅读更多...
【前端】Layui小功能收集整理

【前端】Layui小功能收集整理

目录 1、layui 鼠标悬浮提示文字 2、关闭当前窗口并刷新父页面 3、子iframe关闭/传值/刷新父页面 1、layui 鼠标悬浮提示文字 鼠标放在图标上悬浮显示提示信息&#xff0c;效果图如下 <div style"float:left; line-height:40px">道试题 <i class"l…
阅读更多...
使用WPF模仿Windows记事本界面

使用WPF模仿Windows记事本界面

本次仅模仿Windows记事本的模样&#xff0c;并未实现其功能。 所有代码如下&#xff1a; <Window x:Class"控件的基础使用.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/…
阅读更多...
【Godot】【BUG】4.x NavigationAgent 导航不生效

【Godot】【BUG】4.x NavigationAgent 导航不生效

4.2.beta2 试了半天才发现原来默认只对第一个有导航的 TileMap 的第 1 层 生效&#xff0c;而我设置的导航层不是第一层&#xff0c;然后我新建了一个 TileMap 将导航的瓦片设置到这个 TileMap 上了&#xff0c;如图 这样就解决了问题&#xff0c;不用再修改默认设置的东西了&a…
阅读更多...
机器学习tip：sklearn中的pipeline

机器学习tip：sklearn中的pipeline

文章目录 1 加载数据集2 构思算法的流程3 Pipeline执行流程的分析ReferenceStatement 一个典型的机器学习构建包含若干个过程 源数据ETL数据预处理特征选取模型训练与验证 一个典型的机器学习构建包含若干个过程 以上四个步骤可以抽象为一个包括多个步骤的流水线式工作&…
阅读更多...
四大特性模块(module)

四大特性模块(module)

module的动机 C20中新增了四大特性之一的模块(module)&#xff0c;用以解决传统的头文件在编译时间及程序组织上的问题。 modules 试图解决的痛点 能最大的痛点就是编译慢, 头文件的重复替换, 比如你有多个翻译单元, 每一个都调用了 iostream, 就得都处理一遍. 预处理完的源…
阅读更多...
三维模型表面积计算方法

三维模型表面积计算方法

【版权声明】 本文为博主原创文章&#xff0c;未经博主允许严禁转载&#xff0c;我们会定期进行侵权检索。 更多算法总结请关注我的博客&#xff1a;https://blog.csdn.net/suiyingy&#xff0c;或”乐乐感知学堂“公众号。 本文章来自于专栏《Python三维模型处理基础》的系列文…
阅读更多...
在线存储系统源码 网盘网站源码 云盘系统源码

在线存储系统源码 网盘网站源码 云盘系统源码

Cloudreve云盘系统源码-支持本地储存和对象储存,界面美观 云盘系统安装教程 测试环境:PHP7.1 MYSQL5.6 Apache 上传源码到根目录 安装程序: 浏览器数据 http://localhost/CloudreveInstallerlocalhost更换成你的网址 安装完毕 记住系统默认的账号密码 温馨提示:如果默认…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023