我有一个使用的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进行渲染，因此可能是图形卡/驱动程序问题，或者您的系统资源不足，无法有效渲染。
尝试在其他计算机上查看以查看是否存在相同的问题。
要了解性能问题以及如何调试它们，这些文章将有所帮助
Debugging a Canvas Element
Chrome允许您从开发人员工具中分析和调试画布元素。它可以用于2D和WebGL画布项目。
为此，您需要启用“实验”标签。如果您还没有，请导航到chrome：// flags并启用标记为“启用开发人员工具实验”的选项。您需要按页面底部的“立即重新启动”按钮才能应用更改。点击右下方的cog，进入Chrome开发者工具的“设置”面板。单击“实验”选项卡，然后选中“画布检查”选项。
现在访问“配置文件”选项卡，您将看到一个名为“捕获画布框架”的选项。开发人员工具可能会要求您重新加载页面以使用画布。按“开始”可捕获画布应用程序的单个帧。或者，您可以单击下面的框切换到“连续帧”，允许捕获多个帧。
Chrome会创建每个画布调用的日志，提供每个上下文调用的列表和屏幕截图。您可以单击其中一个日志项以重放开发人员工具中的框架，并查看按调用顺序和从哪一行调用的命令。
Firefox具有Canvas和WebGL Shader调试器，为您提供检查帧，fps，修改着色器等功能。
要启用这些工具，请转到Devtools设置（devtools中的cog图标）并选中“Canvas”和“Shader Editor”。
Picking Your Properties
动画不是选择语法，而是设计动画以便快速渲染。平滑，逼真的动画和笨拙的动画之间的区别很少像CSS和JavaScript一样简单。相反，它通常由您设置动画的属性或属性决定，在哪些元素上。
无论您是使用CSS还是使用SMIL或JavaScript更改样式属性，浏览器都需要确定屏幕上哪些像素需要更新，以及如何更新。
如果DOM和样式计算步骤确定没有为任何元素更改样式或SVG渲染属性，则浏览器可以在那里停止。
如果更改的样式不影响布局（仅绘画），或者某些元素的布局已更改但其他元素的布局未更改，则浏览器必须确定需要重绘的部分。该区域被称为屏幕的“脏”矩形。可以跳过屏幕上其他位置的元素，此更新的像素不变。
更改的元素通常需要重新绘制，但也可能需要重新绘制。更改的元素是否与另一个元素重叠，现在已经显示了？如果是这样，浏览器可能需要重绘该背景元素。
但也许不是。
这取决于浏览器是否具有保存在内存中的背景的原始像素数据。大多数现代计算机和智能手机中的图形处理单元（GPU）可以在内存中保留一定数量的渲染层，而不仅仅是屏幕上显示的最终版本。主浏览器程序还可以将部分图像保存在存储器中。
许多浏览器渲染优化归结为它如何选择渲染文档的哪些部分分成单独的缓存（保存）层。
GPU可以在缓存的渲染层上执行某些操作，并且针对他们可以执行的有限数量的操作进行了高度优化。
如果浏览器知道元素将以可以由GPU有效计算的方式改变，则他们可以将该图像的像素数据保存在与其背景（或前景）不同的GPU层中。因此，可以通过向GPU发送新指令来应用动画变化，以便如何组合所保存的像素，而不是通过计算主处理器中的新像素值。
提示大多数浏览器Dev Tools现在都有选项，可以在更新时突出显示“脏”绘制矩形。如果您的动画是经过GPU优化的，那么当您运行此开发工具模式时，您将看不到任何彩色矩形闪烁。
当然，所有GPU优化的路径都取决于具有可用的兼容GPU，并且在浏览器上知道如何使用它，这可能取决于操作系统。因此，浏览器性能，有时甚至是浏览器错误，不仅取决于浏览器版本，还取决于操作系统和硬件。
大多数GPU可以调整已保存图层的不透明度，并在组合之前将它们转换为不同的相对位置。它们还可以执行图像缩放，通常包括3D透视缩放 - 但缩放是在像素级别而非矢量级别上计算的，并且可能导致分辨率的可见损失。更高级的GPU可以计算一些滤镜操作和混合模式，以及使用alpha遮罩层遮罩一个图像层。
一些GPU还具有优化的矢量光栅化，其可以计算高分辨率矢量形状以用作其他矢量水平的剪切路径。不过，这些“剪切路径”不仅用于
clip-path效果。填充和抚摸形状会将绘制图像图层剪切到填充区域或笔划区域矢量轮廓。类似地，CSS边界半径效果是内容和背景图像层上的矢量剪切路径。但是，您目前无法依赖拥有这些优化路径的最终用户。
在各种浏览器和硬件中，最佳性能来自动画，可以分为以下列方式设置动画的图层（元素，组或单个图形）：
不透明度变化
平移和旋转变换
警告目前，Chrome从不将SVG图形划分为不同的GPU层（尽管它们会进行其他优化）。
要在Chrome中创建完全GPU优化的动画，您有时可以将单独的内嵌元素放在彼此之上，从而创建自己的图层。
如果无法完全在平移和不透明度图层中定义动画，请考虑以下准则：
最小化每帧的“脏”矩形的大小。
纯色对象优于半透明对象，因为浏览器不需要计算在实体对象后面看不到的形状的像素更新。 （尽管如果浏览器使用GPU层进行优化，这可能不适用。）
移动元素比改变它们的外观更有效。 （虽然取决于浏览器，“四处移动”是仅适用于变换运动还是其他绝对位置变化。）
改变填充和行程比改变形状和尺寸更有效。
缩放变换比改变底层几何体更好;浏览器可能能够将GPU图像缩放用于动画缩放效果，而不是在每帧以正确的分辨率重新计算矢量图像。
剪切通常比屏蔽更有效。
避免重新调整渐变和图案层;如果边界框正在改变，这可能意味着使用用户空间效果而不是边界框效果。
避免任何需要重新计算过滤器的更改。这包括对已过滤元素或其子内容的任何更改。