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

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

这里有一个搜索字段。如果搜索字段为空，则会绘制所有项目，这意味着有几百个带背景的

div

s（我使用CSS精灵绘制图像）。更好参考的屏幕截图： 目前，每个项目图像都是一个包装在

项目图标

组件中的

div

，并且随着要绘制的项目名称数组的更改而装载和卸载

问题：

• 无论何时清除搜索字段（以便绘制所有项目），网站都会挂起明显的几分之一秒

通过Chrome的开发工具衡量的性能： 重的部分主要由数百个

支架承担

---

我该怎么办？我认为将图标设置为

display:none

比安装/卸载它们的性能要好得多。有什么可以促进这种方法吗？

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

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

const CHUNK=10；
for（设i=0；iitems.concat（toAdd.slice（i，i+CHUNK））；
}

我认为设置图标来显示：没有比安装/卸载图标更有效的了

这是一个正确的方向。 当搜索词更新时，它将避免渲染项目，从而减少一些性能点

您可以查看在匹配搜索查询的项上使用此属性规则切换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

项的属性将在以下条件下更新：

在库中项目的初始呈现时，

hidden

属性设置为

false

在搜索查询时，如果项目与搜索词匹配，则将

hidden

属性设置为

false

，如果项目与搜索词不匹配，则将

true

清除搜索时，项目的

hidden

属性设置为

false

用于更新cond中项目的

隐藏

属性2和3，您可以通过实现

shoulldComponentUpdate

并仅在

hidden

属性更改时允许渲染来决定是否在更新时重新渲染项

您可以在样式表中包含

隐藏的
类选择器的属性规则

。隐藏{
显示：无
}

此类项目的相关生命周期方法类似于：

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>
   )
}

shouldComponentUpdate（下一步，下一步状态）{
return nextrops.hidden！==this.props.hidden
}
render（）{
const{iconURI，hidden}=this.props
返回(
)
}
您是否正确使用了钥匙？你还需要一次全部展示吗？一次全部展示是非常需要的。每个项目都有一个唯一的密钥
{currentItems.map（itemName=>（））}
并且
currentItems
的每个元素都是唯一的。