CSS 新特性 contain控制页面的重绘与重排问题


Posted in HTML / CSS onApril 30, 2021

CSS 新特性 contain控制页面的重绘与重排问题

在介绍新的 CSS 属性 contain 之前,需要读者已经知道什么是页面的重绘与重排。

发现之前已经描述过很多次了,可以看看这个提高 CSS 动画性能的正确姿势[1]。

OK,下面进入本文正题,

contain 为何?

contain 属性允许我们指定特定的 DOM 元素和它的子元素,让它们能够独立于整个 DOM 树结构之外。目的是能够让浏览器有能力只对部分元素进行重绘、重排,而不必每次都针对整个页面。

The contain property allows an author to indicate that an element and its contents are, as much as possible, independent of the rest of the document tree. This allows the browser to recalculate layout, style, paint, size, or any combination of them for a pmited area of the DOM and not the entire page.contain 语法

看看它的语法:

{ 
  /* No layout containment. */ 
  contain: none; 
  /* Turn on containment for layout, style, paint, and size. */ 
  contain: strict; 
  /* Turn on containment for layout, style, and paint. */ 
  contain: content; 
  /* Turn on size containment for an element. */ 
  contain: size; 
  /* Turn on layout containment for an element. */ 
  contain: layout; 
  /* Turn on style containment for an element. */ 
  contain: style; 
  /* Turn on paint containment for an element. */ 
  contain: paint; 
}

 

除去 none,取值还有 6 个,我们一个一个来看看。

contain: size

contain: size: 设定了 contain: size 的元素的渲染不会受到其子元素内容的影响。

The value turns on size containment for the element. This ensures that the containing box can be laid out without needing to examine its descendants.

我开始看到这个定义也是一头雾水,光看定义很难明白到底是什么意思。还需实践一番:

假设我们有如下简单结构:

<div class="container"> 
    
</div>
.container { 
    width: 300px; 
    padding: 10px; 
    border: 1px solid red; 
} 
 
p { 
    border: 1px solid #333; 
    margin: 5px; 
    font-size: 14px; 
}

并且,借助 jQuery 实现每次点击容器添加一个 <p>Coco</p> 结构:

$('.container').on('click', e => { 
    $('.container').append('<p>Coco</p>') 
})

 

那么会得到如下结果:

CSS 新特性 contain控制页面的重绘与重排问题

可以看到,容器 .container 的高度是会随着元素的增加而增加的,这是正常的现象。

此刻,我们给容器 .container 添加一个 contain: size,也就会出现上述说的:设定了 contain: size 的元素的渲染不会受到其子元素内容的影响。

.container { 
    width: 300px; 
    padding: 10px; 
    border: 1px solid red; 
+   contain: size 
}

再看看会发生什么:

CSS 新特性 contain控制页面的重绘与重排问题

正常而言,父元素的高度会因为子元素的增多而被撑高,而现在,子元素的变化不再影响父元素的样式布局,这就是 contain: size 的作用。

contain: style

接下来再说说 contain: style、contain: layout 、contain: paint。先看看 contain: style。

截止至本文书写的过程中,contain: style 暂时被移除了。

CSS Containment Module Level 1[2]: Drop the at-risk “style containment” feature from this specification, move it Level 2。

嗯,官方说辞是因为存在某些风险,暂时被移除,可能在规范的第二版会重新定义吧,那这个属性也暂且放一放。

contain: paint

contain: paint:设定了 contain: paint 的元素即是设定了布局限制,也就是说告知 User Agent,此元素的子元素不会在此元素的边界之外被展示,因此,如果元素不在屏幕上或以其他方式设定为不可见,则还可以保证其后代不可见不被渲染。

This value turns on paint containment for the element. This ensures that the descendants of the containing box don’t display outside its bounds, so if an element is off-screen or otherwise not visible, its descendants are also guaranteed to be not visible.

这个稍微好理解一点,先来看第一个特性:

设定了 contain: paint 的元素的子元素不会在此元素的边界之外被展示 设定了 contain: paint 的元素的子元素不会在此元素的边界之外被展示

这个特点有点类似与 overflow: hidden,也就是明确告知用户代理,子元素的内容不会超出元素的边界,所以超出部分无需渲染。

简单示例,假设元素结构如下:

<div class="container"> 
    <p>Coco</p> 
</div>
.container { 
    contain: paint; 
    border: 1px solid red; 
} 
 
p{ 
    left: -100px; 
}

我们来看看,设定了 contain: paint 与没设定时会发生什么:

CSS 新特性 contain控制页面的重绘与重排问题

CodePen Demo -- contain: paint Demo[3]

设定了 contain: paint 的元素在屏幕之外时不会渲染绘制

通过使用 contain: paint, 如果元素处于屏幕外,那么用户代理就会忽略渲染这些元素,从而能更快的渲染其它内容。

contain: layout

contain: layout:设定了 contain: layout 的元素即是设定了布局限制,也就是说告知 User Agent,此元素内部的样式变化不会引起元素外部的样式变化,反之亦然。

This value turns on layout containment for the element. This ensures that the containing box is totally opaque for layout purposes; nothing outside can affect its internal layout, and vice versa.

启用 contain: layout 可以潜在地将每一帧需要渲染的元素数量减少到少数,而不是重新渲染整个文档,从而为浏览器节省了大量不必要的工作,并显着提高了性能。

使用 contain:layout,开发人员可以指定对该元素任何后代的任何更改都不会影响任何外部元素的布局,反之亦然。

因此,浏览器仅计算内部元素的位置(如果对其进行了修改),而其余DOM保持不变。因此,这意味着帧渲染管道中的布局过程将加快。

存在的问题

描述很美好,但是在实际 Demo 测试的过程中(截止至2021/04/27,Chrome 90.0.4430.85),仅仅单独使用 contain:layout 并没有验证得到上述那么美好的结果。

设定了 contain: layout 的指定元素,改元素的任何后代的任何更改还是会影响任何外部元素的布局,点击红框会增加一条<p>Coco<p>元素插入到 container 中:

简单的代码如下:

<div class="container"> 
    <p>Coco</p> 
    ... 
</div> 
<div class="g-test"></div>
html, 
body { 
    width: 100%; 
    height: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-direction: column; 
    gap: 10px; 
} 
 
.container { 
    width: 150px; 
    padding: 10px; 
    contain: layout; 
    border: 1px solid red; 
} 
 
.g-test { 
    width: 150px; 
    height: 150px; 
    border: 1px solid green; 
}

CSS 新特性 contain控制页面的重绘与重排问题

CodePen Demo -- contain: layout Demo[4]

Can i Use -- CSS Contain

截止至 2021-04-27,Can i Use 上的 CSS Contain 兼容性,已经可以开始使用起来:

CSS 新特性 contain控制页面的重绘与重排问题

参考文献

CSS Containment Module Level 1[5]

CSS containment[6]

CSS Containment in Chrome 52[7]

参考资料

[1]提高 CSS 动画性能的正确姿势:

https://github.com/chokcoco/iCSS/issues/11

[2]CSS Containment Module Level 1:

https://www.w3.org/TR/css-contain-1/

[3]CodePen Demo -- contain: paint Demo:

https://codepen.io/Chokcoco/pen/KKwmgmN

[4]CodePen Demo -- contain: layout Demo:

https://codepen.io/Chokcoco/pen/rNjRELL

[5]CSS Containment Module Level 1:

https://www.w3.org/TR/css-contain-1/

[6]CSS containment:

https://justmarkup.com/articles/2016-04-05-css-containment/

[7]CSS Containment in Chrome 52:

https://developers.google.com/web/updates/2016/06/css-containment

[8]Github -- iCSS:

https://github.com/chokcoco/iCSS

到此这篇关于CSS 新特性 contain控制页面的重绘与重排的文章就介绍到这了,更多相关CSS 控制页面的重绘与重排内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
详解CSS3 用border写 空心三角箭头 (两种写法)
Sep 29 HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 HTML / CSS
CSS3圆角和渐变2种常用功能详解
Jan 06 HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
Mar 25 HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 HTML / CSS
HTML5移动端手机网站开发流程
Apr 25 HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
css之clearfix的用法深入理解(必看篇)
May 21 HTML / CSS
CSS3新特性详解(五):多列columns column-count和flex布局
css position fixed 左右双定位的实现代码
Apr 29 #HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
CSS3实现的侧滑菜单
CSS完成视差滚动效果
Html5通过数据流方式播放视频的实现
Apr 27 #HTML / CSS
CSS3实现的3D隧道效果
You might like
php实现异步数据调用的方法
2015/12/24 PHP
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
require.js的用法详解
2015/10/20 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
浅谈python3中input输入的使用
2019/08/02 Python
Python datetime包函数简单介绍
2019/08/28 Python
PHP统计代码行数的小代码
2019/09/19 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
css 元素选择器的简单实例
2016/05/23 HTML / CSS
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
创业计划书的主要内容有哪些
2014/01/29 职场文书
小学教师培训感言
2014/02/11 职场文书
质量月活动总结
2014/08/26 职场文书
小孩不笨观后感
2015/06/03 职场文书
python基础之类方法和静态方法
2021/10/24 Python
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers