关闭

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

时间: 2019-02-01阅读: 1093标签: 特性

contain 为何?

这个 contain 属性的主要目的是隔离指定内容的样式、布局和渲染。开发人员可以使用这个 contain 属性来限制指定的DOM元素和它的子元素同页面上其它内容的联系;我们可以把它看做一个iframe。跟iframe很相似,它能建立起一个边界,产生一个新的根布局;保证了它和它的子元素的DOM变化不会触发父元素重新布局、渲染等。  

开发人员可以用这个 contain 属性声明一个元素和它的子元素是——尽可能的——和页面上的其它元素保持独立。 


none | strict | layout | style | paint | size | contain

这个 contain 属性可以有7种不同的值。

  • none 无
  • layout 开启布局限制
  • style 开启样式限制
  • paint 开启渲染限制
  • size 开启size限制
  • content 开启除了size外的所有限制
  • strict开启 layout, style 和 paint 三种限制组合


contain 使用场景举例

我们已经知道了,使用这个 contain 属性可以将一个元素标志为和页面上其它元素是相对独立的元素。为了说明这个属性的作用,下面举几个使用例子:

页面小饰件(widgets)

通常在页面上添加第三方小饰件时,我们几乎对它们没有什么太多的控制,比如分享工具,它们可能会因为具有相当耗资源的布局、样式、渲染操作等大幅度的降低整个页面的执行效率。为了将它们同我们的网站隔离开来,使用 contain: strict; 将第三方的小饰件同页面上的其它内容隔离开来。

屏幕外的内容

如果你有一个导航栏或其它类似的东西并不在屏幕可现实范围内出现,浏览器同样会为这些不可见的元素进行渲染。通过使用 contain: paint; 浏览器就会忽略渲染这些屏幕外不可见的元素,从而能更快的渲染其它内容。


计算容器尺寸

我在文字开头提到过这个问题,使用 contain: strict; 可以 免去很多关于容器尺寸控制的问题。比如,子元素的内容会影响容器的大小,使用 contain 属性就可以避免这样的问题产生。


为什么浏览器不能自动的实现 contain 的功能

浏览器已经尽可能的在页面下做了最大的优化,但每个浏览器引擎的实现方法并不尽相同。而 contain 属性可以提供一种标准的方式让开发人员告诉 浏览器 某些方面可以这样优化,哪些不能优化。


什么时候应该使用contain

如果你的页面很简单,没有复杂的DOM节点和小饰件(widgets),那就没必要考虑使用这种css的contain技术。而如果你开发的页面非常复杂,那么,这个css的contain技术可以帮助你优化页面的性能。而对于第三方的小饰件,始终使用contain: strict;是很好的习惯,它可以保护你的页面不受它们的干扰而出现性能问题。


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;
}


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1924

关闭

CSS 的特性值

在介绍 CSS 的特性和值的时候,特地的提到了浏览器应该怎样处理错误的值 -- 应该将包含错误值,不符合句法的值的声明直接忽略。然而有些浏览器却按照自己的方式做了某些纠正,也就是浏览器容错

Js即将到来的3个新特性

Optional Chaining(可选链式调用);Nullish coalescing(空值合并);Pipeline operator(管道运算符)通过三个函数对字符串进行处理;

ES2019 新特性汇总

最近 ECMAScript2019,最新提案完成:tc39 Finished Proposals,我这里也是按照官方介绍的顺序进行整理,如有疑问,可以查看官方介绍啦~另外之前也整理了 《ES6/ES7/ES8/ES9系列》,可以一起看哈。

typescript 3.7中值得注意的3个新特性

距 typescript 3.7 正式发布已经有一段时间了,这段时间正在对手上的项目进行 typescript 的迁移工作,所以会特别留意每一次的 release。对于 3.7 中包含的新特性,其实相比较之前几次 release 来说

ES6 Math方法和Number新特性简介

Math.sign() 函数返回一个数字的符号, 指示数字是正数,负数还是零。此函数共有5种返回值, 分别是 1, -1, 0, -0, NaN. 代表的分别是正数, 负数, 正零, 负零, NaN。

你可能错过的现代 JavaScript 特性

尽管我在过去 7 年中几乎每天都在写 JavaScript 代码,但不得不承认,我实际上并不是很注意 ES 语言的发布声明。 async/await 和 Proxies 之类的主要特性是一回事,但是每年都有稳定的小规模、渐进式的改进在不断涌现

h5和css3的新特性有哪些?

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准。CSS3是CSS(层叠样式表)技术的升级版本。下面我们来看一下HTML5余css3的新特性有哪些。

Html5、Css3、ES6的新特性

Html5的新特性语义化标签:有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重。表单新特性,多媒体视频(video)和音频(audio)

Angular 8的新特性介绍

在今天早些时候Angular团队发布了8.0.0稳定版。其实早在NgConf 2019大会上,演讲者就已经提及了从工具到差分加载的许多内容以及更多令人敬畏的功能。下面是我对8.0.0一些新功能的简单介绍,希望可以帮助大家快速了解新版本

CSS 特性和值

CSS 声明可以为空,或者由 CSS 特性( property ),后加一个冒号 :,跟着是一个特性的值构成。中间可以有空格将它们隔开。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!