content-visibility css新属性 优化长列表页面性能

最新推荐文章于 2023-11-28 08:49:15 发布
最新推荐文章于 2023-11-28 08:49:15 发布
阅读量341 收藏
点赞数
分类专栏： 随笔 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36208612/article/details/118213124
版权

content visibility CSS属性控制一个元素是否呈现它的内容，同时强制一组强大的容器，允许用户代理潜在地忽略大量的布局和呈现工作，直到需要它为止。基本上，它允许用户代理跳过元素的呈现工作（包括布局和绘制），直到需要时为止—这使得初始页面加载速度更快

Values:

  • visible
    没有效果。元素的内容按常规进行布局和呈现。
  • hidden
    元素跳过其内容。跳过的内容不能被用户代理功能访问，例如在页面中查找、选项卡顺序导航等，也不能是可选的或可聚焦的。这类似于显示内容：无。
  • auto
    元素打开布局包含、样式包含和绘制包含。如果元素与用户无关，它也会跳过其内容。与隐藏不同的是，跳过的内容必须仍然可以作为用户代理的常规功能使用，例如在页面中查找、选项卡顺序导航等，并且必须是可聚焦的和可选择的。
    MDN content-visibility 参考链接
GandoraMask
关注
专栏目录
css 中的 content-visitly 提升渲染性能
_
01-31 665
content-visibility 新的css属性，可显著提升渲染性能 译文：原文链接：https://web.dev/content-visibility/ 本文介绍CSS的新属性content-visibility，这个属性可以显著提升渲染性能。 Chromium 85开始有了[content-visibility](<https://drafts.csswg.org/css-contain/#propdef-content-visibility>)属性，这可能是对于提...
前端性能优化-CSS性能优化
LYFlied的博客
03-27 2611
一、内联首屏关键CSS 二、异步加载CSS 异步加载的几种方式 1.js动态创建样式表link元素，并插入到DOM中。 2.设置media属性 3.设置rel属性 4. rel="preload" 三、文件压缩 四、去除无用CSS 五、有选择地使用选择器 六、减少使用昂贵的属性 七、优化重排与重绘 1. 减少重排 2.避免不必要的重绘 八、让元素及其内容尽可能独立于文档树的其余部分 九、避免使用@import 十、开启GPU渲染动画 十一、合并css文件
css-content-visibility:新CSS属性内容可见性|| 性能测试示例
03-08
新CSS属性内容可见性|| 性能测试示例 前 后
content-visibility——只需一行CSS代码，让长列表网页的渲染性能提升几倍以上！
lgdaren的博客
12-22 4776
长列表网页相信大多数开发者都遇到过，在DOM元素过多的情况下，浏览器渲染会很慢，非常影响用户体验。 因此我们会经常采用虚拟滚动、分页、上拉加载更多等不同的方式来进行优化，这些方式的思想都是一样的，都是只渲染可见区域，等用户需要时再加载更多的内容。而以上的方式无论哪种，都需要写大量的js或者css逻辑去实现。 而现在，我们多了一种方式——content-visibility。只需要一行CSS代码，就可以实现可见网页只加载可见区域内容，使网页的渲染性能得到数倍的提升！ 介绍 content-visibility
css 属性： content-visibility
qq_35120075的博客
05-23 953
是CSS新增的属性，主要用来提高页面渲染性能，它可以控制一个元素是否渲染其内容，并且允许浏览器跳过这些元素的布局与渲染。
content-visibility 新的css属性，可显著提升渲染性能
u011497228的博客
01-07 5393
content-visibility 新的css属性，可显著提升渲染性能 译文： 原文链接：https://web.dev/content-visibility/ 本文介绍CSS的新属性 content-visibility ，这个属性可以显著提升渲染性能。 Chromium 85 开始有了 content-visibility 属性，这可能是对于提升页面加载性能提升最有效的CSS属性，content-visibility 让用户代理正常情况下跳过元素渲染工作（包括 layout 和 paint
只需一行CSS代码，让长列表网页的渲染性能提升几倍以上！
weixin_55846296的博客
09-16 336
https://mp.weixin.qq.com/s/kbDCSDbodGj8DmwnbNhf4Q 长列表网页相信大多数开发者都遇到过，在DOM元素过多的情况下，浏览器渲染会很慢，非常影响用户体验。 因此我们会经常采用虚拟滚动、分页、上拉加载更多等不同的方式来进行优化，这些方式的思想都是一样的，都是只渲染可见区域，等用户需要时再加载更多的内容。而以上的方式无论哪种，都需要写大量的js或者css逻辑去实现。 而现在，我们多了一种方式——content-visibility。只需要一行CSS代码，就可以实现可见
使用 content-visibility 优化渲染性能.doc
07-08
【content-visibility】属性是CSS中的一个新特性，它允许开发者控制元素是否渲染其内容，以及何时渲染。这个属性能够显著提升网页的初始加载速度，因为它让浏览器可以在内容需要显示之前跳过大量的布局和渲染工作。 ...
仅使用CSS提高页面渲染速度
codepony的博客
06-05 429
用户在访问一个Web网站（页面）或应用时，总是希望它的加载速度快，功能流畅。如果过于慢，用户就很有可能失去耐心而离开你的Web网站或应用。作为开发人员，给自己应用提供更快的访问速度，提供很好的用户体验是必备的基础技能，而且Web开发者在开发中也可以做很多事情来改善用户体验。那我们今天就来和大家聊聊，在CSS方面有哪些技巧可以帮助我们来提高Web页面的渲染速度。 内容可见性（content-visibility） ...
两行CSS让长列表性能渲染提升7倍！
最新发布
程序员成长指北
11-28 108
大厂技术高级前端Node进阶 点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群Hello，大家好，我是 考拉????。今天咱们来看两个可以 直接提升渲染性能的 CSS 属性。content-visibilitycontain-intrinsic-size这两个 CSS 属性，主要针对 长列表渲染。有长列表渲染需求的同学，可一定不能错过咯~content-visibilityc...
content-visibility:Web组件使用CSS内容可见性和后备交集观察器
05-07
内容可见性 <content>是一个简单的Web组件，封装了现代CSS属性content-visibility和Web API Intersection Observer API，以提供跨浏览器解决方案来跳过渲染（布局和绘画）元素，直到需要（出现在视口上）来增强效果页面性能。 只能在Chrome 85 +，Chrome Android 85+和Opera 71+上支持CSS content-visibility ，但不幸的是，Firefox，Safari和IE不支持CSS content-visibility ，请参阅 。 除IE之外， Intersection Observer API几乎支持所有浏览器，因此包含了一个Intersection Observer 以在IE上兼容。 基本上，其中的所有子级仅在视口中出现后才会渲染。 < content-visib
CSS3中的content属性使用示例
12-13
CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够实现页面中的内容插入。插入纯文字 content:"插入的文章"，或者content:none不插入内容html: XML/HTML Code复制内容到剪贴板 这是h1   这是h2   css CSS Code复制内容到剪贴板 h1::after{        content:"h1后插入内容"   }    h2::after{   
优化长列表
An_cf的博客
04-23 529
最近做的项目有一个列表模块数据量巨大，后端限制完数据后还有大概10000条数据，直接渲染的话会有明细的卡顿情况，于是撸起袖子开始重构。 这里只回顾一下实现原理以便以后忘了能立马捡起来： 1.保存原始列表数组数据； 2.只渲染可视区域大小的元素； 3.当滚轮滚动时，动态的计算当前的scrollTop的值，然后根据列表每条数据的高度动态的去获取可视区域应该展现的列表数组元素； 4.做内外两次...
处理大数据的最佳方式——content-visibility
zy_lalala的博客
03-20 749
content-visibility
【CSS】1357- 使用 content-visibility 优化渲染性能
pingan8787
06-19 251
最近在业务中实际使用 content-visibility 进了一些渲染性能的优化。这是一个比较新且有强大功能的属性。本文将带领大家深入理解一番。何为 content-visibility？content-visibility：属性控制一个元素是否渲染其内容，它允许用户代理（浏览器）潜在地省略大量布局和渲染工作，直到需要它为止。MDN 原文：The content-vis...
前端开发之长列表渲染优化- content-visibility
极客伍六七 的博客
03-22 384
Content Visibility属性是一个非常有用的CSS属性，可以提高网站的渲染性能。当页面中有大量的元素需要隐藏时，使用Content Visibility属性可以避免这些元素影响页面的性能。如果你想提高你网站的渲染速度，那么Content Visibility属性是一个不错的选择。。
css性能优化的方法
子玉的博客
10-28 824
6. 避免使用过多的浮动：浮动元素会影响其他元素的布局和渲染，如果使用过多的浮动，会导致页面的渲染速度变慢。5. 避免使用@import：@import会阻塞页面的加载，并且会增加页面的请求次数。1. 减少样式表数量和大小：通过合并多个样式表、删除未使用的样式、压缩样式表等方式来减少样式表数量和大小，从而减少网络请求和提高加载速度。在需要使用样式的地方，尽可能使用ID选择器代替类选择器。2. 使用简洁的选择器：使用尽可能简洁的选择器来匹配元素，避免使用过于复杂的选择器，可以减少匹配时间和提高渲染速度。
两行CSS让页面提升了近7倍渲染性能
qq_28004103的博客
12-31 316
我们仔细想想，页面上虽然会有很多元素，但是它们会同时呈现在用户眼前吗，很显然是不会的，用户每次能够真实看到就只有设备可见区那些内容，对于非可见区的内容只要页面不发生滚动，用户就永远看不到。就能够解决滚动条抖动的问题，当然，这个高度约接近真实渲染的高度，效果会越好，如果实在无法知道准确的高度，我们也可以给一个大概的值，也会使滚动条的问题相对减少。是CSS新增的属性，主要用来提高页面渲染性能，它可以控制一个元素是否渲染其内容，并且允许浏览器跳过这些元素的布局与渲染。的内容，当页面发生滚动时，动态通过计算获得。
前端面试必备：HTML-CSS-JS全解析与性能优化技巧
19. 隐藏元素 - 使用display:none、visibility:hidden或opacity:0等属性使元素不可见。 20. hover问题 - 需要清除hover伪类的默认样式，或者使用:hover伪类覆盖原有样式。 21. CSS Hack - 特殊的CSS技巧，针对老版...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值