开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么嵌入式SVG在台式机上会导致CLS (累积布局偏移)，而在移动设备上不会？

嵌入式SVG在台式机上导致CLS (累积布局偏移)的原因是由于台式机上的浏览器渲染机制与移动设备上的不同。

在台式机上，浏览器通常使用GPU加速来渲染页面，而GPU渲染过程中会导致嵌入式SVG的布局计算与其他元素的布局计算不同步，从而引起CLS。这是因为GPU渲染是异步的，它会在主线程上执行，而主线程上的其他布局计算可能会在GPU渲染之前完成，导致布局偏移。

另一方面，在移动设备上，由于资源受限，浏览器通常会使用软件渲染来处理页面的渲染，而软件渲染是同步的，不会出现与GPU渲染不同步的问题，因此嵌入式SVG在移动设备上不会导致CLS。

为了解决嵌入式SVG导致的CLS问题，可以采取以下措施：

避免在页面加载过程中动态插入SVG元素，尽量在页面加载前将SVG元素的尺寸和位置确定好，避免布局计算的不同步。
使用CSS属性transform来对SVG元素进行缩放和平移，而不是直接修改SVG元素的尺寸和位置，这样可以避免触发布局计算。
使用requestAnimationFrame来延迟对SVG元素的修改操作，将其放在下一帧中执行，以确保布局计算的同步性。
对于频繁变动的SVG元素，可以考虑使用position: fixed或position: absolute来脱离文档流，避免对其他元素的布局产生影响。

腾讯云相关产品和产品介绍链接地址：

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

新时代的 Google Web Vitals 性能指标

Cumulative Layout Shift 累积布局偏移（CLS）量化了在页面加载期间，视口中有多少元素移动。...在渲染内容之后异步获取数据然后插入，可能会导致布局变化。这种情况下，一种比较好的实践是用内容占位符，这样真正内容加载后布局就不会产生太大的变化。广告通常是异步加载的，在加载时可能会取代其他内容。...测量累积布局偏移当渲染的元素在页面加载期间移动时，它们会被标记为不稳定，并且它们在相对于视口的移动决定了布局偏移分数。...CLS 仍然在积极开发中，具体的公式可能会变，但目前来说，布局偏移的分数是由以下因素决定的：不稳定元素移动的距离 —— 距离系数。受不稳定元素影响的区域面积 —— 影响系数。...累积布局偏移分数，是所有不稳定元素在页面加载期间移动的分数之和。 CLS分数越低越好，因为这意味着在页面加载过程中发生的内容的偏移较少。

1.4K3 0

浏览器之性能指标-CLS

累积布局偏移（Cumulative Layout Shift，CLS）：衡量页面上元素位置发生变化的频率和程度。测量「视觉稳定性」为了提供良好的用户体验，页面的 CLS 应保持在 0.1....响应式设计：在响应式网页设计中，使用宽高比可以确保图片在不同屏幕尺寸和设备上呈现出良好的外观。通过设置宽高比，可以让图片自适应容器的尺寸变化，并保持正确的比例。...避免布局偏移：使用正确的宽高比可以避免在图片加载过程中发生布局偏移。如果在图片加载前没有指定宽高比，浏览器可能无法正确预留图片所需的空间，导致页面布局在加载后发生突然变化。...❞ ---- 产生CLS的常见原因 ❝CLS分数受「没有在页面上指定空间」的每个内容的影响，导致它们意外加载并移动其他内容，从而导致页面抖动。...❝会话窗口实际上是我们的页面生命周期内的时间段，在其中对布局偏移进行汇总。 ❞ 当页面发生布局偏移时，会打开一个会话窗口。

6972 0

Flutter2 来了！！！

Flutter Plasma是由社区成员Felix Blaschke构建的演示，展示了使用Dart和Flutter构建复杂的Web图形体验的简便性，这些体验也可以在桌面或移动设备上本地运行。...台式机，可折叠设备和嵌入式设备上的Flutter 2 除了传统的移动设备和Web之外，Flutter越来越多地扩展到其他设备类型，我们在今天的主题演讲中重点介绍了三个伙伴关系，这些伙伴关系证明了Flutter...对于Canonical来说，至关重要的是，它们可以在各种硬件配置上提供坚如磐石而又优美的体验。展望未来，Flutter是Canonical创建的未来台式机和移动应用程序的默认选择。 ?...我们很高兴继续与丰田和其他公司合作，将Flutter应用于汽车，电视和其他嵌入式设备，我们希望在未来几个月中分享更多示例。...在Flutter中，我们提供了一个开放源代码工具包，用于通过单个代码库构建针对移动，台式机，Web和嵌入式设备的美观而快速的应用程序，这些应用程序既可以满足Google的苛刻需求，也可以满足我们客户的需求

3.2K2 0

前端性能优化学习 02 Web 性能指标「建议收藏」

事实上性能是相对的：对于一个用户而言，一个站点可能速度很快（在具有功能强大的设备的快速网络上），而对于另一个用户而言，一个站点可能会较慢（在具有低端设备的慢速网络上）。...而在 3G 连接速度较慢的移动设备上加载网络需要花费更多时间，因此移动用户通常更耐心，在移动设备上加载 5s 是一个更现实的目标。...为确保您达到大多数用户的这一目标，衡量移动设备和台式机设备的页面加载量的第 75 个百分位数是一个很好的衡量标准。以下是一些示例：在以上两个时间轴中，最大的元素随内容加载而变化。...） CLS（Cumulative Layout Shift）累计布局偏移，CLS 衡量的是页面整个生命周期中每次元素发生的非预期布局偏移得分的总和。...）累计布局偏移 ≤0.1 >0.25 75 测量 Web Vitals 性能测试工具，比如 Lighthouse 使用 web-vitals 库使用浏览器插件 Web Vitals 优化 Web

1.5K2 1

超全对照！前端监控的性能指标与数据采集

当然技术上可以用JS把当前页面保存成一个Canvas，做一些逐帧对比，甚至把这些数据回传回去。但是在实践过程中，我们肯定不会这样做，因为这对用户的流量是极大的浪费。...导致这种预料之外的的内容布局移动，可能是因为资源的异步加载、JS对dom元素的动态操作、未知尺寸图片加载等等。对用户来说，这是一种糟糕的用户体验。CLS就是用来衡量此类的体能指标。...什么是一个好的CLS分数？75%以上的用户小于0.1。布局偏移的具体内容布局偏移是由Layout Instability API定义的。...需要注意的是，布局偏移只发生在已经存在的元素改变起始位置的时候。如果一个新的元素被添加到dom上，或者已存在的元素改变它的尺寸，除非改变了其他元素的起始位置，否则都不算布局偏移。...上图，不稳定元素在纵向移动了25%，所以距离分数是0.25。所以布局偏移分数是： CLS: 0.75 * 0.25 = 0.1875 API 指标关注哪些数据？

3.3K3 1

前端监控 SDK 的一些技术要点原理分析

)，从页面加载开始和其生命周期状态变为隐藏期间发生的所有意外布局偏移的累积分数这四个性能指标都需要通过 PerformanceObserver 来获取（也可以通过 performance.getEntriesByName...CLS CLS(layout-shift)，从页面加载开始和其生命周期状态变为隐藏期间发生的所有意外布局偏移的累积分数。...距离分数指的是任何不稳定元素在一帧中位移的最大距离（水平或垂直）除以可视区域的最大尺寸维度（宽度或高度，以较大者为准）。 CLS 就是把所有布局偏移分数加起来的总和。...当一个 DOM 在两个渲染帧之间产生了位移，就会触发 CLS（如图所示）。上图中的矩形从左上角移动到了右边，这就算是一次布局偏移。...同时，在 CLS 中，有一个叫会话窗口的术语：一个或多个快速连续发生的单次布局偏移，每次偏移相隔的时间少于 1 秒，且整个窗口的最大持续时长为 5 秒。

2.1K3 0

前端性能优化--数据指标体系

建立一个完善的性能指标体系，便可以在需求开发阶段发现页面性能的下降，及时进行修复。前端性能指标体系 为什么需要进行性能优化呢？...PageSpeed Insights (PSI) PageSpeed Insights (PSI) 是一项免费的 Google 服务，可报告网页在移动设备和桌面设备上的用户体验，并提供关于如何改进网页的建议...Lighthouse API（模拟实验室数据） Lighthouse API 评估一次一页一次一页或一次多页指标核心网络生命、页面速度性能指标（首次内容绘制、速度指数、最大内容绘制、交互时间、总阻塞时间、累积布局偏移...Cumulative Layout Shift (CLS) 指标便是用来衡量在网页的整个生命周期内发生的每次意外布局偏移的最大突发布局偏移分数。...DCLS += entry.value; }); }).observe({type: "layout-shift", buffered: true}); }); 布局偏移分数是该移动两个测量的乘积

2551 0

基于RUM的前端优化理论与实践-性能篇

目前Google的Web Vitals源码中提供了5个指标，分别为： CLS（Cumulative Layout Shift-累积布局移位）：CLS会衡量在网页的整个生命周期内发生的所有意外布局偏移的得分总和...得分是零到任意正数，其中0表示无偏移，且数字越大，网页的布局偏移越大。...FCP（First Contentful Paint-首次内容绘制）：FCP度量从页面开始加载到页面内容的任何部分呈现在屏幕上的时间，页面内容包括文本、图像（包括背景图像）、元素或非白色的<canvas...CLS指标优化 CLS指的是页面布局偏移量，再次简单分析，我们发现用户有一个长列表是页面主要渲染内容，该列表存在的问题是：因为数据不多，一般在4-10条数据，所以开发者没有对列表做分页。...没有分页带来的问题是，列表无法在渲染之初就确定长度，导致获取数据后渲染列表的时候页面发生较大的偏移，同时也带来了超多的DOM变化。

5312 0

基于 RUM 的前端优化理论与实践 - 性能篇（一）

CLS（Cumulative Layout Shift - 累积布局移位）: CLS 会衡量在网页的整个生命周期内发生的所有意外布局偏移的得分总和。...得分是零到任意正数，其中 0 表示无偏移，且数字越大，网页的布局偏移越大。 2....FCP（First Contentful Paint - 首次内容绘制）：FCP 度量从页面开始加载到页面内容的任何部分呈现在屏幕上的时间，页面内容包括文本、图像（包括背景图像）、元素或非白色的...CLS 指标优化 CLS 指的是页面布局偏移量，再次简单分析，我们发现用户有一个长列表是页面主要渲染内容，该列表存在的问题是：因为数据不多，一般在 4 - 10 条数据，所以开发者没有对列表做分页。...没有分页带来的问题是，列表无法在渲染之初就确定长度，导致获取数据后渲染列表的时候页面发生较大的偏移，同时也带来了超多的 DOM 变化。

7953 0

前端到底要怎么去性能优化？

这种强制的布局过程可能会导致显著的性能瓶颈，因为它阻塞了主线程，直到布局计算完成。布局抖动：布局抖动通常是由于代码在一次事件循环中多次读写 DOM 属性而导致的连续布局计算。...每次读取或写入都可能导致布局的重新计算，如果这些操作在循环或频繁的函数调用中进行，就会导致大量的计算开销，从而降低页面性能。尽可能减少DOM的数量和深度，降低DOM重新渲染所造成的性能影响。...最终CLS的值等于0.5 * 0.2 = 0.1。CLS低于0.1可以代表视觉稳定性比较好。被误解的CLS统计不知道会不会有些人和我一样有这样的困惑。...我的页面可能有以下场景，例如点击展开，又或者是搜索框展示提醒之类的，用户的一些交互输入导致页面偏移，这些情况导致的偏移都会被统计到CLS中去么？...因为这些用户主动去进行的输入，说明用户是对偏移有预期的，但是例如页面加载的时候，资源加载缓慢导致的偏移，这种才会被理解为意料之外的偏移，最终被统计到CLS的指标中去。

1971 0

干货 | 提升50分，Trip.com 机票基于 PageSpeed 的前端性能优化实践

，Cumulative Layout Shift 累积布局偏移 1.2 指标介绍接下来简单介绍下主要性能指标的具体定义： 1.2.1 FCP FCP 指标测量的是页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间...1.2.5 CLS 累积布局偏移指标用于衡量页面视觉稳定性。单次布局偏移分数是影响分数（不稳定区域占可视区域的百分比）与距离分数（不稳定元素最大位移距离占比）的乘积。...CLS 指标本身一直在不断进化，便于更加准确地去衡量布局偏移对用户的影响。...实验室测量的是在一系列特定条件下的性能数据，不能完全反映现实世界中用户的真实情况。现场测量的优势在于样板量足够大，包罗各种不同设备不同网络环境下的用户性能数据，从统计上更能反映真实性能情况。...3.7 减少布局偏移如何调试监控使用对应的 Layout Instability API 可收集用户的布局偏移数据。

6153 0

重磅！Flutter 2 来了！

现在，这些体验已经能够在台式机与移动设备上原生运行。我们一直在扩展 Flutter 以构建起行业最佳的 Web 平台。...Flutter 2 登陆台式机、折叠式设备与嵌入式设备除了传统移动设备与 Web 平台之外，Flutter 也开始为其他设备类型提供支持。...而这种轻松过渡至 Web、桌面与嵌入式设备的优势，在很大程度上要归功于 Dart——针对多平台开发并进行优化的谷歌编程语言。...在构建应用方面，Dart 提供一套独特的功能组合：稳健的可移植表现，其编译器能够面向移动与台式机设备生成高性能的英特尔与 ARM 机器码，并为 Web 环境提供经过严格优化的 JavaScript 输出...在 Flutter 中，我们还提供一套开源工具包，可通过单一代码库构建起面向移动、桌面、Web 以及嵌入式设备的出色应用程序，将谷歌级别的质量水准引入您的实际需求场景当中。

1.5K2 0

当我们进行性能优化，我们在优化什么（LightHouse优化实操）

可以在Chrome浏览器开发人员工具中找到LightHouse。 ...要打开“开发人员工具”，请选择： “顶部菜单→查看→开发人员→开发人员工具” 或者使用快捷键： Mac系统上的“⌥+⌘+I” Win系统上的“F12+Ctrl+Shift...由于浏览器不会打断正在进行中的长任务，所以，如果用户在执行长任务时和页面有交互事件时，浏览器必须等到该长任务完成才能响应。TBT计算的是在FCP到TTI之间所有长任务时间内总和。 ...Cumulative Layout Shift 【简称CLS: 累积布局偏移】 CLS累积布局偏移旨在测量可见元素在视口内的移动情况。CLS值越小越好。 ...对于特定的图片，比如Logo，使用svg格式图片，请移步：Logo小变动，心境大不同，SVG矢量动画格式网站Logo图片制作与实践教程(Python3) 同时，对于图片一律声明宽高属性，并且使用支持

6462 1

小型化和云服务是趋势：传统台式机将被淘汰

而且在台式机上做出创新并不容易，所以我们看到，针对家庭用户的台式机产品越来越少，而且绝大多数都是中低端定位，PC厂商自然不会在这样的产品上花心思，所以会循规蹈矩的沿用以前的机箱设计，台式机体积自然小不了...基于以上分析判断，在未来一到两年，台式机的体积也不会发生太大变化，依旧会以中塔为主。...其中最重要的体现有两点，一点是物理开关变成屏幕上的按钮，另一点是数据的交流与分享会集中在云端。...当然，以上场景距离现在还很遥远，不过我们能够看到，未来是人工智能和物联网的时代，像电脑、手机只不过是互联网时代下的产物，在新时代到来之后，势必会出现新的设备改变我们的生活。...家用台式机是互联网时代的宠儿、移动互联网时代的孤儿，物联网可能会给台式机新的身份，但也会很快被其他设备取代。

2.1K8 0

性能优化到底应该怎么做

本地实验衡量：本地模拟用户的网络、设备等情况进行测试。通常在开发新功能的时候，实验测量是很重要的，因为我们不知道这个功能发布到线上会有什么性能问题，所以提前进行性能测试，可以进行预防。...所以FID是在TTI的基础上更精确的细分。 为什么FID只是包含从用户输入到主线程开始相应的时间？而没有包含事件处理到浏览器绘制UI的时间？...CLS就是帮我们去发现这些真实发生在用户端的问题的指标。 CLS是测量页面生命周期中，每个发生意外布局移动的分数。当一个可视元素在下一帧移动到另外一个位置，就是指布局移动。...CLS的分数在0.1或以下，则为Good。那么意外布局移动的分数如何计算？浏览器会监控两桢之间发生移动的不稳定元素。...目前大多数设备的屏幕刷新率为 60 次/秒，浏览器渲染页面的每一帧的速率如果与设备屏幕的刷新率保持一致，即60fps时，我们是不会感知到页面卡的情况的。

2.7K34 3

关于移动端适配，你必须要知道的

当然，仅仅是类似，由于各个设备的尺寸、分辨率上的差异，设备独立像素也不会完全相等，所以各种 Android设备仍然不能做到在展示上完全相等。...在移动端，布局视口被赋予一个默认值，大部分为 980px，这保证 PC的网页可以在手机浏览器上呈现，但是非常小，用户可以手动对网页进行放大。...这时，1个 CSS像素就等于1个设备独立像素，而且我们也是基于理想视口来进行布局的，所以呈现出来的页面布局在各种设备上都能大致相似。...而在设备像素比大于 1的屏幕上，我们写的 1px实际上是被多个物理像素渲染，这就会出现 1px在有些屏幕上看起来很粗的现象。...不同于位图的基于像素， SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。 ?

1.9K2 0

关于移动端适配，你必须要知道的

当然，仅仅是类似，由于各个设备的尺寸、分辨率上的差异，设备独立像素也不会完全相等，所以各种 Android设备仍然不能做到在展示上完全相等。...在移动端，布局视口被赋予一个默认值，大部分为 980px，这保证 PC的网页可以在手机浏览器上呈现，但是非常小，用户可以手动对网页进行放大。...这时，1个 CSS像素就等于1个设备独立像素，而且我们也是基于理想视口来进行布局的，所以呈现出来的页面布局在各种设备上都能大致相似。...而在设备像素比大于 1的屏幕上，我们写的 1px实际上是被多个物理像素渲染，这就会出现 1px在有些屏幕上看起来很粗的现象。...不同于位图的基于像素， SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。 ?

2K1 0

关于移动端适配，你必须要知道的

当然，仅仅是类似，由于各个设备的尺寸、分辨率上的差异，设备独立像素也不会完全相等，所以各种 Android设备仍然不能做到在展示上完全相等。...在移动端，布局视口被赋予一个默认值，大部分为 980px，这保证 PC的网页可以在手机浏览器上呈现，但是非常小，用户可以手动对网页进行放大。...这时，1个 CSS像素就等于1个设备独立像素，而且我们也是基于理想视口来进行布局的，所以呈现出来的页面布局在各种设备上都能大致相似。...而在设备像素比大于 1的屏幕上，我们写的 1px实际上是被多个物理像素渲染，这就会出现 1px在有些屏幕上看起来很粗的现象。...不同于位图的基于像素， SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。 ?

1.9K4 1

一个侧边栏导航组件实现思路

有些用户使用键盘，有些用户使用强大的台式机，还有一些用户使用小型移动设备访问。每个访问者都应该能够打开和关闭菜单。 ?...桌面到移动设备响应式布局演示用了哪些技术在这次组件探索中，我很高兴地结合了一些关键的网络平台特性：伪类 CSS Grid transforms 媒体查询和用户偏好 CSS 用户增强体验我的解决方案只有一个侧边栏...，只有在“移动”视口为540px 或更小时才能切换。...540px 将是我们在移动交互式布局和静态桌面布局之间切换的断点。伪类一个链接将 url 散列设置为 #sidenav-open，另一个设置为 empty('')。...为了将移动设备上 Sidenav 的默认状态设置为屏幕外状态，我将元素的位置设置为： transform: translateX (- 110vw); 注意，我在典型的屏幕外代码 -100vw 中添加了

3.6K4 0

解读新一代 Web 性能体验和质量指标

CLS 视觉稳定性 ? 您是否曾经在访问一个 Web 页面时发生下面的情况？在阅读文章的同时文字突然移动了、你突然找不到你阅读的位置了、点按钮的时候按钮被移动到了其他地方，导致你点了其他东西？...CLS 会测量在页面的整个生命周期中发生的每个意外的样式移动的所有单独布局更改得分的总和。布局的移动可能发生在可见元素从一帧到下一帧改变位置的任何时候。...为了提供良好的用户体验，网站应努力使 CLS 分数小于 0.1 。如何计算 CLS? 布局偏移分值为了计算布局的偏移值，浏览器会查看两个渲染帧之间的视口大小和视口中不稳定元素的移动。...布局偏移分是该移动的两个指标的乘积:影响分数和距离分数。...距离分数布局偏移值方程的另一部分测量不稳定元素相对于视口移动的距离。距离分数是任何不稳定元素在框架中移动的最大距离(水平或垂直)除以视口的最大尺寸(宽度或高度，以较大的为准)。 ?

2K3 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭