渲染路径#
HTML 会边下载边执行
对于初始渲染，需要等待一些关键资源下载完毕，才能完成初始渲染:
- HTML 的一部分。
<head>元素中存在阻塞渲染的 CSS。<head>元素中会阻塞渲染的 JavaScript。
初始渲染，浏览器通常不会等待以下操作：
- 所有 HTML。
- 字体。
- Images.
<head>元素之外的非渲染阻塞 JavaScript（例如，放置在 HTML 末尾的<script>元素）。<head>元素之外的非渲染阻塞 CSS，或 media 属性值不适用于当前视口的 CSS。
CSS#
CSS 会阻塞渲染，但不是所有都会阻塞渲染，如：
注意：CSS 不阻塞渲染，不会影响资源下载，只是优先级较低。
<!-- 会阻塞 --><link href="style.css" rel="stylesheet" /> <!-- 满足 print 媒体功能时，会阻塞 --><link href="print.css" rel="stylesheet" media="print" /> <!-- 满足 min-width: 40em 媒体功能时，会阻塞 --><link href="other.css" rel="stylesheet" media="(min-width: 40em)" />资源阻止呈现并不一定意味着它会阻止浏览器执行任何其他操作。浏览器会尽可能提高效率，因此当浏览器发现需要下载 CSS 资源时，会请求该资源并暂停呈现，但仍会继续处理 HTML 的其余部分，并在此期间寻找其他工作。
JavaScript#
同步 JavaScript 会阻塞解析器:
注意：解析器阻塞资源实际上也会阻塞渲染。
因为 JavaScript 在执行时可能会更改 DOM 或 CSSOM。因此，在知道请求的 JavaScript 对网页 HTML 的全部影响之前，浏览器无法继续处理其他资源。
阻塞解析器可能会带来巨大的性能开销，远远超过仅阻塞渲染所带来的开销。因此，浏览器会尝试使用辅助 HTML 解析器（称为预加载扫描器）在主 HTML 解析器被阻塞时下载即将使用的资源，以降低此开销。
https://web.dev/learn/performance/understanding-the-critical-path?hl=zh-cn
https://web.dev/articles/critical-rendering-path/render-blocking-css?hl=zh-cn
Link element#
rel: 它的值必须是一组无序的、唯一的、用空格隔开的关键字。例：rel="stylesheet"、rel="preload stylesheet"等。
rel=“preload”#
当 rel 的值是 preload 时，as 为必填。
以更高的优先级去下载和缓存资源，不会触发事件。
rel=“prefetch”#
用户将来可能需要这个资源，浏览器在空闲时间时（优先级低）下载和缓存资源。
HTMLImageElement (<img/>)#
src#
相关资料：
获取图片的要应用的元素：
- 父节点是
<picture />时，获取<img />之前的<source />兄弟元素 <img />
获取应用元素的 src：
srcset 格式: https://example.com 2x、https://example.com 300w
其中 2x 为 devicePixelRatio（物理像素分辨率与CSS 像素分辨率之比）, 当浏览器的 devicePixelRatio 于该值匹配时，使用该图片。
其中 300w 为图像的固有尺寸
sizes 格式: (max-height: 500px) 1000px
其中 (max-height: 500px) 为媒体条件，意思为视口不高于 500px，使用该图片。可以不写，默认为 true。
其中 1000px 为资源大小的值，
Background#
background-clip#
根据属性对背景进行裁剪，超出部分不渲染。
border-box: 默认值，将背景裁剪到边框外沿。
padding-box: 将背景裁剪到内边距外沿。
content-box: 将背景裁剪到内容区外沿。
background-image#
在绘制时，图像以 z 方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”(最后渲染它)，background-color 会在它们之下绘制。
例子：
background-image: url(A), url(B);background-color: red;
z轴:最高 A B red最低background-origin#
指定背景图片 background-image 属性的原点位置。
border-box：以边框的(0， 0)（即左上角）位置为图像的渲染原点。
padding-box：默认值，以内边距的(0， 0)位置为图像的渲染原点。
content-box：默认值，以内容区的(0， 0)位置为图像的渲染原点。
background-position#
百分比：
给定背景图像位置的百分比偏移量是相对于容器的。例：
(container width - image width) * (position x%) = (x offset value)(container height - image height) * (position y%) = (y offset value)
// 假设我们有一个 300px 宽的图像，我们在一个 100px 宽的容器中使用它
// -25%。结果：向右偏移 50px，即图像的原点在容器的中心。(100px - 300px) * -25% = 50px(100px - 300px) * 0% = 0(100px - 300px) * 50% = -100px(100px - 300px) * 100% = -200px// 120%。结果：向左偏移 100px，即图像的最右侧在容器的中心。(100px - 300px) * 120% = -250pxbackground-repeat#
space: 尽可能最少数量的图像填补，允许有空白。有两个图像以上时，background-position 属性会被忽略。
round: 用图像填补所有空间，允许压缩图片。
background-size#
位图: 一定有固有尺寸与固有比例。
矢量图: 可能两者都有(width-height viewBox)，也可能只有一个， 也可能都没有（游览器会补充一个300*150的大小）。
渐变: 视为只有固有尺寸或者只有固有比例的图片。
cover: 尽可能大的缩放背景图像并保持图像的宽高比例来填满空间。不会有空白，超出时裁剪掉。
contain: 尽可能的缩放背景并保持图像的宽高比例来填满空间。可能会有空白。
auto auto:
- 图像有固有尺寸: 使用这个固有尺寸。
- 图像有一个长度但是没有比例: 使用此长度与背景区相应的长度。
- 图像有一个长度与比例: 由此长度与比例计算大小。
- 图像没有固有尺寸与固有比例: 效果同
contain。
auto 和 non auto:
指定长度的使用指定值。
- 图像有固有比例: 未指定的长度由指定值与固有比例计算。
- 图像没有固有比例: 未指定的长度使用图像相应的固有长度，没有固有长度，使用背景区相应的长度。
相关知识#
AffineTransform#
一个表示二维仿射变换的类，用于执行从 2D 坐标到其他 2D 坐标的线性映射。它通过平移、缩放、旋转和错切等操作构造变换，并使用一个 3×3 矩阵表示变换过程。
kurbo Affine: [a, b, c, d, e, f]
下面公式为 (x, y) 经过变换生成新的坐标：
Scale 缩小 (s_x, s_y) 倍#
Affine::scale(0.5, 0.5) * Affine
Translate 平移 (s_x, s_y)#
Affine::translate(0.5, 0.5) * Affine
Rotate 旋转 (a)#
Affine::rotate(a) * Affine