当前位置：首页 > 编程日记 > 正文

CSS局限属性contain：优化渲染性能的利器

编程日记 2024-02-02 15:11:24

CSS局限属性contain：优化渲染性能的利器

在网页开发中，优化渲染性能是一个重要的目标。CSS局限属性contain是一个强大的工具，可以帮助我们提高网页的渲染性能。本文将介绍contain属性的基本概念、用法和优势，以及如何使用它来优化网页的渲染过程。

css-300x197

什么是contain属性？

contain属性是CSS中的一个新属性，它用于定义元素的渲染边界。通过使用contain属性，我们可以告诉浏览器某个元素是否独立于其它元素进行渲染，从而优化渲染性能。contain属性有四个可能的值：none、strict、content和size。

none：默认值，表示元素不具有任何渲染优化。它的子元素和后代元素可能会影响整个渲染树。
strict：表示元素的样式和布局不会受到其子元素和后代元素的影响。这可以提高渲染性能，特别是在大型网页中。
content：表示元素的样式和布局不会受到其子元素的影响，但会受到后代元素的影响。这对于具有复杂结构的元素很有用。
size：表示元素的样式和布局不会受到其子元素和后代元素的影响，同时还会告诉浏览器元素的尺寸不会改变。这对于具有已知尺寸的元素非常有用。

使用contain属性优化渲染性能

通过使用contain属性，我们可以精确地控制元素的渲染边界，从而提高渲染性能。下面是一些使用contain属性的示例：

使用strict值：假设我们有一个具有复杂结构的元素，其子元素经常发生变化。在这种情况下，我们可以将contain属性设置为strict，以告诉浏览器该元素的样式和布局不会受到其子元素的影响。这样可以减少浏览器重新计算样式和布局的次数，提高性能。
```
.container {
  contain: strict;
}
```
使用size值：对于已知尺寸的元素，我们可以将contain属性设置为size，以告诉浏览器该元素的尺寸不会发生改变。这样可以减少浏览器重新计算布局的次数，进一步提高性能。
```
.box {
  contain: size;
  width: 200px;
  height: 200px;
}
```
使用content值：有时候，我们希望某个元素的样式和布局不受其子元素的影响，但受到后代元素的影响。在这种情况下，我们可以将contain属性设置为content。
```
.box {
  contain: size;
  width: 200px;
  height: 200px;
}
```

兼容性和注意事项

尽管contain属性对于优化渲染性能非常有用，但它的兼容性并不完美。目前，contain属性的支持主要集中在现代浏览器上。在使用contain属性之前，务必先进行兼容性检查，并根据实际情况决定是否使用。

另外，需要注意的是，contain属性并不是万能的解决方案。在使用contain属性时，我们仍然需要注意其他性能优化技术，如避免过度渲染、减少布局回流等的操作。综合运用多种技术手段，才能最大程度地提升网页的渲染性能。

总结

CSS的contain属性是一个强大的工具，可以帮助我们优化网页的渲染性能。通过精确控制元素的渲染边界，我们可以减少浏览器重新计算样式和布局的次数，提高性能。然而，需要注意的是，contain属性的兼容性有限，且它并非解决所有性能问题的万能方案。在使用contain属性时，我们应综合考虑其他性能优化技术，以实现最佳的渲染性能。

CSS服务器网络算法数据库

https://www.dkcj.cn/info/1228.html

【Mongdb之数据同步篇】什么是Oplog、Mongodb 开启oplog，java监听oplog并写入关系型数据库、Mongodb动态切换数据源

oplog是local库下的一个固定集合，Secondary就是通过查看Primary 的oplog这个集合来进行复制的。每个节点都有oplog，记录这从主节点复制过来的信息，这样每个成员都可以作为同步源给其他节点。Oplog 可以说是Mongodb Replication的纽带了。

编程日记2024/09/26 16:30:42

Windows下安装和配置Redis

下载版本Redis-x64-5.0.14.1.zip。(可能需要开代理)

编程日记2024/06/06 15:30:05

TCP协议-TCP连接管理

TCP协议是 TCP/IP 协议族中一个非常重要的协议。它是一种面向连接、提供可靠服务、面向字节流的传输层通信协议。TCP（Transmission Control Protocol，传输控制协议）。

编程日记2024/04/06 22:30:02

消息响应也是同理，这种带端口的消息发送方式，其实就是UDP协议，UDP简单粗暴，但是UDP存在很多问题，所以我们需要设计一个稳定可靠的协议，TCP协议，首先，网络是不稳定的，我们发送的消息很有可能会在中途丢失，所以需要设置重试机制，当消息发送失败时重新发送，为了判断是否成功，还需要要求接收方收到消息后，必须发送确认消息，这样就可以保证消息必达，另外大段的内容发送，很容易造成部分丢失，导致全部内容都要重新发送，于是我们可以将数据分包，分成多个包发送。到这，也行你会发现了，演示中的IP地址是怎么设置的呢？

编程日记2024/04/04 23:30:02

ON DUPLICATE KEY UPDATE 导致mysql自增主键ID跳跃增长

具体解决方案可以根据项目来选择，如果项目不大，可以考虑1和2。如果不考虑高并发问题，可以考虑3。

编程日记2024/03/24 16:30:03

Linux下netstat命令详解&&netstat -anp | grep 讲解

Netstat是控制台命令,是一个监控TCP/IP网络的非常有用的工具，它可以显示路由表、实际的网络连接以及每一个网络接口设备的状态信息。Netstat用于显示与IP、TCP、UDP和ICMP协议相关的统计数据，一般用于检验本机各端口的网络连接情况。

编程日记2024/03/17 22:00:03

Linux命令——根据端口号查进程

查出的数据第二列（16615）是elasticsearch的进程号。通常我们会根据端口号查进程号，或者通过进程号查端口号。linux环境下，我们常常会查询进程号pid。最常用ps -ef |grep xx。根据端口port查进程。根据端口port查进程。根据进程pid查端口。根据进程pid查端口。

编程日记2024/03/17 22:00:03

mysql唯一索引与null

根据NULL的定义，NULL表示的是未知，因此两个NULL比较的结果既不相等，也不不等，结果仍然是未知。根据这个定义，多个NULL值的存在应该不违反唯一约束，所以是合理的，在oracel也是如此。在mysql 的innodb引擎中，是允许在唯一索引的字段中出现多个null值的。有上面的表和数据可以看出，查询多条数据。

编程日记2024/03/17 00:30:04

Linux搜索文件&搜索文件名&替换文件内容

locate是Linux系统提供的一种快速检索全局文件的系统命令，它并不是真的去检索所以系统目录，而是检索一个数据库文件locatedb（Ubuntu系置/var/cache/locate/locatedb），该数据库文件包含了系统所有文件的路径索引信息，所以查找速度很快。time结尾的选项，其单位为天，min结尾的选项其单位为分钟，这些选项的值都为一个正负整数，如+7,表示，7天以前被访问过的文件，-7表示7天以内被访问过的文件，7表示恰好7天前被访问的文件。：快速返回某个指定命令的位置信息。

编程日记2024/03/07 23:00:03

详解mybatis的insert，update，delete返回值

为什么要提数据的事呢，是因为据说这个save返回的就是插入的数据的条数。但是遗憾的是，我们的这个user怎么能没有id呢，没有id有怎么查，怎么删，怎么改。进来的是没有id的user，出去的是有id的user，真是太厉害了，没想到不仅把返回值改变了，连参数都发生了改变，真是太神奇了。keyProperty=“id” 这是id就是绑定的id，那我就疑惑了，这绑定的哪个id啊。这样一搞，如果插入成功的话返回的是1，如果不成功的话返回的是-1。我让你删id是222222的，我还没创建呢，看你怎么删。

编程日记2024/03/06 21:30:04

MySQL主从复制（基于binlog日志方式）

主从复制，是用来建立一个和主数据库完全一样的数据库环境，称为从数据库；主数据库一般是准实时的业务数据库。主从复制的作用1.做数据的热备，作为后备数据库，主数据库服务器故障后，可切换到从数据库继续工作，避免数据丢失。2.架构的扩展。业务量越来越大，I/O访问频率过高，单机无法满足，此时做多库的存储，降低磁盘I/O访问的频率，提高单个机器的I/O性能。3.读写分离，使数据库能支撑更大的并发。a.从服务器可以执行查询工作(就是我们常说的读功能)，降低主服务器压力;（主库写，从库读，降压）

编程日记2024/02/28 22:30:04

Java之网络通信框架mina

mina是一个基于java nio的网络通信框架。主要屏蔽了网络通信的一些细节，对Socket进行封装，并且是NIO的一个实现架构，可以帮助我们快速的开发网络通信，常用于游戏的开发、中间件服务端的程序中。Apache的Mina（Multipurpose Infrastructure Networked Applications）是一个网络应用框架，可以帮助用户开发高性能和高扩展性的网络应用程序；它提供了一个抽象的、事件驱动的异步API，使。

编程日记2024/02/24 16:00:03

Math: Math.atan() 与 Math.atan2() 计算两点间连线的夹角

Math.atan2()函数返回点(x,y)和原点(0,0)之间直线的倾斜角.那么如何计算任意两点间直线的倾斜角呢?只需要将两点x,y坐标分别相减得到一个新的点(x2-x1,y2-y1).然后利用他求出角度就可以了.使用下面的一个转换可以实现计算出两点间连线的夹角.然而,Math.atan()只能返回一个角度值,因此确定他的角度非常的复杂,而且,90度和270度的正切是无穷大,因为除数为零,我们也是比较难以处理的~!angel为一个角度的弧度值,slope为直线的斜率,是一个数字,这个数字可以是负的。

编程日记2024/02/24 00:00:05

MySQL 中 is null 和 =null 的区别

如果 set ANSI_NULLS为 ON 时，表示SQL语句遵循SQL-92标准；如果 set ANSI_NULLS 为 OFF 时，表示不遵从 SQL-92 标准。但SQL-92 标准要求对null的 = 或不等于 (!= ，) 比较取值都为 false，也就是 =null 或者 null,返回的都是false。null 在MySQL中不代表任何值，通过运算符是得不到任何结果的，因此只能用 is null(默认情况)MySQL 中 null 不代表任务实际的值，类似于一个未知数。

编程日记2024/02/17 23:00:03

Integer.toHexString(b & 0xff)理解以及& 0xff什么意思

首先toHexString传的参数应该是int类型32位，此处传的是byte类型8位，所以前面需要补24个0。然后& 0xff 就是把前面24个0去掉只要后8位。toHexString(b & 0xff)相当于做了一次位的与运算，将前24位字符省略，将后8位保留。是两个十六进制的数,每个f用二进制表示是1111,所以占四位（bit）,两个f（）占八位（bit），八位（bit）也就是一个字节（byte）.这个方法是把字节（转换成了int）以16进制的方式显示。我的理解是这样，如有不对欢迎指正！

编程日记2024/02/14 01:00:01

Docker网络详解

如何自定义一个网络？查看新创键的mynet详细信息：# 创建两个使用相同自定义网络的容器# 测试容器互连^C^C。

编程日记2024/02/01 23:00:02

DNS轮询解析是什么？

在其最简单的实现中，轮回DNS的工作方式是，不仅用一个潜在的IP地址来响应DNS请求，而且用一个潜在的IP地址列表来响应承载相同服务的几个服务器。传统的负载均衡技术通常需要专门的硬件或软件，但DNS轮询解析是一种负载分配、负载平衡或容错技术，通过管理域名系统（DNS）对来自客户计算机的地址请求的响应，按照适当的统计模型，提供多个冗余的互联网协议服务主机，将流量分散到多个服务器上。因此，虽然轮询DNS是一种简单有效的负载平衡方法，但它也存在一些限制和潜在的问题，需要根据实际情况进行选择和使用。

编程日记2024/01/31 20:42:00

一文搞懂网络OSI网络模型

在互联网技术里，有两件事最为重要，一个是TCP/IP协议，它是万物互联的事实标准；另一个是Linux操作系统，它是推动互联网技术走向繁荣的基石。在网络编程中最重要的模型便是OSI七层网络模型和TCP/IP四层网络模型七层模型，也称为OSI(Open System Interconnection)参考模型，是国际标准化(ISO)指定的一个用于计算机或通信系统间互联的标准体系。建立七层模型的主要目的是为解决各种网络互联时遇到的兼容性问题。

编程日记2024/01/28 23:30:04

常见的几种网络抓包及协议分析工具

网络工程师必备技能-抓取网络数据。在本篇博客中，我们将集中记下几个问题进行探讨：Wireshark 是免费的抓取数据包、分析数据包的工具，兼容 Windows、Linux、Mac等主流平台。使用 wireshark 抓包需要的工具是：安装了 wireshark 的 PC。wireshark 抓包的范围是：抓取安装了 wireshark 的 PC 本机的网卡上流经的数据包。其中，网卡指的是 PC 上网使用的模块，常见的包括：以太网网卡、wifi 无线网卡，PC 分别使用它们用于连接以太网、wifi 无线网络。

编程日记2024/01/28 23:30:04

为什么网线接法要分交叉连接和直连连接两种方式

水晶头有两种连接方式T568A和T568B。网线的两头都使用同一标准连接就是直连线，两头使用不同的标准就是交叉线。

编程日记2024/01/25 23:00:04

配置nginx+keepalived高可用代理数据库ip端口

需求：配置nginx+keepalived高可用反向代理数据库ip端口（数据库服务器无法增加新SCAN IP或者需要隐藏数据库IP的情况下适用）本机ip为：192.168.20.10和192.168.20.11。2.任意节点关机或重启系统，浮动ip也会自动漂移到另外节点。1.任意节点停nginx：浮动ip会自动漂移到另外节点。安装依赖包和nginx和keepalived。浮动IP为：192.168.20.20。配置keepalived.conf。两台centos7.9。

编程日记2024/01/25 10:45:57

TCP服务器最多支持多少客户端连接

本文从理论和实际两个方面介绍了一个 TCP 服务器支持的最大连接数

编程日记2024/01/24 22:10:29

给服务器开通telnet的流程

但一些特殊场景下，比如要升级ssh，ssh不能用时，需要使用telnet，用过要关闭此服务。需要首先安装，如果telnet-server服务在xinetd之前安装了，要先删除telnet-server，再安装xinetd。安装顺序：xinetd--》telnet--》telnet-server。安装顺序：xinetd--》telnet--》telnet-server。2、卸载rpm包（如果已经安装了，又不清楚顺序，可以都卸载后统一安装）注意：telnet-server服务启动依赖xinetd服务，

编程日记2024/01/24 20:02:23

websocket服务端本地部署

即登录cpolar官网后，点击预留，保留一个固定tcp端口地址，然后将其配置到相应的隧道中即可。这里我们用cpolar内网穿透来映射内网端口，它支持http/https/tcp协议，不限制流量，无需公网ip，也不用设置路由器，操作简单。注意:该隧道选择的是临时tcp地址和端口,24小时内会变化,如需固定tcp地址,可升级为专业套餐做tcp地址固定!cpolar安装成功后，默认会配置两个默认隧道：一个ssh隧道和一个website隧道，可自行删减或者修改。，可以查看到token码，复制并执行命令进行认证。

编程日记2024/01/23 18:03:57

微信小程序之WXSS模板样式、页面配置（.json）和网络数据请求

一、WXSS 模板样式1、什么是 WXSS2、WXSS 和 CSS 的关系二、WXSS 模板样式 - rpx1、什么是 rpx 尺寸单位2、rpx 的实现原理3、rpx 与 px 之间的单位换算*三、WXSS 模板样式 - 样式导入1、什么是样式导入2、@import 的语法格式四、WXSS 模板样式 - 全局样式和局部样式1、全局样式2、局部样式五、页面配置1、页面配置文件的作用2、页面配置和全局配置的关系3、页面配置中常用的配置项。

编程日记2024/01/23 18:01:56

Redis 击穿、穿透、雪崩产生原因解决思路

也就是在设定的时间里数据没有取出来，但是锁由过期了，常见的思路是，锁过期时间值递增，但是想想不靠谱，因为第一个请求可能超时，如果后面的也超时呢，接连多次超时之后，锁过期时间值势必特别大了，这样做弊端太多。雪崩，和击穿类似，不同的是击穿是一个热点Key某时刻失效，而雪崩是大量的热点Key在一瞬间失效，网络上很多博客都在强调解决雪崩的策略是随机过期时间，这个非常不准确，举个例子，银行做活动，之前这个利息系数为2%，过了零点系数改为3%，这种情况能将用户的对应的key改为随机过期吗？如果用的过去的数据叫脏数据。

编程日记2024/01/23 14:00:01

CSS局限属性contain：优化渲染性能的利器