1. 首页
  2. css

帮助浏览器优化CSS包含属性

我们要做的事情越来越多,以帮助浏览器达到最佳性能。
– 响应图像语法有几个方面。例如,需要告诉浏览器在我们的布局中使用sizes属性的图像有多大,使用w描述符的图像有多大。
– 常规图像始终具有width和height表示属性,这些属性总是有些有用,现在非常有用。CSS中的will-change属性有时需要更高性能的动画。
– 如果您想要任何离线功能,或是异国情调的性能改进,您必须编写定制的服务人员代码。现在我们有了CSScontain,它的目的是告诉浏览器你的布局,这样它可以更快地完成任务。你不需要使用它,但它是一个很好的优化增强。.item {contain: layout;contain: paint;contain: size;contain: content; /* same as `layout paint` */contain: strict;/* same as `layout paint size` */}这里是关于layout:启用布局包含后,浏览器知道元素外部的任何东西都不会影响内部布局,元素内部的任何东西都不会改变元素外部事物的布局。这意味着它可以对这个场景进行任何可能的优化。这些事情有真正的含义,比如启动z-index上下文、清除浮动和隐藏溢出,所以它们肯定属于\”知道你在做什么\”领域。不过,Rachel在设计系统方面是对的:我建议,这是添加到组件或模式库中创建的任何组件中的一件很好的事情,如果您以这种方式工作,则很可能每个组件都被设计成一个独立的东西,不会影响页面上的其他元素,从而使*contain: content;一个有用的补充。直接链接→

帮助浏览器优化CSS包含属性 为WP2原创文章,链接:https://www.wp2.cn/css/%e5%b8%ae%e5%8a%a9%e6%b5%8f%e8%a7%88%e5%99%a8%e4%bc%98%e5%8c%96css%e5%8c%85%e5%90%ab%e5%b1%9e%e6%80%a7/