一个可能让你的页面渲染速度提升数倍的CSS属性
浏览器在接收到服务端返回的 HTML
之后,需要把这段数据渲染成用户看到的页面,在开始渲染第一个元素之前可能还需要经过很多步骤。这个过程会适用于整个页面,包括当前不可见的内容。
所以在首屏渲染时,是有很大一部分时间花费在用户不可见的内容上,实际上这部分数据我们没必要在首屏就把它们渲染出来。
Chrome 85
新推出的 content-visibility: auto
就是为了解决上面的问题,它可以告诉浏览器暂时跳过该元素的布局和渲染工作,直到这个元素滚动到当前视口,从而可以加快整个页面的初始渲染,并且缩短用户和页面可交互需要花费的时间。
CSS Containment
content-visibility
依赖于 CSS Containement
,目前只能在 Chromium 85
中支持 content-visibility
属性,但是大多数浏览器都支持 CSS Containement
。
CSS Containment
是一种规范,它的主要目的就是在页面渲染的过程中通过忽略文档中的某些子树来提高页面的渲染性能。
上面我们提到,在首屏渲染时,是有很大一部分时间花费在用户不可见的内容上,实际上这部分数据我们没必要在首屏就把它们渲染出来。作为开发者,肯定很清楚当前修改的元素是否独立或者影响其他元素。因此如果开发者能把这个信息通过 CSS
告诉浏览器,那么浏览器就不需要再去考虑其他元素了。CSS Containment
模块中提供的 contain
属性就为我们提供了这种能力。
css contain
一共有四个属性:
-
size
: 在计算该元素盒子大小的时候会忽略其子元素 -
layout
: 元素的内部布局不受外部影响,同时该元素以及其内容也不会影响到上级 -
style
: 声明同时会影响这个元素和其子孙元素的属性,都在这个元素的包含范围内 -
paint
: 声明这个元素的子孙节点不会在它边缘外显示。如果一个元素在视窗外或因其他原因导致不可见,则同样保证它的子孙节点不会被显示。
content-visibility
css contain
是一个很棒的属性,但是我们不太容易判断要选取它的哪个值。现在,我们可以直接应用 content-visibility
来达到这样的效果,但是配置却简单的多。
content-visibility
属性也有多个值,但是 auto
这个值是一个可以立刻提高性能的属性:
.my-class {
content-visibility: auto;
}
如果一个元素具有 auto
这个属性,如果当前元素没有出现在屏幕上,浏览器就不会渲染它和它的子元素;当元素接近用户的可视区域时,浏览器就会解除限制,并开始进行渲染;这可以保证元素会及时被用户看到。
看看上面的例子,在将 content-visibility: auto
设置到一些小的模块之后,渲染时间直接从232ms提升到了30ms,性能提升了7倍。
contain-intrinsic-size
如果我们给可视区域外的元素增加了 content-visibility: auto
属性,那么当滚动条滚动到这个元素之后,如果这个元素很大有一定高度,那么滚动条的长度就会发生变化,页面可能就会发生抖动的现象。
解决这个问题,可以先使用 contains-intrinsic-size
提前给元素设置自然高度的大小,比如 1000px
,这样元素提前占用了一些高度,就不会发生抖动现象。
- .net采集网页方法大全(5种)
- C#+HtmlAgilityPack+XPath带你采集数据(以采集天气数据为例子)
- 中文分词之结巴分词~~~附使用场景+demo(net)
- 用微信二维码登录自己的网站
- 2620: [Usaco2012 Mar]Haybale Restacking
- 1671: [Usaco2005 Dec]Knights of Ni 骑士
- 1592: [Usaco2008 Feb]Making the Grade 路面修整
- Mysql 该如何 Entity Framework 数据库迁移 和 如何更好的支持EF.Extended
- 1734: [Usaco2005 feb]Aggressive cows 愤怒的牛
- 高性能替代反射调用的几种方式
- 1596: [Usaco2008 Jan]电话网络
- 1589: [Usaco2008 Dec]Trick or Treat on the Farm 采集糖果
- 1647: [Usaco2007 Open]Fliptile 翻格子游戏
- 1295: [SCOI2009]最长距离
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Android编程实现Toast只显示最后一条的方法
- Android 照相机的实例应用
- Android 逐帧动画创建实例详解
- 腾讯云 Severless 项目开发和灰度发布实践之路
- C/C++ Search Extension —— 一款可以快速在地址栏搜索 C/C++ 文档的浏览器插件
- 一些小众却有用的 Node.js 包
- 用Single-spa 创建基于 React 和 Vue 的微型前端
- 为 Vue 的惰性加载加一个进度条
- 50个能帮你节省时间的开发工具
- 【技术向】高可定 低维护の博客搭建指南
- 如何学习源码 | 如何高效学习一个新知识
- 我们为什么要禁用 THP
- web前端基础
- 记录一个Debug Assertion Failed
- nacos做服务注册中心