性能 - 频繁渲染相同的大型图像集

Question

有一个包含大量物品的游戏。 我有一个网站是这个游戏的项目浏览器。

有一个搜索栏。 如果搜索字段为空，则绘制所有项目，这意味着有几百个div带有背景（我对图像使用 CSS 精灵）。 截图以供更好参考： 目前，每个项目图像都是一个包裹在ItemIcon组件中的div ，它会随着要绘制的项目名称数组的变化而挂载和卸载。

问题：

• 每当搜索字段被清除（因此所有项目都被绘制）时，网站会挂起很明显的几分之一秒。

Chrome 的 Devtools 测量的性能： 繁重的部分主要由数百个<ItemIcon/>坐骑<ItemIcon/> 。

我能怎么办？ 我认为将图标设置为display:none比安装/卸载它们的性能要好得多。 有什么促进这种方法的吗？

Answer 1

您可以在不同的微任务中分块添加项目，从而减少延迟：

  const CHUNK = 10;
  for(let i = 0; i < toAdd.length; i += CHUNK) {
     setItems(items => items.concat( toAdd.slice(i, i + CHUNK) ) );
   }

Answer 2

我认为将图标设置为 display:none 比安装/卸载它们的性能要好得多。

这是一个正确的方向。它会通过在搜索词更新时避免呈现项目来削减一些性能点。

您可以查看在匹配搜索查询的项目上使用切换 CSS 类名和此属性规则。

还有就是类名包计算条件的类名。

比如说，您的画廊项目的初始对象结构是：

[
  {
    id, // unique identifier for item
    iconURI, // image item URL
   }
]

您可以在对象中添加一个附加属性来确定是否显示该项目。

[
  {
    id, // unique identifier for item
    iconURI, // image item URL
    hidden // whether item is shown in gallery
   }
]

hidden属性将在以下条件下更新：

1. 在画廊中的项目的初始呈现时， hidden属性设置为false 。

2. 当搜索查询， hidden属性被设置为false ，如果项目匹配搜索字词和true ，当它不

3. 清除搜索时，项目的hidden属性设置为false

用于更新cond中 item 的hidden属性。 2 & 3 ，您可以通过实现shouldComponentUpdate并仅在hidden属性更改时允许渲染来决定是否在更新时重新渲染项目。

您可以在样式表中包含hidden类选择器的属性规则。

.hidden {
  display:none
}

像这样的项目的相关生命周期方法将类似于：

shouldComponentUpdate(nextProps, nextState) {
  return nextProps.hidden !== this.props.hidden
}

render() {
   const { iconURI, hidden } = this.props

   return (
     <div
       className={classnames('some-default-item-classname', {hidden: hidden})}>
       <img src={iconURI} />
     </div>
   )
}