我有一个 div 使用：
-webkit-clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 100%);
在另一个 div 中的这个 div 中有一个图像。这个特定代码导致 chrome 性能下降是否有原因 - 滚动也变得不稳定。在 Firefox 中，一切看起来都很正常。
奇怪的是，它只会在视图位于该元素上时影响滚动，一旦你滚动过去它看起来又好了
clip-path使用 GPU 进行渲染，因此很可能是显卡/驱动程序问题，或者您的系统资源不足而无法有效渲染。
尝试在其他机器上查看是否存在同样的问题。
\n\n要了解性能问题以及如何调试它们，这些文章将有所帮助
\n\n\n\n调试画布元素
\n\nChrome 允许您通过开发者工具分析和调试画布元素。\n 它可用于 2D 和 WebGL 画布项目。
\n\n为此，您需要启用“实验”选项卡。\n 如果尚未启用，请导航至 chrome://flags 并启用\n 标记为“启用开发人员工具实验”的选项。您需要按页面底部的“立即重新启动”按钮才能应用您的更改。单击右下角的齿轮\n，转到 Chrome 开发者工具的“设置”面板。单击“实验”选项卡并选中“画布检查”选项。
\n\n现在访问“配置文件”选项卡，您将看到一个名为“捕获\n画布框架”的选项。开发人员工具可能会要求您重新加载页面以\n使用画布。按“开始”捕获画布应用程序的单个帧。或者，您可以单击下面的框切换到\n“连续帧”，这样可以捕获多个帧。
\n\nChrome 会创建每次调用画布的日志，提供每次调用上下文的列表和屏幕截图。您可以单击日志项之一以在开发人员工具中重播该帧，并查看按调用顺序以及从哪一行调用了哪些命令。
\n\nFirefox 具有 Canvas 和 WebGL Shader 调试器，为您提供检查帧、fps、修改着色器等功能。
\n\n为了启用这些工具，请转到开发工具设置（开发工具中的齿轮图标\n）并选中“画布”和“着色器编辑器”。
\n\n选择您的房产
\n\n动画不是选择语法，而是设计动画以实现快速渲染。流畅、逼真的动画和卡顿、断断续续的动画之间的区别很少像 CSS 与 JavaScript 之间的区别那么简单。相反，它通常由您在哪些元素上设置动画的属性或属性决定。
\n\n无论您是使用 CSS 还是使用 SMIL 或 JavaScript 更改样式属性，浏览器都需要确定屏幕上的哪些像素需要更新以及如何更新。
\n\n如果 DOM 和样式计算步骤确定任何元素的样式或 SVG 渲染属性均未发生更改，则浏览器可以立即停止。
\n\n如果更改的样式不影响布局（仅绘制），或者某些元素的布局已更改但其他元素未更改，则浏览器必须确定需要重新绘制哪些部分。该区域称为\n\n 屏幕的 \xe2\x80\x9cdirty\xe2\x80\x9d 矩形。屏幕上其他位置的元素可以被跳过，其像素在此更新中保持不变。
\n\n更改的元素通常需要重新绘制，但也可能需要重新绘制其他元素。更改的元素是否与现在显示的另一个元素重叠？如果是这样，浏览器可能需要重新绘制该背景元素。
\n\n但也许不是。
\n\n这取决于浏览器内存中是否保存有背景的原始像素数据。大多数现代计算机和智能手机中的图形处理单元 (GPU) 可以在内存中保留一定数量的渲染层，而不仅仅是屏幕上显示的最终版本。主浏览器程序还可以将部分图像保存在内存中。
\n\n浏览器渲染优化的大部分内容都取决于它如何选择将渲染文档的哪些部分划分为单独缓存（保存）的层。
\n\nGPU 可以在缓存的渲染层上执行某些操作，并且针对它们可以执行的有限数量的操作进行了高度优化。
\n\n如果浏览器知道某个元素将以 GPU 可以有效计算的方式发生变化，则可以将该图像\xe2\x80\x99s 像素\n 数据保存在与其背景（或前景）不同的 GPU 层中）。因此，可以通过向 GPU 发送新指令以了解如何组合保存的像素来应用动画更改，而不是在主处理器中计算新像素值。
\n\n提示 大多数浏览器开发工具现在都具有在更新时突出显示 \xe2\x80\x9cdirty\xe2\x80\x9d\n 绘制矩形的选项。如果您的动画正在进行 GPU 优化，则在运行此开发工具模式时，您将不会看到任何闪烁的彩色矩形。
\n\n当然，所有 GPU 优化途径的条件是拥有可用的兼容 GPU\xe2\x80\x94，并且浏览器知道如何使用它，\n 这可能取决于操作系统。因此，浏览器性能，有时甚至是浏览器错误，不仅取决于浏览器版本，还取决于操作系统和硬件。
\n\n大多数 GPU 可以调整已保存图层的不透明度，并在组合它们之前将它们转换到不同的相对位置。它们还可以\n执行图像缩放，通常包括3D透视缩放\xe2\x80\x94，但是\n缩放是在像素级别而不是矢量级别上计算的，并且\n可能会导致明显的分辨率损失。更先进的 GPU 可以计算一些滤镜操作和混合模式，以及使用 alpha 遮罩层对一个图像层进行遮罩。
\n\n一些 GPU 还具有优化的矢量光栅化功能，可以计算高分辨率矢量形状，以用作其他矢量级别的剪切路径。不过，这些 \xe2\x80\x9c剪切路径\xe2\x80\x9d 仅用于 \n
\n\nclip-path效果。填充和描边形状是将绘画图像图层剪切到填充区域或描边区域矢量轮廓。同样，CSS border-radius 效果是内容和背景图像层上路径的矢量裁剪。但目前您不能\xe2\x80\x99 依赖最终用户拥有这些优化的路径。
\n\n在各种浏览器和硬件上，最佳性能来自于可以分解为层（元素、组或单个图形）的动画，这些层通过以下方式进行动画处理：
\n\n不透明度变化
\n\n平移和旋转变换
\n\n警告 目前，Chrome 永远不会将 SVG 图形划分为不同的 GPU 层（尽管它们做了其他优化）。
\n\n要在 Chrome 中创建完全 GPU 优化的动画，您有时可以\n 将单独的内联元素放置在彼此之上，\n 创建自己的图层。
\n\n如果您无法\xe2\x80\x99 完全在平移和不透明度\n 层中定义动画，请考虑以下准则：
\n\n最小化每帧的 \xe2\x80\x9cdirty\xe2\x80\x9d 矩形的大小。
\n\n纯色对象比半透明对象更好，因为浏览器不需要计算可以在固体对象后面看到的形状的像素更新。（尽管如果浏览器使用 GPU 层进行优化，则这可能不适用。）
\n\n移动元素比改变它们的外观更有效。（尽管 \xe2\x80\x9cmove around\xe2\x80\x9d 是否仅适用于变换移动或其他绝对位置更改取决于浏览器。）
\n\n更改填充和描边比更改形状和大小更有效。\n
\n\n缩放变换比更改底层几何图形更好；浏览器可以使用 GPU 图像缩放来实现动画缩放效果，而不是在每帧以正确的分辨率重新计算矢量图像。
\n\n剪切通常比遮蔽更有效。
\n\n避免重新缩放渐变和图案层；如果边界框正在更改，这可能意味着使用用户空间效果而不是边界框效果。
\n\n避免任何需要重新计算过滤器的更改。这包括对已过滤元素或其子内容的任何更改。
\n
| 归档时间： |
|
| 查看次数： |
2678 次 |
| 最近记录： |