2

css 属性“will-change”使动画性能更好。但似乎它会在特殊情况下禁用 IOS 移动浏览器中的某些渲染。

以下代码在 IOS 移动浏览器中的行为：

  1. 点击“点我”，添加计数length；
  2. 使用 new 渲染组件length；
  3. “值”显示错误length，“相同值”显示正确length。

“值”和“相同值”的区别在于css代码，我想可能是“will-change”触发IOS移动浏览器优化渲染html。“价值”中的正确length已被优化。

所以请有人解释这个奇怪的问题。谢谢。

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [length, setLength] = useState(0);

  const onClick = () => setLength(length + 1);

  const list = Array.from({ length }).fill("");
  const items = list.map(() => {
    return <div className="item">placeholder</div>;
  });

  return (
    <div className="container">
      { /* has css "will-change" */ }
      <div className="create" onClick={onClick}>
        Click me
      </div>
      {items}
      { /* has css "position: relative", "box-shadow" */ }
      <div className="length"> value: {length}</div>
      <div> same value: {length} </div>
    </div>
  );
}


.length {
  position: relative;
  box-shadow: 0 0 5px red;
}

.create {
  will-change: transform;
}

.container {
  font-size: 28px;
}

Bug Demo，用iphone浏览器打开

错误视频，如果没有 iphone

源代码

4

1 回答 1

1

希望我能在这里提供一些帮助：

首先你说

css 属性“will-change”使动画性能更好。

这不是真的，来自 MDN：

“will-change 旨在用作最后的手段，以尝试处理现有的性能问题。它不应该用于预测性能问题。”

“谨慎使用。浏览器进行优化的正常行为是尽快删除优化并恢复正常。但是直接在样式表中添加 will-change 意味着目标元素总是在片刻之外变化，浏览器将保持优化的时间比其他情况要长得多。”

摘要中缺少的一个非常重要的部分是在“更改完成后删除 will-change”下。

另外，请记住，将更改成本内存和浏览器将需要大约。200 毫秒应用优化。

脚本运行良好，如果你

  • 删除了相对位置
  • 删除意志改变
  • 单击后放大，值更新。
  • 向组件添加密钥将强制它更新 <div key={length} className="length"> value: {length}</div>

您将查看此内容以获取有关将如何更改的更多信息。

如何使用 CSS 的 will-change 属性以及如何工作？

于 2021-07-22T09:22:05.220 回答