认识达内从这里开始

随着互联网的不断发展，越来越多的人都在学习web前端编程开发等互联网技术，而本文我们就简单来了解一下，web网页开发都有哪些开发指标。

1、为从页面加载的任何内容设置明确的大小

当现有内容在其他内容完成加载后移动时，通常会发生布局偏移。因此，缓解这种情况的主要方法是尽可能提前预留任何需要的空间。

修复由未调整大小的图像引起的布局偏移的直接方法是显式设置宽度和高度属性(或等效的CSS属性)。

然而，根据HTTPArchive，72%的页面至少有一张未调整尺寸的图片。

如果没有明确的大小，浏览器初将设置默认高度为0px，并且可能会在终加载图像并发现尺寸时导致明显的布局偏移。

同样重要的是要记住，图像并不是CLS的影响因素。布局偏移可能是由在页面初呈现后加载的其他内容引起的，包括三方广告或嵌入式视频。

aspect-ratio属性可以帮助解决这个问题。这是一个相对较新的CSS功能，允许开发人员明确提供图像和非图像元素的宽高比。

这将允许你设置动态宽度(例如基于屏幕尺寸)，并让浏览器自动计算适当的高度，这与它们对具有尺寸的图像所做的方式大致相同。

有时无法知道动态内容的确切大小，因为它本质上是动态的。然而，即使你不知道确切的大小，你仍然可以采取措施来降低布局偏移的严重程度。

设置合理的小高度几乎总是比允许浏览器对空元素使用默认高度0px更好。

使用小高度通常也是一个简单的解决方法，因为它仍然允许容器在需要时增长到终的内容高度。

2、确保页面符合bfcache的条件

浏览器使用称为后退/前进缓存(简称bfcache)的导航机制，直接从内存快照中立即加载浏览器历史记录中较早或较晚的页面。

bfcache是一项重要的浏览器级性能优化，它完全消除了页面加载期间的布局变化，对于许多网站来说，这是大部分CLS发生的地方。

尽管如此，仍有大量网站不符合bfcache的条件，因此错过了获得大量导航的免费Web性能优化。

除非你的页面正在加载你不想从内存中恢复的敏感信息，否则你需要确保你的页面符合条件。

网站所有者应该检查他们的页面是否符合bfcache的条件，并解决他们不符合的任何原因。

Chrome在DevTools中已经有一个bfcache测试器，今年我们计划通过执行类似测试的新Lighthouse审查器和一个API来增强这里的工具，以在该领域进行测量。

虽然我们在CLS部分中包含了bfcache，但正如我们目前看到的大收益一样，bfcache通常也会改进其他CoreWebVitals。

它是可用于大幅改进页面导航的众多即时导航之一。

3、避免使用诱导布局的CSS动画和过渡属性

布局变化的另一个常见来源是元素动画化。例如，从顶部或底部滑入的横幅或其他通知横幅通常是CLS的影响因素。

当这些横幅将其他内容推开时，这就成了问题，但即使它们没有，动画化它们仍然会影响CLS。

虽然HTTPArchive数据终不能将动画与布局转换联系起来，但数据确实表明，将任何可能影响布局的CSS属性制成动画的页面，其"良好"的CLS的可能性比整体页面低15%。

有些属性比其他属性的CLS更差。例如，动画页边距或边框宽度的页面具有“差”的CLS，几乎是整体页面被评估为差的比率的两倍。

这也许并不奇怪，因为任何时候你转换或动画任何影响布局的CSS属性，它都会导致布局偏移，如果这些布局偏移不在用户交互的500毫秒内，那么它们将影响CLS。

一些开发人员可能会感到惊讶的是，即使在元素超出正常文档流的情况下也是如此。

例如动画顶部或左侧的绝对定位元素将导致布局偏移，即使它们没有推动其他内容。

但是，如果不是对顶部或左侧进行动画处理，而是对transform:translateX()或transform:translateY()进行动画处理，则不会导致浏览器更新页面布局，因此不会产生任何布局变化。

长期以来，选可以在浏览器的合成器线程上更新的CSS属性动画一直是一种性能佳实践，因为它将工作转移到了GPU上并脱离了主线程。

除了作为一般性能佳实践之外，它还可以帮助改进CLS。

作为一般规则，永远不要为任何需要浏览器更新页面布局的CSS属性设置动画或过渡，除非你是为了响应用户点击或按键(尽管不是悬停)。

并且尽可能使用CSStransform属性的过渡和动画。

Lighthouse的Avoidnon-compositedanimations将在页面对可能较慢的CSS属性进行动画处理时发出警告。

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!更多内容请加danei456学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。