Question

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

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

问题：

每当清除搜索字段（以便绘制所有项目）时，网站就会挂掉一秒钟的明显时间。

Chrome的Devtools测量的性能：大部分是由数百个<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

我认为将图标设置为显示：没有什么比安装/卸载它们要好得多了。

这是正确的方向。通过在搜索字词更新时避免渲染项目，可以节省一些性能指标。

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

有classnames包用于计算条件类名称。

说，您的图库项目的初始对象结构是：

[
  {
    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属性将在以下条件下更新：

在库中项目的初始呈现时，hidden属性设置为false。
在搜索查询中，如果项与搜索字词匹配，则hidden属性设置为false，否则将true设置为
清除搜索后，项目的hidden属性设置为false

要更新 cond。 2 和 3 中项目的hidden属性，您可以决定是否控制某个项目通过实现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>
   )
}

性能-经常渲染相同的大型图像集

2 个答案: