2024年前端最新只需一行CSS代码，让长列表网页的渲染性能提升几倍以上！，2024年最新前端开发应该如何准备面试

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

content: ‘’;

position: absolute;

left: -665px;

top: -460px;

width: 300px;

height: 15px;

background-color: rgba(255, 255, 255, 0.5);

transform: rotate(-45deg);

animation: searchLights 2s ease-in 0s infinite;

}

@keyframes searchLights {

0% {

}

75% {

left: -100px;

top: 0;

}

100% {

left: 120px;

top: 100px;

}

}

渲染效果

从chrome可以看出，渲染时间花费了1454ms：

使用后

代码

在class为card中添加 content-visibility: auto;：

.card {

position: relative;

overflow: hidden;

transition-duration: 0.3s;

margin-bottom: 10px;

width: 200px;

height: 100px;

background-color: #ffaa00;

content-visibility: auto;

}

.card:before {

content: ‘’;

// …

渲染效果

可以明显的看到，使用content-visibility: auto;后渲染时间只需要381ms，性能提升了近4倍！而且随着元素内容变复杂，提升的性能会有更明显的上升。

再从下图的dom结构变化中也可以看到，当card未出现在屏幕可见区域内是，其内容(::before等动画)在元素出现在可见效果时才出现：

缺陷

–

兼容性

content-visibility是chrome85今年新增的特性，所以目前兼容性还不高，但是相信兼容性的问题在不久的将来会得到解决。目前兼容性如下：

部分元素导致浏览器渲染出问题

问题

当元素的部分内容如<img />标签这种，元素的高度是有图片内容决定的，因此在这种情况下，如果使用content-visibility，则可见视图外的img初始未渲染，高度为0，随着滚动条向下滑动，页面高度增加，会导致滚动条的滚动有问题。

<img

src=“https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1057266467,784420394&fm=26&gp=0.jpg”

alt=“小狗”

/>

<img

src=“https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1057266467,784420394&fm=26&gp=0.jpg”

alt=“小狗”

/>

效果如下，可以看出滚动条随着图片的呈现，会出现问题：

解决思路

解决此问题，如果在已知元素高度的情况下，可以使用contains-intrinsic-size属性，为上面的card添加：contains-intrinsic-size：312px;，这会给内容附一个初始高度值。（如果高度不固定也可以附一个大致的初始高度值，会使滚动条问题相对减少）。

修改代码如下:

读者福利

========

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）