一、网页资源加载优化
1、Chrome的5层优先级
在Chrome浏览器中，网络请求的优先级分成了5个等级：
- Highest 最高，如页面HTML资源和CSS文件；
- High 高，如正文图片请求资源；
- Medium 中等，如页面的业务JavaScript文件请求；
- Low 低，如内联的Base64资源，异步加载的JavaScript文件请求；
- Lowest 最低，如发送的统计请求；
»Chrome浏览器的开发者工具，在Network面板中可以看到每一个请求的优先级。
2、预加载资源的优先级
在页面上我们可以使用rel="prefetch"和rel="preload"对资源进行预加载，以提高页面性能，增强产品的用户体验。
这两种预加载的优先级是不一样的。
prefetch加载的是接下来页面可能会使用的资源，因此优先级最低，为Lowest。
preload加载的是本页即将要使用的资源，因此优先级要比prefetch高，但具体是多少，要看加载的资源的类型。
这个类型是as属性决定的，下面是一些类型示意。
<link rel="preload" href="main.js" as="script" />
<link rel="preload" href="myfont.ttf" as="font">
<link rel="preload" href="style.css" as="style" />
<link rel="preload" href="example.png" as="image" />
其中，JS、CSS和字体文件preload的优先级是High，而image类型的资源的优先级是Low，这个和页面中JS资源的加载不同，对于页面内直连的JS文件，其加载优先级是Medium。
3、改变资源加载的优先级
如果你希望调整preload预加载默认的优先级加载规则，可以使用fetchPriority属性进行重置。
例如某个在CSS文件中的图片非常重要，必须高优先级加载，在可以像下面这样设置
<link rel="preload" href="./important-source.png" as="image" fetchPriority="high" />
设置后，important-source.png这个图片资源的优先级就变成了High，而不是默认的Low。
fetchPriority属性还可以用在元素上来降低图片的请求优先级，例如：
<img src="example.png" fetchPriority="low" />
注意点: 虽然Chrome浏览器下的网络请求有5个等级，但是fetchPriority属性值可以设置的等级只有两个，Low或者High，除此之外还支持默认值auto，这三个值就是fetchPriority属性支持的所有值了
4、资源加载优先级的应用
通过调整或设置资源加载的优先级或者先后顺序，可以让页面重要的资源优先加载，让不重要的内容之后加载，以提高页面的访问体验。
二、CSS container容器查询
1、@container规则作用
@container规则，也称为@container查询，可以实时匹配指定为容器元素的尺寸，开发者可以基于不同的尺寸范围，对内部的元素进行特定的样式设置与布局实现
首先回顾下常用的媒体查询@media 例如：
@media (max-width:1024px) {
......
}
该规则中的CSS声明会在屏幕宽度小于1024px的时候执行。
<link rel="preload" href="image_small.png" as="image" media="(max-width: 600px)">
<link rel="preload" href="image-big.png" as="image" media="(min-width: 601px)">
也可以在 <link>标签中使用
而@container规则有些与之类似，只是匹配的尺寸对象不同。
@media匹配的是浏览器窗体，而@container匹配的是某个元素。
根据作用方式，可以总结为： @media查询适用于宏观布局，@container查询适用于微观布局。
2、容器尺寸单位
随着CSS容器查询一起出现的还有CSS容器查询单位，包括：cqw, cqh, cqi, cqb, cqmin 和 cqmax。
-
cqw: 表示容器查询宽度（Container Query Width）占比。1cqw等于容器宽度的1%。假设容器宽度是1000px，则此时1cqw对应的计算值就是10px。
-
cqh: 表示容器查询高度（Container Query Height）占比。1cqh等于容器高度的1%。
-
cqi: 表示容器查询内联方向尺寸（Container Query Inline-Size）占比。默认情况下，Inline-Size指的就是水平方向，对应的是宽度，因此，1cqi通常可以看成是容器宽度的1%。
-
cqb: 表示容器查询块级方向尺寸（Container Query Block-Size）占比。默认情况下，Block-Size指的就是垂直方向，对应的是高度，因此，1cqb通常可以看成是容器高度的1%。
-
cqmin: 表示容器查询较小尺寸的（Container Query Min）占比，例如容器尺寸是300px*400px，则100cqmin对应的是尺寸较小的宽度300px，而非高度。
-
cqmax: 表示容器查询较大尺寸的（Container Query Min）占比。
一般上讲，cqw, cqh、cqmin、cqmax单位和vw, vh、vmin、vmax单位语法和含义是一致的，只是一个是相对于容器尺寸，另外一个是相对于视区（ViewPort）尺寸
3、使用示例
例如需求是实现一个div元素内的文字的font-size字号随着宽度减小而减小，使用容器尺寸就可以很简单做到。
<div class="container">
<p>需求是一个div元素内的文字的font-size字号随着宽度减小而减小，使用容器尺寸就可以很简单做到。</p>
</div>
.container {
container-type: inline-size;
}
.container p {
font-size: clamp(.75rem, calc(100cqw / 40), 2rem);
text-align: center;
}
如果希望元素在某个尺寸范围内出现较为明显的布局或样式变化，那么就需要用到@container规则。
举个例子，还是上面那个字号变化的例子，如果希望容器宽度小于480px的时候左对齐，同时文字加粗变色，则可以使用如下所示的CSS实现
.container {
container-type: inline-size;
}
.container p {
font-size: clamp(.75rem, calc(100cqw / 40), 2rem);
text-align: center;
}
@container (max-width: 480px) {
.container p {
font-weight: bold;
color: red;
}
}
4、container属性
container属性是container-type和container-name这两个属性的缩写。
container-type上面已经演示过了，表示指向容器的类型，是水平方向的（对应宽度），还是包括垂直方向的（对应宽度和高度）。
语法如下：
container-type: normal;
container-type: size;
container-type: inline-size;
其中normal是默认值，表示不建立容器元素，size表示水平和垂直方向都建立，inline-size是只在水平方向建立。
container-name的作用是给容器元素命名，这个属性在页面中存在多个容器元素的时候很有用
假设如下CSS代码
@container (max-width: 480px) {
p {
font-weight: bold;
}
}
如果页面中存在多个容器元素，则这些元素中的 <p> 元素都会应用 font-weight:bold，但我们的可能就只有某一个容器元素才应用相关样式，此时container-name就很有作用了
.container-a {
container: aside / inline-size;
}
.container-b {
container: banner / inline-size;
}
@container banner (max-width: 480px) {
p {
font-weight: bold;
}
}
容器查询也可以支持使用大于小于号，因此，不超过480宽度的判断语法也可以写作
@container banner (width < 480px) {
p {
font-weight: bold;
}
}
容器查询还支持嵌套，例如
@container summary (min-width: 400px) {
@container (min-width: 800px) {
......
}
}
