首页 > 其他分享 >什么是 Chrome 开发者工具 performance 面板 Experience 里的 Layout shift

什么是 Chrome 开发者工具 performance 面板 Experience 里的 Layout shift

时间:2023-03-30 14:14:02浏览次数:45  
标签:Layout Chrome shift 页面 加载 位移 CLS

Chrome 开发者工具 performance 面板 Experience 中的 Layout shift(布局位移)是指在页面加载过程中元素的位置发生了意外的变化,这种变化可能会导致用户的不良体验,例如元素突然移动导致用户误点击其他链接或按钮。

Layout shift 主要由于以下原因引起:

  • 图片或其他资源的加载导致页面布局发生变化;
  • 元素尺寸或字体加载延迟,导致渲染时出现了布局变化;
  • 动态添加的内容导致页面布局发生变化。

Layout shift 可以通过在页面加载过程中保持元素尺寸的一致性和使用占位符来减少。在 Chrome 开发者工具中,可以使用 Performance 面板的 Experience 选项卡来检查页面中的 Layout shift 情况,并查看与其相关的性能指标,如 Cumulative Layout Shift (CLS) 等。

什么是 Cumulative Layout Shift ?

Cumulative Layout Shift (CLS) 是衡量页面稳定性的一个指标,用于衡量页面在加载过程中出现的所有布局位移的累积值。CLS 值越小,表示页面加载过程中的布局位移越少,用户体验越好。

CLS 值的计算方法是在整个页面生命周期内监测所有的布局位移,并将位移的面积乘以位移的时间,然后将所有的位移面积乘以位移时间之和累加起来,最终得到一个总的 CLS 值。

在实际开发中,可以通过以下方式来减少页面的 CLS 值:

  • 在页面加载过程中,尽可能保持元素的尺寸和位置不变;
  • 在图片和其他资源加载之前,使用占位符来预留元素的位置;
  • 避免动态添加内容,尽可能将所有的内容都包含在 HTML 中;
  • 避免使用定位和动画等可能导致布局位移的 CSS 属性。

在 Chrome 开发者工具的 Performance 面板中,可以通过查看 Experience 选项卡来查看页面的 CLS 值,进而优化页面的稳定性。

标签:Layout,Chrome,shift,页面,加载,位移,CLS
From: https://www.cnblogs.com/sap-jerry/p/17272465.html

相关文章

  • @layout/activity_main does not contain a declaration with id XXX,findViewById(R.i
    问题描述:在MainActivity.java中,通过id寻找checkbox,明明能显示这个组件的id,Ctrl+点击也能跳转过去,但是就是爆红,提示@layout/activity_maindoesnotcontainadeclaration......
  • chrome浏览器支持flash的版本
    方式1:https://link.zhihu.com/?target=https%3A//www.slimjet.com/chrome/google-chrome-old-version.php方式2:查找你想要的版本号例如:输入87然后这里就会出现匹配版......
  • 为何Safari不如Chrome?
    Safari是乔布斯在2003年的Macworld大会发布的,9年过去了,08年才发展起来的Chrome用了不到Safari一般的时间远远把Safari甩在了后面,这让Safari情何以堪。Chrome的市场份额从200......
  • 谷歌翻译无法使用?Chrome 浏览器翻译
    https://github.com/Ponderfly/GoogleTranslateIpCheck在github下载  GoogleTranslateIpCheck 看你们电脑而定 我的是window所以下载windows的软件  下载成功......
  • chrome浏览器自带截图
    欢迎关注我的公众号:夜说猫,让贫穷的程序员不靠打代码也能吃饭~刚做了套网站模板,想截个网页全图。这不是难事,各种截图软件都能实现。但是,发现chrome下无需借助其他任何截......
  • 又是Android studio下layout文件内容无提示
     又出现没有提示的问题。只不过这次我新建了一个模块。想想可能是模块的问题    之前是32,先在新建的是33.更改回32即可。 ......
  • Chrome扩展插件:Console Importer(控制台导入器)
    安装插件进入谷歌商店 https://chrome.google.com/webstore/search/Console%20Importer?hl=zh-CN安装插件 ConsoleImporter   使用打开浏览器console控制台,通......
  • JavaScript 触发click事件 兼容FireFox,IE 和 Chrome
    解决了火狐下无法触发click事件的问题 <scriptlanguage="javascript"> functiontest2(name) { if(document.all) { document.getElementById(name).click(); ......
  • Android 页面上滑置顶悬停实现 (CoordinatorLayout+AppBarLayout+CollapsingToolbarLa
    我开始炒冷饭了啊,有人说这套组合已经被用烂了,有人说这玩意谁都会,其实没有人说哈,我就是怕被人说,提前预警哈.最近,工作比较忙,好久都没有写一下博客来说点什么.刚刚我去......
  • 我每天使用的 Chrome 快捷方式
    我最喜欢的浏览器是谷歌浏览器。我想与您分享一些我每天使用的快捷方式。他们让我的生活变得更好。你会注意到很多这些快捷方式只是避免了相对容易的鼠标移动。例如,按下CTR......