测试文章12345687

一、网页资源加载优化

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) {
    ......
  }
}