个人杂汇：图片懒加载+https+浏览器api+输入url渲染全过程😮‍💨🚀

图片懒加载，使用intersectionObserver

在开发图片懒加载功能时，我最初计划通过 onscroll 事件监听页面滑动并通过计算来实现懒加载，但这种方式相对复杂。后来我阅读了阮一峰老师的文章，了解到 IntersectionObserver API。它能够检测元素与视口的交叉程度，且其回调是异步的，相比 onscroll 事件具有更好的性能，因此我决定采用 IntersectionObserver。

同时，我也考虑过浏览器原生的 loading="lazy" 属性，它的性能更好，但定制性较差，无法满足我想要有一定提前量触发加载的需求，所以最终还是选择了 IntersectionObserver。为了方便复用，我将创建 IntersectionObserver 实例的方法封装成了一个 React Hooks。

在使用过程中，我将创建的 IntersectionObserver 实例设计为组件单例模式 ，这既不是全局单例（防止监控过多对象导致性能问题），也不是每张图片都创建一个观察者实例（避免性能和内存问题）。同时，我考虑到快速滑动时可能出现大量图片并发加载的情况，于是我维护了一个加载队列 来判断，记录已加载图片的数量，超出部分的图片放入加载队列等待加载，以此实现并发控制。

然而，这种加载方式会导致视口内的图片无法优先显示，于是我又维护了一个优先队列 ，对视口内的图片进行优先加载。同时，为了避免快速滚动时优先队列中的图片变化过快而引发性能问题，我使用了节流技术。

最后，我使用了 WeakMap 来存储图片的 URL，而不是直接在图片的属性上设置，这样可以使图片元素更加干净。但在实现过程中，我发现图片加载可能会导致正在观察的图片出现偏移问题，于是通过使用占位符来解决这一问题。

https 连接特仑苏（tls）VS tcp

https 连接其实是http 协议的升级，基于tcp协议，使用ssl/tls协议进行加密传输，设计到密钥协商和证书验证。
这个过程是先 tcp三次握手建立连接，然后进行非对称加密，最后进行对称加密。
下面说下详细过程：
- 客户端先发送hello报文
- 服务器收到客户端的hello报文，从客户端hello报文获取客户端的随机数和tls版本，然后自己生成一个随机数和证书发送给客户端
- 客户端收到后验证证书，证书无效报错并且断开连接。证书有效，客户端就从证书中提取服务器公钥。并且生成一个预主密钥，相当一个密码本，使用公钥将加密这个密码本，发送给服务端。
- 服务端收到后，使用私钥解密，生成会话密钥。
- 客户端和服务端使用会话密钥进行对称加密通信，安全。
为什么要使用非对称加密？因为对称加密的密钥是共享的，一旦密钥泄露，就会导致数据泄露。非对称加密的密钥是不共享的，只有公钥和私钥，公钥可以公开，私钥只能自己持有。

不用domcontentloaded和onLoad 进行监听，用其他方式

将 JS 代码放在 <body> 末尾，解析完html后自动执行js
mutationObserver 监听dom 变化，直到指定dom出现后可以停止监听。
requestAnimationFrame +readyState 无事件监听，但需要轮询
- document.readyState 可返回：
- loading（仍在加载）
- interactive（DOM 解析完成，相当于 DOMContentLoaded）
- complete（所有资源加载完成，相当于 load）

js 复制代码

function checkDOMReady() {
  if (document.readyState === 'complete') {
    console.log("DOM 和所有资源已加载");
    // 执行业务逻辑
  } else if (document.readyState === 'interactive') {
    console.log("DOM 解析完成（类似 DOMContentLoaded）");
    // 执行业务逻辑
  } else {
    requestAnimationFrame(checkDOMReady); // 继续检查
  }
}
checkDOMReady();

从url 到页面渲染，详细讲整个过程

首先，进行url解析，检查地址是否合法，识别协议和端口号
接着，进行dns递归查询，按照浏览器缓存，操作系统缓存，路由缓存进行查询。如果没有命中，再由本地dns 服务器发起迭代查询，从根域名到顶级域名到权威域名服务器。最后获得ip地址，并且每次经过的节点都会进行逐级缓存。（下次访问时，优先查看ttl time to live 值是否过期）
然后，进行tcp 三次握手（如果是https 协议还要tls 握手）
成功建立连接后，客户端发送请求报文，服务器进行数据库查询，响应请求，接下来就是浏览器渲染机制的实现了。
当浏览器网络线程收到html 文档后，产生渲染任务，并且将其传递给渲染主线程的消息队列。在事件循环机制作用下，渲染主线程取出消息队列的渲染任务，开启渲染流程。
（渲染流程分为：html解析，样式计算，布局，分层，绘制，分块，光栅化和绘画。每个阶段输出都是下一个阶段的输入。）
- 1，进行html解析，解析过程遇到css解析css，遇到js执行js。这个时候，浏览器为了提升解析效率，在开始解析前会启动一个预解析线程 ，先将html外部css 和js 文件进行下载。这一步能够得到dom树和cssom树。
- 2，接下来是样式计算 。主线程遍历得到的dom树，依次从树的每个节点计算出他的最终样式（computed style）。最后得到一个带有样式的dom树
- 3，接着是布局，生成布局树 。布局阶段会遍历dom树的每个节点，计算节点位置，宽高等几何信息。大多数时候，dom树和布局树不是一一对应的。
- 4，下一步是分层，绘制，分块，光栅化，画 。主线程对整个布局树分成多层，再为每一层生成单独的绘制指令集，用来描述内容。完成绘制后，将每个图层绘制信息交给合成线程。合成线程先对每个图层分块，分成很多小区域。一般都从线程池拿取多个线程来完成分块工作。分块完成后，合成线程将块信息给GPU 进程，以极快速度完成光珊化。光珊化后，就是一块一块的位图。合成线程拿到每层每块的位图后，生成一个个指引信息。这时候就是最后画的阶段了。指引会标识每个位图应该画在屏幕哪个地方，以及考虑旋转、缩放等变形，最后呈现页面。

transform 效率高 ：因为 transform 既不会影响布局也不会影响绘制指令，它影响的只是渲染流程的最后一个「draw」阶段。由于 draw 阶段在合成线程中，所以 transform 的变化几乎不会影响渲染主线程。

如果主线程解析到link位置，此时外部的 CSS 文件还没有下载解析好，主线程不会等待，继续解析后续的 HTML。这是因为下载和解析 CSS 的工作是在预解析线程中进行的。这就是 CSS 不会阻塞 HTML 解析的根本原因。

如果主线程解析到script位置，会停止解析 HTML，转而等待 JS 文件下载好，并将全局代码解析执行完成后，才能继续解析 HTML。这是因为JS 代码的执行过程可能会修改当前的 DOM 树，所以 DOM 树的生成必须暂停。这就是 JS 会阻塞 HTML 解析的根本原因。

2.3.2 DOM树和渲染树有什么区别?

(1)构建目的

DOM 树（Document Object Model Tree）
- DOM 树主要是对 HTML 文档结构的一种抽象表示，它的目的是方便 JavaScript 等脚本语言对文档进行操作。通过 DOM 树，开发者可以访问、修改文档中的元素、属性和文本内容等。
渲染树（Render Tree）
- 渲染树是用于浏览器进行页面渲染的模型。它主要考虑了元素的可见性和布局信息，用于确定页面最终的视觉呈现，即哪些元素需要被绘制到屏幕上以及它们的位置、大小等信息。 (2)包含内容
DOM 树
- 包含了 HTML 文档中的所有元素节点、属性节点和文本节点。无论是可见的还是不可见的元素，只要在 HTML 文档中有定义，就会在 DOM 树中有对应的节点。
渲染树
- 只包含可见的元素以及用于布局这些可见元素的相关信息.**除了排除不可见元素（如display: none的元素）外，还会对一些伪元素（如::before、::after）进行特殊处理。**如果伪元素有实际的视觉效果（如添加了内容或者样式），它们会被包含在渲染树中，用于最终的页面绘制。 (3)结构差异
DOM 树
- 它的结构与 HTML 文档的结构紧密相关，基本是按照 HTML 标签的嵌套顺序来构建的。从根节点html开始，向下依次包含head、body等子节点，每个子节点又包含对应的标签节点。
渲染树
- 其结构可能与 DOM 树有所不同，因为它会根据元素的布局和可见性进行调整。 (4)更新频率和机制
DOM 树
- 可以通过 JavaScript 代码随时进行更新。
渲染树
- 通常是在 DOM 树更新后，或者 CSS 样式发生变化时进行更新。当需要重新计算页面布局或者绘制时，浏览器会根据新的 DOM 树和 CSS 样式重新构建或更新渲染树 。不过，浏览器会尽量避免不必要的渲染树更新，例如，通过比较新的 DOM 树和 CSS 样式与之前的状态，判断是否真的需要重新构建渲染树，以提高性能。

3.关于回流和重绘

3.1 什么是 reflow(回流)？

reflow 的本质就是重新计算 layout 树 。当进行了会影响布局树的操作后，需要重新计算布局树，会引发 layout。为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当 JS 代码全部完成后再进行统一计算。所以，改动属性造成的 reflow 是异步完成的。也同样因为如此，当 JS 获取布局属性时，就可能造成无法获取到最新的布局信息。浏览器在反复权衡下，最终决定获取属性立即 reflow。

3.2 什么是 repaint(重绘)？

repaint 的本质就是重新根据分层信息计算了绘制指令 。当改动了可见样式后，就需要重新计算，会引发 repaint。由于元素的布局信息也属于可见样式，所以 reflow 一定会引起 repaint。

3.3 回流与重绘的触发条件

3.3.1 回流的触发条件

触发条件：当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化。

以下这些操作会导致回流

添加或删除DOM元素:
当添加、删除、修改DOM元素时，会导致整个或部分页面的布局发生变化，从而触发回流。
修改元素的位置、尺寸或层级关系：
修改元素的位置、尺寸或层级关系（如改变元素的宽度、高度、margin、padding、top、left、z-index等）会导致元素重新布局，从而触发回流。
文字内容的变化：
当文字内容的变化导致元素尺寸发生变化时，会触发回流。例如，动态改变一个段落的文字内容，会导致段落元素重新计算并布局。
浏览器窗口的变化：
当浏览器窗口的大小变化时，需要重新计算并布局页面中的元素，从而触发回流。
获取某些元素的样式或者布局信息：
例如通过JavaScript获取元素的offsetWidth、offsetHeight、offsetTop、offsetLeft、scrollTop、scrollLeft等属性，这些操作会导致浏览器强制进行回流。

在触发回流的时候，由于浏览器染页面是基于流式布局的，所以当触发回流时，会导致周围的 DOM 元素重新排列，它的影响范围有两种:

全局范围: 从根节点开始，对整个渲染树进行重新布局
局部范围: 对渲染树的某部分或者一个渲染对象进行重新布局

4.3.2 重绘的触发条件

触发条件：当页面中某些元素的样式发生变化，但是不会影响其在文档流中的位置。

以下这些操作会导致重绘

修改元素的颜色、背景色、边框颜色等样式属性：
例如，将一个元素的背景色由红色改为蓝色，这样只会引发元素的重绘，而不会触发布局的改变。
修改元素的透明度：
当修改元素的透明度（opacity）时，会引发元素的重绘。
改元素的文本样式：
例如，修改元素的字体、字号、字重等文本样式属性，会触发元素的重绘。
添加或修改元素的阴影效果：
当元素的阴影效果发生变化时，会引发元素的重绘。
修改元素的visibility属性：
当修改元素的visibility属性为hidden或visible时，会引发元素的重绘。
注意：当触发回流时，一定会触发重绘，但是重绘不一定会引发回流

3.4 如何减少回流与重绘

浏览器优化机制: 浏览器针对回流和重绘，本身也具备一定的优化机制，但是仅是最基础的。

批量处理：浏览器会将多次的回流和重绘操作合并为一次，减少性能开销。
延迟回流：对于多次数量的DOM操作，浏览器会将它们缓存在一起，然后一次性进行回流处理，这样可以减少回流的次数。

减少回流与重绘的措施: 了解了回流与重绘的触发条件，我们可以尽量避免不该有的操作，减少回流与重绘，提高浏览器渲染性能

使用CSS动画代替JavaScript动画：
CSS动画是利用浏览器的硬件加速，性能更高效。尽量使用transform和opacity属性进行动画效果，避免使用会触发回流的属性，如width和height。
批量修改样式：
尽量避免频繁地修改元素的样式，可以将多个样式的修改集中到一次操作中，例如使用CSS的class进行批量修改。
使用文档碎片（Document Fragment）:
当需要频繁地操作DOM时，可以使用文档碎片来进行缓存，然后再一次性地将文档碎片添加到DOM树中，减少回流次数。
避免强制同步布局：
在读取布局相关的属性（如offsetTop、offsetLeft、clientWidth等）之前，先将其缓存起来，避免多次读取导致浏览器强制进行同步布局。
使用transform和position属性：
尽量使用transform属性进行元素的平移、旋转、缩放等操作，使用position属性进行定位，避免引起回流的属性，如top、left、width、height等。
避免频繁改变窗口大小：
改变窗口大小会触发回流，所以尽量避免频繁改变窗口大小。
使用节流和防抖技术：
对于一些频繁触发的事件（如scroll、resize），可以使用节流和防抖技术来控制事件的触发频率，减少回流和重绘。
使用translateZ触发GPU加速：
对于需要频繁变动的元素，例如动画元素，可以使用translateZ(0)触发GPU加速，减少回流和重绘。