浏览器的工作原理（dns域名服务器，tcp握手，ssl/tls安全协议，关键渲染路径，重绘及回流，防抖和节流）

输入url之后，浏览器会进行DNS（DNS负责解析域名）查找，把域名转化成真实的ip地址，根据ip地址找到提供网站内容的服务器

dns是什么?

概括的说DNS 是计算机域名 (Domain Name System) 的缩写，它是由解析器和域名服务器组成的。

域名服务器是指保存有该网络中所有主机的域名和对应IP地址，并具有将域名转换为IP地址功能的服务器。
其中域名必须对应一个IP地址，一个IP地址可以同时对应多个域名，但IP地址不一定有域名。
https://g.pconline.com.cn/x/998/9981276.html

在找到服务器之后，浏览器会通过TCP握手机制跟服务器建立连接，而现在大部分服务器传输都是基于https协议的，那么会多一步tls握手（ssl协议的后代）建立加密的隧道，保证数据传输不被监听和篡改

ssl和tls协议：https://jingyan.baidu.com/article/9113f81bd13bb76a3314c710.html

TCP和SSL 的三次握手和四次挥手：
https://www.jianshu.com/p/6811285c577d

安全协议

HTTPS的安全基础是SSL/TLS。TLS 是介于TCP和HTTP之间的一层安全协议，不影响原有的TCP协议和HTTP协议，所以使用HTTPS基本上不需要对HTTP页面进行太多的改动。TLS为应用层提供安全服务，其目标是保证两个应用之间通信的保密性和可靠性,可在服务器和客户机两端同时实现支持。目前Firefox、Netscape、IE等几乎所有浏览器均支持SSL/TLS协议，从而实现通信安全。

HTTPS 是先进行 TCP 三次握手，再进行 TLSv1.2 四次握手

TCP Fast Open + TLSv1.3
在前面我们知道，客户端和服务端同时支持 TCP Fast Open 功能的情况下，在第二次以后到通信过程中，客户端可以绕过三次握手直接发送数据，而且服务端也不需要等收到第三次握手后才发送数据。

如果 HTTPS 的 TLS 版本是 1.3，那么 TLS 过程只需要 1-RTT。

因此如果TCP Fast Open + TLSv1.3情况下，在第二次以后的通信过程中，TLS 和 TCP 的握手过程是可以同时进行的。

TLSv1.3 还有个更厉害到地方在于会话恢复机制，再重连 TLSv1.3 只需要 0-RTT，用“pre_shared_key”和“early_data”扩展，在 TCP 连接后立即就建立安全连接发送加密消息

如果基于 TCP Fast Open 场景下的 TLSv1.3 0-RTT 会话恢复过程，不仅 TLS 和 TCP 的握手过程是可以同时进行的，而且 HTTP 请求也可以在这期间内一同完成。

原文：https://blog.csdn.net/qq_34827674/article/details/123458410

在建立了浏览器和服务器之间的连接之后，浏览器会发起http或者https请求来获取服务器响应

一般对于网站来说，响应就是服务器返回的html网页代码，这里在接受服务器响应的时候，有一个slow start机制，受制于tcp连接的限制，浏览器会先收到前14kb的数据，后续才会慢慢的增加传输的速度下载其他文件，所以对于服务器来说，可以在这14kb的数据里完整的展现网站就变的很重要了

再收到html代码之后，浏览器开始渲染网页

关键渲染路径（5步）

这里一共有5步
这5步统称为：关键渲染路径


浏览器在解析html的时候是顺序执行的，并且只有一个主线程负责解析，如果遇到script标签，那么浏览器会加载js的文件并执行其中的代码

注意：（加载js文件时）这个时候主线程会暂停解析html，只有js代码完成之后才能继续

注意对于图片，css文件，设置了defer或者设置了async的script标签，并不会影响主线程，而是会异步加载

浏览器的预扫描线程

它会扫描html代码，提前把css文件，字体以及js文件下载下来，这里的下载是异步的，不会影响主线程

构建cssom 树

合并DOM和CSSOM

生成一颗渲染树（render tree）

布局

生成渲染树之后，浏览器会样式计算每个可见节点（也就是没有设置display为null的节点），它们的宽高和位置等，对所有的节点进行布局规划

回流：reflow

当渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的操作，会影响到布局的操作，这样的操作我们称为回流。

对于像图片这样的节点，如果没有指定宽高，那么浏览器会先忽略它的大小，在图片加载完成之后，浏览器会根据图片的宽高和位置再次计算是否影响了节点的大小和位置，这个过程叫做：回流

（1）添加或者删除可见的 DOM 元素；
（2）元素尺寸改变——边距、填充、边框、宽度和高度
（3）内容变化，比如用户在 input 框中输入文字
（4）浏览器窗口尺寸改变——resize事件发生时
（5）计算 offsetWidth 和 offsetHeight 属性
（6）设置 style 属性的值
（7）当你修改网页的默认字体时。

绘制

注意：在第一次布局完成之后，浏览器会 真正 的把节点和节点样式（比如背景阴影边框等）绘制到屏幕上

这个要求过程非常的迅速，否则会影响动画和交互的性能

注意：如果之前布局发生了回流（也就是加载了图片这样的节点之后），浏览器还会发生重绘

重绘

重绘：把变化的布局重新绘制到屏幕上
当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局的操作，比如 background-color，我们将这样的操作称为重绘。

回流的成本比重绘要大（不会影响布局）

注：
发生回流一定会触发重绘，但是触发重绘不一定会发生回流

所以以下几个动作可能会导致性能问题：

改变 window 大小

改变字体

添加或删除样式

文字改变

定位或者浮动

盒模型

重绘和回流其实和 Event loop 有关

Tasks(任务), microtasks(微任务), queues（队列） and schedules（回调队列）

当Eventloop 执行完 Microtasks(微任务) 后,会判断 document 是否需要更新,因为浏览器是 60Hz 的刷新率,每 16.6ms 才会更新一次。 然后判断是否有 resize 或者 scroll 事件,有的话会去触发事件,所以 resize 和 scroll 事件也是至少 16ms 才会触发一次,并且自带 节流功能。

对于连续触发的事件，节流的含义就是让事件处理函数在一定的时间间隔后周期性触发

减少重绘和回流

使用 translate 替代 top。
使用 visibility替换 display: none，因为前者只会引起重绘，后者会引发回流（改变了布局）。
不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局。
动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用 requestAnimationFrame。

在绘制期间也可能会有组合发生，例如：

viedo标签，或者设置了opaciry，will-change或tranaform等属性的节点

浏览器还需要把这些图层组合起来，按正确的堆叠顺序渲染
注意：回流和重绘操作 也会引发 重新组合操作

上面5步完成后，设置了defer或者async的js标签（文件）开始加载并执行

完成之后整个网页就加载完成了，并且可以和用户进行交互了

防抖和节流是什么

   本质上是优化高频率执行代码的一种手段

   如：浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能

   为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用throttle（防抖）和debounce（节流）的方式来减少调用频率
1
2
3
4
5

定义：

节流:
n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效
防抖:
n 秒后再执行该事件，若在 n 秒内被重复触发，则重新计时

一个经典的比喻:

想象每天上班大厦底下的电梯。把电梯完成一次运送，类比为一次函数的执行和响应

假设电梯有两种运行策略 debounce 和 throttle，超时设定为15秒，不考虑容量限制

电梯第一个人进来后，15秒后准时运送一次，这是节流。

电梯第一个人进来后，等待15秒。如果过程中又有人进来，15秒等待重新计时，直到15秒后开始运送，这是防抖。