html页面怎么生成url,输入URL到页面渲染的整个流程

DNS 解析

TCP 三次握手

发送请求&＃xff0c;分析 url&＃xff0c;设置请求报文(头&＃xff0c;主体)

服务器返回请求的文件 (html)

浏览器渲染

HTML parser --> DOM Tree

标记化算法&＃xff0c;进行元素状态的标记

dom 树构建

CSS parser --> Style Tree

解析 css 代码&＃xff0c;生成样式树

attachment --> Render Tree

结合 dom树 与 style树&＃xff0c;生成渲染树

layout: 布局

GPU painting: 像素绘制页面

DNS

DNS 的作用就是通过域名查询到具体的 IP。

因为 IP 存在数字和英文的组合(IPv6)&＃xff0c;很不利于人类记忆&＃xff0c;所以就出现了域名。你可以把域名看成是某个 IP 的别名&＃xff0c;DNS 就是去查询这个别名的真正名称是什么。

在 TCP 握手之前就已经进行了 DNS 查询&＃xff0c;这个查询是操作系统自己做的。当你在浏览器中想访问 www.google.com 时&＃xff0c;会进行一下操作&＃xff1a;

操作系统会首先在本地缓存中查询 IP

没有的话会去系统配置的 DNS 服务器中查询

如果这时候还没得话&＃xff0c;会直接去 DNS 根服务器查询&＃xff0c;这一步查询会找出负责 com 这个一级域名的服务器

然后去该服务器查询 google 这个二级域名

接下来三级域名的查询其实是我们配置的&＃xff0c;你可以给 www 这个域名配置一个 IP&＃xff0c;然后还可以给别的三级域名配置一个 IP

以上介绍的是 DNS 迭代查询&＃xff0c;还有种是递归查询&＃xff0c;区别就是前者是由客户端去做请求&＃xff0c;后者是由系统配置的 DNS 服务器做请求&＃xff0c;得到结果后将数据返回给客户端。

PS&＃xff1a;DNS 是基于 UDP 做的查询&＃xff0c;大家也可以考虑下为什么之前不考虑使用 TCP 去实现。

接下来是 TCP 握手&＃xff0c;应用层会下发数据给传输层&＃xff0c;这里 TCP 协议会指明两端的端口号&＃xff0c;然后下发给网络层。网络层中的 IP 协议会确定 IP 地址&＃xff0c;并且指示了数据传输中如何跳转路由器。然后包会再被封装到数据链路层的数据帧结构中&＃xff0c;最后就是物理层面的传输了。

在这一部分中&＃xff0c;可以详细说下 TCP 的握手情况以及 TCP 的一些特性。

第一次握手

客户端向服务端发送连接请求报文段。该报文段中包含自身的数据通讯初始序号。请求发送后&＃xff0c;客户端便进入 SYN-SENT 状态。

第二次握手

服务端收到连接请求报文段后&＃xff0c;如果同意连接&＃xff0c;则会发送一个应答&＃xff0c;该应答中也会包含自身的数据通讯初始序号&＃xff0c;发送完成后便进入 SYN-RECEIVED 状态。

第三次握手

当客户端收到连接同意的应答后&＃xff0c;还要向服务端发送一个确认报文。客户端发完这个报文段后便进入 ESTABLISHED 状态&＃xff0c;服务端收到这个应答后也进入 ESTABLISHED 状态&＃xff0c;此时连接建立成功。

PS&＃xff1a;第三次握手中可以包含数据&＃xff0c;通过快速打开(TFO)技术就可以实现这一功能。其实只要涉及到握手的协议&＃xff0c;都可以使用类似 TFO 的方式&＃xff0c;客户端和服务端存储相同的 COOKIE&＃xff0c;下次握手时发出 COOKIE 达到减少 RTT 的目的。

为什么 TCP 建立连接需要三次握手&＃xff0c;明明两次就可以建立起连接&＃xff1f;

因为这是为了防止出现失效的连接请求报文段被服务端接收的情况&＃xff0c;从而产生错误。

可以想象如下场景。客户端发送了一个连接请求 A&＃xff0c;但是因为网络原因造成了超时&＃xff0c;这时 TCP 会启动超时重传的机制再次发送一个连接请求 B。此时请求顺利到达服务端&＃xff0c;服务端应答完就建立了请求&＃xff0c;然后接收数据后释放了连接。

假设这时候连接请求 A 在两端关闭后终于抵达了服务端&＃xff0c;那么此时服务端会认为客户端又需要建立 TCP 连接&＃xff0c;从而应答了该请求并进入 ESTABLISHED 状态。但是客户端其实是 CLOSED 的状态&＃xff0c;那么就会导致服务端一直等待&＃xff0c;造成资源的浪费。

PS&＃xff1a;在建立连接中&＃xff0c;任意一端掉线&＃xff0c;TCP 都会重发 SYN 包&＃xff0c;一般会重试五次&＃xff0c;在建立连接中可能会遇到 SYN Flood 攻击。遇到这种情况你可以选择调低重试次数或者干脆在不能处理的情况下拒绝请求。

当 TCP 握手结束后就会进行 TLS 握手&＃xff0c;然后就开始正式的传输数据。

在这一部分中&＃xff0c;可以详细说下 TLS 的握手情况以及两种加密方式的内容。

数据在进入服务端之前&＃xff0c;可能还会先经过负责负载均衡的服务器&＃xff0c;它的作用就是将请求合理的分发到多台服务器上&＃xff0c;这时假设服务端会响应一个 HTML 文件。

首先浏览器会判断状态码是什么&＃xff0c;如果是 200 那就继续解析&＃xff0c;如果 400 或 500 的话就会报错&＃xff0c;如果 300 的话会进行重定向&＃xff0c;这里会有个重定向计数器&＃xff0c;避免过多次的重定向&＃xff0c;超过次数也会报错。

浏览器开始解析文件&＃xff0c;如果是 gzip 格式的话会先解压一下&＃xff0c;然后通过文件的编码格式知道该如何去解码文件。

文件解码成功后会正式开始渲染流程&＃xff0c;先会根据 HTML 构建 DOM 树&＃xff0c;有 CSS 的话会去构建 CSSOM 树。如果遇到 script 标签的话&＃xff0c;会判断是否存在 async 或者 defer &＃xff0c;前者会并行进行下载并执行 JS&＃xff0c;后者会先下载文件&＃xff0c;然后等待 HTML 解析完成后顺序执行。

如果以上都没有&＃xff0c;就会阻塞住渲染流程直到 JS 执行完毕。遇到文件下载的会去下载文件&＃xff0c;这里如果使用 HTTP/2 协议的话会极大的提高多图的下载效率。

CSSOM 树和 DOM 树构建完成后会开始生成 Render 树&＃xff0c;这一步就是确定页面元素的布局、样式等等诸多方面的东西

在生成 Render 树的过程中&＃xff0c;浏览器就开始调用 GPU 绘制&＃xff0c;合成图层&＃xff0c;将内容显示在屏幕上了。

这一部分就是渲染原理中讲解到的内容&＃xff0c;可以详细的说明下这一过程。并且在下载文件时&＃xff0c;也可以说下通过 HTTP/2 协议可以解决队头阻塞的问题。

我们知道执行 JS 有一个 JS 引擎&＃xff0c;那么执行渲染也有一个渲染引擎。同样&＃xff0c;渲染引擎在不同的浏览器中也不是都相同的。比如在 Firefox 中叫做 Gecko&＃xff0c;在 Chrome 和 Safari 中都是基于 WebKit 开发的。在这一章节中&＃xff0c;我们也会主要学习关于 WebKit 的这部分渲染引擎内容。

浏览器接收到 HTML 文件并转换为 DOM 树

当我们打开一个网页时&＃xff0c;浏览器都会去请求对应的 HTML 文件。虽然平时我们写代码时都会分为 JS、CSS、HTML 文件&＃xff0c;也就是字符串&＃xff0c;但是计算机硬件是不理解这些字符串的&＃xff0c;所以在网络中传输的内容其实都是 0 和 1 这些字节数据。当浏览器接收到这些字节数据以后&＃xff0c;它会将这些字节数据转换为字符串&＃xff0c;也就是我们写的代码。

当数据转换为字符串以后&＃xff0c;浏览器会先将这些字符串通过词法分析转换为标记(token)&＃xff0c;这一过程在词法分析中叫做标记化(tokenization)。

那么什么是标记呢&＃xff1f;这其实属于编译原理这一块的内容了。简单来说&＃xff0c;标记还是字符串&＃xff0c;是构成代码的最小单位。这一过程会将代码分拆成一块块&＃xff0c;并给这些内容打上标记&＃xff0c;便于理解这些最小单位的代码是什么意思。

当结束标记化后&＃xff0c;这些标记会紧接着转换为 Node&＃xff0c;最后这些 Node 会根据不同 Node 之前的联系构建为一颗 DOM 树。

以上就是浏览器从网络中接收到 HTML 文件然后一系列的转换过程。

当然&＃xff0c;在解析 HTML 文件的时候&＃xff0c;浏览器还会遇到 CSS 和 JS 文件&＃xff0c;这时候浏览器也会去下载并解析这些文件&＃xff0c;接下来就让我们先来学习浏览器如何解析 CSS 文件。

将 CSS 文件转换为 CSSOM 树

其实转换 CSS 到 CSSOM 树的过程和上一小节的过程是极其类似的

在这一过程中&＃xff0c;浏览器会确定下每一个节点的样式到底是什么&＃xff0c;并且这一过程其实是很消耗资源的。因为样式你可以自行设置给某个节点&＃xff0c;也可以通过继承获得。在这一过程中&＃xff0c;浏览器得递归 CSSOM 树&＃xff0c;然后确定具体的元素到底是什么样式。

如果你有点不理解为什么会消耗资源的话&＃xff0c;我这里举个例子

span {

color: red;

}

div > a > span {

color: red;

}

对于第一种设置样式的方式来说&＃xff0c;浏览器只需要找到页面中所有的 span 标签然后设置颜色&＃xff0c;但是对于第二种设置样式的方式来说&＃xff0c;浏览器首先需要找到所有的 span 标签&＃xff0c;然后找到 span 标签上的 a 标签&＃xff0c;最后再去找到 div 标签&＃xff0c;然后给符合这种条件的 span 标签设置颜色&＃xff0c;这样的递归过程就很复杂。所以我们应该尽可能的避免写过于具体的 CSS 选择器&＃xff0c;然后对于 HTML 来说也尽量少的添加无意义标签&＃xff0c;保证层级扁平。

生成渲染树

当我们生成 DOM 树和 CSSOM 树以后&＃xff0c;就需要将这两棵树组合为渲染树。

在这一过程中&＃xff0c;不是简单的将两者合并就行了。渲染树只会包括需要显示的节点和这些节点的样式信息&＃xff0c;如果某个节点是 display: none 的&＃xff0c;那么就不会在渲染树中显示。

当浏览器生成渲染树以后&＃xff0c;就会根据渲染树来进行布局(也可以叫做回流)&＃xff0c;然后调用 GPU 绘制&＃xff0c;合成图层&＃xff0c;显示在屏幕上。对于这一部分的内容因为过于底层&＃xff0c;还涉及到了硬件相关的知识&＃xff0c;这里就不再继续展开内容了。

那么通过以上内容&＃xff0c;我们已经详细了解到了浏览器从接收文件到将内容渲染在屏幕上的这一过程。接下来&＃xff0c;我们将会来学习上半部分遗留下来的一些知识点。

为什么操作 DOM 慢

想必大家都听过操作 DOM 性能很差&＃xff0c;但是这其中的原因是什么呢&＃xff1f;

因为 DOM 是属于渲染引擎中的东西&＃xff0c;而 JS 又是 JS 引擎中的东西。当我们通过 JS 操作 DOM 的时候&＃xff0c;其实这个操作涉及到了两个线程之间的通信&＃xff0c;那么势必会带来一些性能上的损耗。操作 DOM 次数一多&＃xff0c;也就等同于一直在进行线程之间的通信&＃xff0c;并且操作 DOM 可能还会带来重绘回流的情况&＃xff0c;所以也就导致了性能上的问题。