当前位置：首页 > news >正文

CSS系列（36）-- Containment详解

news 来源：原创 2025/5/19 5:56:59

前端技术探索系列：CSS Containment详解 ⚡

致读者：探索性能优化的艺术 👋

前端开发者们，

今天我们将深入探讨 CSS Containment，这个强大的性能优化特性。

基础概念 🚀

包含类型

/* 布局包含 */
.layout-contain {contain: layout;
}/* 绘制包含 */
.paint-contain {contain: paint;
}/* 尺寸包含 */
.size-contain {contain: size;
}/* 完全包含 */
.strict-contain {contain: strict;  /* 等同于 size layout paint */
}/* 内容包含 */
.content-contain {contain: content;  /* 等同于 layout paint */
}

包含上下文

/* 创建新的包含上下文 */
.container {contain: layout;display: grid;grid-template-columns: repeat(3, 1fr);
}/* 样式隔离 */
.isolated {contain: style;/* 防止样式泄漏 */color: inherit;font-family: inherit;
}/* 组合使用 */
.optimized-section {contain: layout paint;overflow: auto;height: 100vh;
}

高级特性 🎯

布局优化

/* 列表优化 */
.virtual-list {contain: strict;height: 500px;overflow-y: auto;
}.list-item {contain: layout;height: 50px;
}/* 网格优化 */
.grid-container {contain: layout;display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}.grid-item {contain: size layout;aspect-ratio: 1;
}

渲染优化

/* 卡片容器 */
.card-container {contain: paint;overflow: hidden;border-radius: 8px;
}/* 动画优化 */
.animated-element {contain: paint;will-change: transform;transition: transform 0.3s;
}/* 固定尺寸元素 */
.fixed-size {contain: size;width: 200px;height: 200px;
}

实际应用 💫

虚拟滚动

/* 虚拟滚动容器 */
.virtual-scroll {contain: strict;height: 100vh;overflow-y: auto;
}.scroll-content {contain: size layout;height: calc(var(--total-items) * var(--item-height));
}.visible-items {contain: layout;position: absolute;top: var(--scroll-offset);width: 100%;
}

模态框

/* 模态容器 */
.modal-container {contain: layout paint;position: fixed;inset: 0;z-index: 1000;
}.modal-backdrop {contain: strict;position: absolute;inset: 0;background: rgba(0, 0, 0, 0.5);
}.modal-content {contain: content;position: relative;margin: auto;max-width: 600px;max-height: 80vh;overflow: auto;
}

性能监控 ⚡

性能标记

/* 性能追踪 */
.performance-track {contain: strict;content-visibility: auto;contain-intrinsic-size: 0 500px;
}/* 延迟加载 */
.lazy-section {contain: layout paint;content-visibility: auto;contain-intrinsic-size: 300px;
}

优化策略

/* 选择性包含 */
.conditional-contain {contain: layout paint style;
}@media (max-width: 768px) {.conditional-contain {contain: none;  /* 移动端禁用包含 */}
}/* 性能监测 */
.monitored-section {contain: strict;transition: background-color 0.3s;
}.monitored-section:hover {background-color: #f0f0f0;
}

最佳实践建议 💡

性能优化
- 合理使用包含
- 避免过度包含
- 监控性能
- 优化策略
布局考虑
- 组件隔离
- 重排控制
- 渲染优化
- 响应式设计
开发建议
- 模块化设计
- 性能测试
- 文档完善
- 维护性考虑
调试技巧
- 性能分析
- 渲染监控
- 问题定位
- 优化验证

写在最后 🌟

CSS Containment为我们提供了强大的性能优化能力，通过合理运用这一特性，我们可以显著提升Web应用的性能表现。

进一步学习资源 📚

Containment规范
性能优化指南
调试工具集合
实战案例分析

如果你觉得这篇文章有帮助，欢迎点赞收藏，也期待在评论区看到你的想法和建议！👇

终身学习，共同成长。

咱们下一期见

💻

CSS系列（36）-- Containment详解

前端技术探索系列：CSS Containment详解 ⚡ 致读者：探索性能优化的艺术 👋 前端开发者们， 今天我们将深入探讨 CSS Containment，这个强大的性能优化特性。基础概念 🚀 包含类型 /* 布局包含 */ .layo…...

编程日记 2025/5/19 5:56:59

golang，多个proxy拉包的处理逻辑

在Go语言中，当你设置了多个代理（GOPROXY）时，Go工具链会按照你设置的顺序尝试每个代理。如果第一个代理失败，它会尝试下一个代理，直到成功获取到模块或者所有代理都尝试失败。最后，如果所有代理都…...

编程日记 2025/5/19 5:03:24

Vue使用Tinymce 编辑器

目录一、下载并重新组织tinymce结构二、使用三、遇到的坑一、下载并重新组织tinymce结构下载 npm install tinymce^7 or yarn add tinymce^7重构目录在node_moudles里找到tinymce文件夹，把里面文件拷贝一份放到public下，如下： -- pub…...

编程日记 2025/5/19 5:37:16

神经网络-AlexNet

AlexNet是在2012年的ImageNet竞赛后，整理发表的文章，也是对CNN网络的衍生。网络结构 AlexNet网络结构如下图所示，网络分为了上下两部分，对应两个不同的GPU训练，可以更好的利用GPU算力。只有在特殊的网络层后&#x…...

编程日记 2025/5/19 5:10:16

《人工智能：洞察材料微观与宏观性能关系的神奇之眼》

在材料科学的广袤天地里，一个前沿且充满魅力的课题正吸引着全球科研人员的目光——如何借助人工智能的强大力量，精准模拟材料微观结构与宏观性能之间那错综复杂的关系。这不仅是解开材料性能之谜的关键钥匙，更是推动从航空航天到电子芯片等众…...

编程日记 2025/5/19 4:49:17

count(1)、count(_)与count(列名)的区别？

大家好，我是锋哥。今天分享关于【count(1)、count(_)与count(列名)的区别？】面试题。希望对大家有帮助； count(1)、count(_)与count(列名)的区别？ 1000道互联网大厂Java工程师精选面试题-Java资源分享网在 SQL 中&#xff0c…...

编程日记 2025/5/19 5:41:43

Docker 镜像加速访问方案

在数字化时代，Docker以其轻量级和便捷性成为开发者和运维人员的首选容器技术。然而自2023年5月中旬起，Docker Hub 的访问速度较慢或不稳定，这对依赖Docker Hub拉取镜像的用户来说无疑是一个挑战。本文将提供 Docker Hub 访问的一系列替代方案…...

编程日记 2025/5/19 5:01:53

菜鸟带新鸟——基于EPlan2022的部件库制作（3D）

设备逻辑的概念： 可在布局空间中和其它对象上放置对象。可将其它对象放置在 3D 对象上。已放置的对象分到组件的逻辑结构中。将此属性的整体标识为设备逻辑。可使用不同的功能创建和编辑设备逻辑。设备的逻辑定义定义 / 旋转 / 移动 / 翻转：组…...

编程日记 2025/5/19 5:24:45

笔记工具--MD-Markdown的语法技巧

MD格式，全称为Markdown格式，是一种轻量级标记语言文件，主要用于创建格式化文本。以下是对MD格式的详细解释： 一、定义与特点定义：MD文件是一种纯文本格式的文件，使用简单的符号或语法来标记标题、列表、…...

编程日记 2025/5/17 7:57:08

【ES6复习笔记】生成器（11）

什么是生成器函数生成器函数是一种特殊的函数，它可以在执行过程中暂停并保存当前状态，然后在需要时恢复执行。生成器函数通过 yield 关键字来实现暂停和恢复执行的功能。生成器函数的基本用法定义生成器函数：使用 function* 关键字来定…...

编程日记 2025/5/19 5:31:25

【解决报错】AttributeError: ‘NoneType‘ object has no attribute ‘group‘

学习爬虫时，遇到如下报错： 报错原因： 正则表达式的 search 或 finditer 方法没有找到任何匹配项，可能是换行符处理不当等。解决方法如下： 在正则表达式末尾加上re.S即可，re.S是一个编译标志&#xff0c…...

编程日记 2025/5/19 5:28:04

UE5.3 C++ Ceiusm中的POI 制作3DUI 结合坐标转化

一.核心思路WidgetComponent CesiumGloberAnchor 二.先制作POI 创建C Actor来制作，APOI。直接上代码 #pragma once#include "CoreMinimal.h" #include "GameFramework/Actor.h" #include "CesiumGlobeAnchorComponent.h" #includ…...

编程日记 2025/5/19 5:08:33

机器学习系列（一）——K-近邻算法

1. 算法定义 KNN 算法属于基于实例的机器学习方法。在对未知数据进行分类或回归之前，我们不需要对数据进行显式的训练或建立复杂的模型。它的核心思想是：对一个新的样本点，寻找在特征空间上与其最相似的 K 个已知数据点，采取“投…...

编程日记 2025/5/19 5:14:50

Android unitTest 单元测试用例编写(初始)

文章目录了解测试相关库导入依赖库新建测试文件示例执行查看结果网页结果其他本片讲解的重点是unitTest，而不是androidTest哦了解测试相关库 androidx.compose.ui:ui-test-junit4: 用于Compose UI的JUnit 4测试库。它提供了测试Compose UI组件的工具和API。 and…...

编程日记 2025/5/19 4:57:56

uni-app 跨端开发精美开源UI框架推荐

🎀🎀🎀uni-app 跨端开发系列 🎀🎀🎀 一、uni-app 组成和跨端原理二、uni-app 各端差异注意事项三、uni-app 离线本地存储方案四、uni-app UI库、框架、组件选型指南五、uni-app 蓝牙开发六、uni-app …...

编程日记 2025/5/18 8:42:29

【微服务】微服务之Feign 与 Ribbon

文章目录强烈推荐引言优点Feign示例什么是Ribbon？Ribbon 的优点Netflix Feign 和 Ribbon整合Feign 与 Ribbon 的关系Feign 与 Ribbon 结合使用的示例配置文件（application.yml）说明： Feign 与 Ribbon 结合使用的应用场景1. 动态服…...

编程日记 2025/5/18 14:31:37

【C语言】成绩等级制

将成绩分为A、B、C、D、E等级。具体的等级划分如下： A：90分及以上B：80分到89分C：70分到79分D：60分到69分E：60分以下 #include <stdio.h> int main() {float score 0;printf("请输入学生成绩&a…...

编程日记 2025/5/19 5:10:16

Flutter 插件开发入门

1、初识 Flutter Plugin Flutter 的插件类似于我们在 Android 中说的第三方库，通过使用插件，可以借助插件中的代码实现一些额外功能。 Flutter 的插件以 package 的形式存在，使用 package 的目的是为了达到模块化，可以让代码被共…...

编程日记 2025/5/18 10:01:16

2024.12.25在腾讯云服务器上使用docker部署flask

2024.12.25在腾讯云服务器上使用docker部署flask 操作系统：Ubuntu 根据腾讯云的说明文档安装 Docker 并配置镜像加速源，注意需要安装腾讯云的加速源，使用官网的加速源连接极其不稳定，容易导致运行失败。使用哪个公司的云服务器就…...

编程日记 2025/5/19 5:51:37

2024 年12月英语六级CET6听力原文(Lecture部分)

2024 年12月英语六级CET6听力原文(Long Conersation和Passage) 1 牛津大学关于普遍道德准则的研究及相关观点与建议译文 2 食物颜色对味觉体验及大脑预期的影响译文 3 财务资源对意义与幸福之间关系的影响研究译文...

编程日记 2025/5/19 5:28:04

centos 释放系统预留内存并关闭Kdump服务

背景：Kdump是Linux系统的一种内核崩溃转储机制，它允许在系统发生内核崩溃（例如内核panic）时，捕获内存的转储信息，从而帮助事后分析故障原因。该过程需要一块预留内存（称为crashkernel内存&#…...

编程日记 2025/5/19 5:06:33

基于WEB的房屋出租管理系统设计

摘要随着城市化程度的推进，越来越多的人涌入城市，同时也带来的旺盛的租房需求，传统的房屋出租管理依赖人工记录的方式难以满足人们对房屋出租管理的需求。因此，本文根据房屋出租信息化的需求设计一款基于房屋出租的管理系统。…...

编程日记 2025/5/19 5:34:19

云边端架构的优势是什么？面临哪些挑战？

一、云边端架构的优势降低网络延迟：在传统集中式架构中，数据需传输到云计算中心处理，导致网络延迟较高。而云边端架构将计算和存储推向边缘设备，可在离用户更近的地方处理数据，大大降低了网络延迟，提升了用…...

编程日记 2025/5/19 5:11:56

clickhouse解决suspiciously many的异常

1. 问题背景 clickhouse安装在虚拟机上，持续写入日志时，突然关机，然后重启，会出现clickhouse可以正常启动，但是查询sql语句，提示suspiciously many异常，如图所示 2. 问题修复 touch /data/cl…...

编程日记 2025/5/19 5:32:48

爬虫 APP 逆向 ---＞ shopee(虾皮) 电商

shopee 泰国站点：https://shopee.co.th/ shopee 网页访问时，直接弹出使用 app 登录查看，那就登录 shopee 泰国站点 app。手机抓包：分类接口接口：https://mall.shopee.co.th/api/v4/pages/get_category_tree 请求参…...

编程日记 2025/5/19 5:43:14

用例图和活动图的区别与联系

在软件开发过程中，需求分析是至关重要的一步。为了更好地理解和描述系统的功能需求，开发人员通常会使用各种图形化工具。其中，用例图和活动图是两种非常常用的工具。虽然它们都用于描述系统的行为，但各自具有不同的特点和适用场景…...

编程日记 2025/5/19 5:16:24

接口请求中调试可以看到Origin，其具体的作用

接口请求中带 Origin 是浏览器在跨域请求时自动添加的一个 HTTP 请求头，用于标识请求的来源（源）。Origin 头的主要作用是支持跨域资源共享（CORS）和增强安全性。 Origin 的含义 Origin 包含发起请求的源信息&#xff0…...

编程日记 2025/5/19 5:38:40

知识图谱+大模型：打造全新智慧城市底层架构

在数字化时代，智慧城市的建设正迎来新一轮的变革。本文将探讨如何结合知识图谱和大模型技术，构建智慧城市的全新底层架构，以应对日益增长的数据量和复杂性，提升城市管理的智能化水平。知识图谱：智慧城市的知识库知识…...

编程日记 2025/5/19 4:38:50

Android基于Path的addRoundRect，Canvas剪切clipPath简洁的圆形图实现，Kotlin（2）

Android基于Path的addRoundRect，Canvas剪切clipPath简洁的圆形图实现，Kotlin（2） import android.content.Context import android.graphics.BitmapFactory import android.graphics.Canvas import android.graphics.Path import a…...

编程日记 2025/5/16 10:03:00

计算机图形学知识点汇总

一、计算机图形学定义与内容 1.图形图形分为“图”和“形”两部分。其中，“形”指形体或形状，存在于客观世界和虚拟世界，它的本质是“表示”；而图则是包含几何信息与属性信息的点、线等基本图元构成的画面，用于表达…...

编程日记 2025/5/11 17:34:33

【EtherCATBasics】- KRTS C++示例精讲（2）

EtherCATBasics示例讲解目录 EtherCATBasics示例讲解结构说明代码讲解项目打开请查看【BaseFunction精讲】。结构说明 EtherCATBasics：应用层程序，主要用于人机交互、数据显示、内核层数据交互等； EtherCATBasics.h ： 数据定义…...

编程日记 2025/5/17 15:20:11

AI 简史：从神经元到现代大模型

AI 简史：从神经元到现代大模型人工智能 (AI) 和深度学习 (DL) 在过去的几十年中飞速发展，推动了计算机视觉、自然语言处理和机器人等领域的进步。今年的诺贝尔物理学奖更是颁给了美国科学家约翰霍普菲尔德 (John Hopfield）和英国科学家杰弗…...

编程日记 2025/5/18 8:54:13

Kotlin入门到深入加强(1):基本介绍和第一个程序

吧， 一.关于本章和Kotlin 本章内容如要简单介绍一下Kotlin和创建并执行第一个Kotlin程序什么是Kotlin,优势是什么,它和JAVA的关系又是什么 Kotlin是一种静态类型的编程语言，它运行在Java虚拟机上，并且可以与现有的Java代码无缝集成。Kotl…...

编程日记 2025/5/19 4:30:57

走进 Web3：探索分布式网络的未来

随着互联网的不断演变，我们正站在一个全新阶段的门槛上——Web3。它是对传统互联网（Web2）的一次深刻反思与升级，标志着一个去中心化、更加自主的数字世界的到来。Web3不仅仅是技术的革新，更代表着对互联网价值体系的根…...

编程日记 2025/5/19 5:13:06

信管通低代码信息管理系统应用平台

目前，国家统一要求事业单位的电脑都要进行国产化替代，替代后使用的操作系统都是基于linux的，所有以前在WINDOWS下运行的系统都不能使用了，再者，各单位的软件都很零散，没有统一起来。需要把日常办公相关的软…...

编程日记 2025/5/18 0:10:58

C语言从入门到放弃教程

C语言从入门到放弃 1. 介绍1.1 特点1.2 历史与发展1.3 应用领域 2. 安装2.1 编译器安装2.2 编辑器安装 3. 第一个程序1. 包含头文件2. 主函数定义3. 打印语句4. 返回值 4. 基础语法4.1 注释4.1.1 单行注释4.1.2 多行注释 4.2 关键字4.2.1 C语言标准4.2.2 C89/C90关键字&#xf…...

编程日记 2025/5/16 14:18:42

硬件设计：RS232电平标准

RS232是一种常用的串行通信接口标准，主要用于计算机和外部设备之间的数据传输。以下是RS232电平标准的详细介绍： 1. 电气特性： 信号电平： 逻辑1 (MARK)：-3V到-15V之间。通常，-5V到-15V之间为有效的逻辑1。…...

编程日记 2025/5/18 16:34:38

前端初学基础

一.Web开发前端三件 HTML ，页面展现 CSS，样式 JS(JavaScript),动起来二，HTML 1.HTML概念网页，网站中的一个页面，网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，网站就…...

编程日记 2025/5/16 19:08:26

在 CentOS 7 上安装 Node.js 20 并升级 GCC、make 和 glibc

在 CentOS 7 上安装 Node.js 20 并升级 GCC、make 和 glibc 📖 前言在 CentOS 7 上使用 NVM 安装 Node.js 后，可能会遇到如下问题： node: /lib64/libm.so.6: version GLIBC_2.27’ not found (required by node) node: /lib64/libc.so.6:…...

编程日记 2025/5/18 10:18:31

mac中idea菜单工具栏没有git图标了

1.右击菜单工具栏 2.选中VCS，点击添加 3.搜索你要的工具，选中点击确定就添加了 4.回到上面一个界面，选中你要放到工具栏的工具，点击应用就好了 5.修改图标，快捷键或者右击选中编辑图标 6.选择你要的图标就好了...

编程日记 2025/5/14 18:08:37

C++简明教程（10）（初识类）

类的教程 C 类的完整教程 C 中，类（class）是面向对象编程的核心概念，用于定义对象的属性（数据成员）和行为（成员函数）。本教程将带你从零开始，循序渐进地学习如何定义和使…...

编程日记 2025/5/19 3:49:06

微机接口课设——基于Proteus和8086的打地鼠设计（8255、8253、8259）

原理图设计汇编代码 ; I/O 端口地址定义 IOY0 EQU 0600H IOY1 EQU 0640H IOY2 EQU 0680HMY8255_A EQU IOY000H*2 ; 8255 A 口端口地址 MY8255_B EQU IOY001H*2 ; 8255 B 口端口地址 MY8255_C EQU IOY002H*2 ; 8255 C 口端口地址 MY8255_MODE EQU IOY003H*2 ; …...

编程日记 2025/5/15 9:08:11

ctfshow-jwt

将信息进行安全的封装，以json的方式传递三部分分别是: Header { typ: JWT token类型 alg: HS256 算法名称 } 将这个信息进行base64加密，构成了第一部分 payload载荷，存放主要信息的地方 { "sub": 1234567890, 标准中注册的…...

编程日记 2025/5/12 8:57:33

植物大战僵尸融合版，真无双版，喵版，抽卡版，杂交版v3

我用夸克网盘分享了「植物大战僵尸」链接： https://pan.quark.cn/s/11a45054a4da 融合版‌的作者为B站up主蓝飘飘fly。该版本在原版植物基础上创新地将两种不同的植物种植在一起进行融合，创造出独特的游戏体验‌。‌抽卡版、喵版、无双版是由B站UP主【时…...

编程日记 2025/5/16 3:20:50

将Minio设置为Django的默认Storage（django-storages）

这里写自定义目录标题前置说明静态文件收集静态文件使用django-storages来使Django集成Minio安装依赖settings.py测试收集静态文件测试媒体文件前置说明静态文件 Django默认的Storage是本地，项目中的CSS、图片、JS都是静态文件。一般会将静态文件放到一个单独…...

编程日记 2025/5/10 13:09:58