如果您注意到基于WebKit的浏览器执行一些CSS操作（尤其是和谐）时出现的“闪存”，那么您可能会联系“硬件加速度”一词。
简而言之：硬件加速度意味着图形处理单元（GPU）将帮助您的浏览器渲染网页并做一些繁重的工作，而不是将所有这些任务扔给中央处理单元（CPU）。由于页面的更快渲染速度，由于硬件加速，其速度也得到了提高。
正如他们的名字所示，CPU和GPU均为处理单元。CPU位于计算机的主板上，称为计算机？GPU位于计算机的图形卡上，负责处理和渲染图像。此外，GPU设计用于复杂的数学和几何计算。这些计算也是图形渲染的必要条件。因此，向GPU处理进行操作可以产生巨大的性能改善，还可以减少移动设备上的CPU战斗。
硬件加速度（也称为GPU加速度）取决于浏览器渲染页面中使用的分层模型。页面上的某些操作（例如3D变换）在页面上时，该元素将移至其自己的“图层”，其中元素将移动到其中的“层”，其中它可以由页面的其他部分渲染，并将在以后合成。（在屏幕上绘制）。通过这种方式，隔离内容的渲染。如果元素的转换是框架之间的唯一变化，则页面的另一部分不需要重新启动，通常会提供显着的速度优势。自己的层，没有2D转换。
CSS和GPU加速度将不会自动执行，这通常是由带有慢速浏览器的慢软软件渲染引擎执行的。但是，有些浏览器通过某些属性提供了硬件加速度，以获得更好的渲染性能。
例如，不透明是可以适当加速的少数CSS属性之一，因为GPU可以轻松地操纵它。基本地，如果您在内部或内部淡化不透明的程度，浏览器将智能地将其抛入GPU操作，以及速度和速度将非常快。不透明是所有CSS属性中最好的性能之一，并且您不会遇到任何问题。其他常见的硬件加速操作是CSS 3D变换。
很长一段时间以来，我们一直使用（或）黑客（有时称为Null Transform Hack）来欺骗浏览器以推动硬件加速。
通过将一个简单的三维更改添加到一个不会在三维空间中变化的元素。例如，两个维空间的元素可以添加此简单规则以加速硬件：
硬件加速操作将创建一个如此被称为合成的合成层并将其上传到GPU以进行合成。
尽管图层创建技术可以提高页面速度，但有一定的价格：它们将在系统RAM和GPU上占据内存（在移动设备上非常有限），并且会有大量的层来产生不良影响（尤其是在其中，尤其是Inon移动设备），必须明智地使用它们来确保它们能够真正帮助页面性能，并且性能瓶颈并不是您页面上的其他操作引起的。
为了避免图层创建的黑客行为，我们引入了一个新的CSS属性。它使我们能够提前通知浏览器，我们可能会在元素上进行更改，以便浏览器可以预先为元素制作一些适当的元素。优势化。例如，在动画开始之前进行了一些潜在的准备工作。
属性允许您提前通知浏览器您可能会更改元素的内容，以便它可以提前设置适当的优化，以避免在页面上可能产生负面影响的启动成本。这些元素可以更改和更快地渲染，并且页面将能够快速更新，从而带来更流畅的体验。
例如，当在元素上使用CSS三维转换时，该元素及其内容可能会如前所述，然后将其合成（在屏幕上绘制）。新层是一个相对昂贵的操作，这可能会使转换动画的开始时间延迟了几秒钟，从而导致了明显的“闪烁”。
为了避免此延迟，您可以在更改之前的一段时间内通知浏览器。这样，浏览器将有一些时间准备这些更改。当发生这些变化时，将准备元素的层。可以执行转换，然后可以渲染元素，并且页面将快速更新。
使用，提示浏览器提示即将进行的更改，您可以将此简单的规则添加到您期望被转换的元素中：
您还可以向浏览器声明您打算更改元素的滚动位置（可见的滚动窗口中的元素位置以及在窗口中的可见度），或更改其内容，一个或多个CSS属性值，一个或多个CSS属性值，一个或多个CSS属性值，一个或多个CSS属性值，一个或多个CSS属性值，一个或多个CSS属性值，一个或多个CSS属性值，一个或多个CSS属性值，一个或多个CSS属性值，一个或多个CSS属性值，一个或多个CSS属性值，一个或多个CSS属性值，一个或多个CSS属性值，一个或多个CSS属性值，一个或多个CSS属性值，一个或多个CSS属性值，一个或多个CSS属性值，一个或多个CSS属性值，一个或多个CSS属性值。该方法是指定您期望更改的属性的名称。如果您期望或计划更改一个元素的多个项目，则可以提供列表逗号分隔的值。
例如，如果您要更改元素的位置，则可以以这种方式将其声明为浏览器：
指定要更改的特定内容可以使浏览器更好地优化这些特定更改。这显然可以改善改进的更好方法，而无需诉诸黑客和强迫浏览器来创建不必要的层。
如果您声明的内容并将其告知浏览器的属性。如果属性的任何非初始值都会在此元素上创建堆叠上下文，则指定属性将在元素上创建堆叠上下文层。
翻译器注意：如果元素包含一层重叠，我们可以理解z轴上该元素的级别更高。换句话说，网页中的元素级别更高，更接近用户。
例如，当属性不是初始值时，它们将在应用元素上创建堆叠上下文一层。因此，这些属性中一个（或两个）的值将在元素上创建堆叠上下文一层，甚至在实际更改之前创建。这也适用于将在元素上创建层的其他属性。
此外，某些属性可能会在固定位置中引起元素的块。例如，转换后的元素为其定位的所有子元素创建一个块，即使是已设置的元素。因此，如果属性引起一块块，然后由其指定的值也将导致固定位置元素产生块。
转换器注意：通常，CSS中元素的位置和大小的计算相对于矩形。该矩形称为包含块。
如前所述，一些更改将导致创建新的合成层。但是，GPU不支持大多数浏览器中CPU的子像素抗氧化，有时会导致内容模糊（尤其是文本）。
此外，属性对其指定元素没有直接影响。它只是浏览器的渲染提示，它允许其优化元素的更改。此外，在创建堆叠上下文和在上述情况下包含块的创建，它对元素没有直接影响。
知道角色后，您可能会想：“只要让浏览器优化所有内容！”这个想法是合理的。谁不希望所有更改在需要时进行优化和准备？
尽管如此，它与其他类型的“权力”没有什么不同。滥用它将导致性能罢工，并可能崩溃您的页面。
像任何优化一样，有些副作用无法直接感知（毕竟，这只是与幕后浏览器交谈的一种方式），因此它的使用可能很棘手。在这里，您需要注意一些事情使用此属性来确保您能够获得最佳效果，同时避免滥用损害。
正如我之前提到的，如果您告诉浏览器优化所有元素上可能发生的所有属性的更改：
尽管这看起来不错，而且起初它非常有意义，但实际上非常有害，而且更多的操作无效。仅关键字无效（我们将在文章背后介绍有效和无效的列表），此类规则包是没有用。
浏览器已经尽可能地优化了所有内容（请记住使用3D更改？），因此这并没有真正改变任何东西，也没有帮助。实际上，这样做可能会占据机器的大量资源。如果您使用太多，则页面会减慢甚至崩溃。
换句话说，让浏览器准备可能不会发生的更改并不是一件好事。
该属性称为意志，因为浏览器即将发生，而不是发生的更改。
在使用中，我们要求浏览器优化我们声明的更改。为了实现此目标，浏览器需要一些时间来实际优化这些优化。这样，当发生变化时，可以毫不延迟地应用优化。
在更改元素之前立即进行设置，几乎没有效果。（实际上可能比设置还要糟糕，并且可能有一个新的层成本，而您之前正在做的动画则没有资格制作新层！）
例如，如果悬停时会发生更改：
…告诉浏览器以优化发生的更改是毫无用处的。这否认了背后的整个概念。相反，您应该找到一种方法，至少可以预测一些可以预先改变并设置它的方法。
例如，如果单击时元素更改，则在暂停元素时设置Will-Change，以便浏览器足以优化。从用户到元素之间的实际单击足以优化浏览器进行优化设置。由于人类的响应时间相对较慢，因此浏览器将在更改前有大约200ms的时间窗口。
但是，如果您想在挂断电话时要更改，而不是单击时？上面的语句将毫无用处。在这种情况下，仍然可以找到某些方法来预测行动发生之前的情况。
例如，悬停元素的祖先可能会提供足够的准备时间：
但是，悬停的祖先并不总是表明该元素肯定会是互动的，因此您可以执行某些操作，例如当视图在应用程序中处于活动状态，或者如果可见端口可见元素，则该元素在viewport.set Will-Change的可见部分，这将增加与元素互动的机会。
浏览器对即将进行的更改的优化通常会占用机器的许多资源，通常删除这些优化以尽快返回正常行为。。
因此，您应始终记住在元素更改完成后删除，以便浏览器可以通过优化恢复资源。
如果在样式表中声明它，则不可能将其删除。这就是为什么建议您使用JavaScript设置和取消它。通过脚本，您可以将修改声明为浏览器，然后在修改完成后通过监视这些修改来删除它。
例如，就像我们在上一节的样式中所做的那样，您可以在暂停元素（或其祖先）时监视，然后在鼠标输入时设置意外变化。如果您的元素是动画的，则可以使用动画结束时要收听的DOM事件，然后在触发时将其删除。
克雷格·巴克勒（Craig Buckler）撰写了一篇有关在JavaScript中捕获CSS动画事件的文章。如果您不熟悉这一点，可以去看。也有有关CSS动画和CSS-Tricks过渡的文章，这也值得一看。
正如我们在上一节中看到的那样，它可用于提示浏览器以几毫秒的方式更改某个元素。这是样式表中声明的用例之一。尽管我们建议使用JavaScript设置并取消它，但在某些情况下，将其设置（并将其保留在样式表中）是适当的。
一个示例：设置某些元素，这些元素可能会由用户重复进行交互，并应以快速的方式响应用户的互动。有限元素的数量意味着浏览器的优化不会过于使用，因此会有没有重大伤害。
例如，在用户需要时，它通过将侧栏滑出侧边栏来转换它。以下规则非常合适：
另一个示例：使用更改元素，例如响应用户鼠标运动的元素，随着鼠标移动而移动。在这种情况下，仅可能在样式表中进行语句的值，因为它准确地描述了定期/连续更改的元素，因此应保持优化。
有四个属性值：，和。
值用于指定您期望更改的一个或多个属性的名称。多数属性通过逗号分隔。
以下是带有指定属性名称的有效语句的示例。
：不包括通常排除的关键字，以及一些关键字。因此，正如我们在文章开头所述的那样，该语句无效，并且浏览器将被忽略。
没有特殊的含义。除了通常的优化外，浏览器将无法设置任何特殊优化。
：顾名思义，这意味着您希望在不久的将来的任何时间更改元素的滚动位置。该值非常有用。使用时，浏览器将准备并渲染滚动元素上滚动窗口的内容以外的内容。浏览器通常仅在滚动窗口中呈现内容以及窗口内容的一部分，以平衡由于跳过渲染而节省了内存和时间，并使滚动看起来更漂亮。使用它，它可用于进一步渲染，因此可以平稳地完成更长或更快的内容。
：期望元素的内容会更改。浏览器通常会随着时间的推移呈现缓存元素，因为大多数事情不经常改变，或者它们仅更改其位置。该值将由浏览器解释为信号，是，减少元素的缓存，或完全避免元素的缓存，因为如果元素的内容经常变化，它将无用且浪费时间。元素的内容会改变，它将继续从头开始渲染。
截至2015年8月，Chrome 36+，Opera 24+和Firefox 36+支持属性。
Safari目前正在实施，Edge正在“考虑”。
属性将帮助我们编写代码而无需黑客性能，并强调速度和性能对我们的CSS操作的重要性。明智地。在这一点上，引用标准编辑选项卡Atkins Jr：
设置为您的ll操作更改的属性，以实际更改的元素。然后将其删除，然后停止。
谢谢您的阅读！