Javascript 向react应用程序添加图像时，网站在滚动中滞后

我用react在这里建立了一个公文包网站，但在选定的工作部分，当滚动项目图像时，你会注意到滞后（特别是在Safari上）。 以下是项目容器和单个项目的代码： 我的项目：

import React from 'react'

import colors from '../../assets/colors.png'
import colorsWebp from '../../assets/colors.webp'
import crwn from '../../assets/crwn.png'
import crwnWebp from '../../assets/crwn.webp'
import devchat from '../../assets/devchat.png'
import devchatWebp from '../../assets/devchat.webp'
import movies from '../../assets/movies.png'
import moviesWebp from '../../assets/movies.webp'
import Project from '../../Components/Project/Project'
import styles from './MyProjects.module.scss'

const MyProjects = () => {
  return (
    <div className={styles.container} id="myProjects">
      <div className={styles.myProjects}>
        <div className={styles.headerWrapper}>
          <h2 className={styles.header}>Selected Work</h2>
        </div>
        <Project
          name="CRWN Clothing"
          image={crwn}
          imageWebp={crwnWebp}
          color="rgb(157, 169, 238)"
          hoverColor="rgb(177, 189, 258)"
          link="crwnclothing.andrewkaras.me"
          githubLink="https://github.com/Justbigmack/CRWN-Clothing"
          text="An e-commerce web-app that allows you to easily purchase clothes. Payments are processed via Stripe API. It is built with React, Redux, Redux-Sagas and Firebase"
        />
        <Project
          right
          name="React Colors"
          image={colors}
          imageWebp={colorsWebp}
          project="colors"
          color="rgb(161, 106, 195)"
          hoverColor="rgb(181, 126, 215)"
          link="colors.andrewkaras.me"
          githubLink="https://github.com/Justbigmack/react-colors"
          text="React Colors is an app allowing you to generate color palettes for your projects by leveraging easy to use UI and drag and drop system. The project is put together using React, CSS in JS, Material UI and features some React Router animations"
        />
        <Project
          name="DevChat"
          image={devchat}
          imageWebp={devchatWebp}
          project="devchat"
          color="rgb(251, 93, 81)"
          hoverColor="rgb(271, 113, 101)"
          link="devchat.andrewkaras.me"
          githubLink="https://github.com/Justbigmack/dev-chat"
          text="DevChat is a simplified clone of a well-known app - Slack. Devchat allows desktop and large tablet users to exchange messages, files and much more. The project is developed using React, Redux, Firebase and Semantic UI"
        />
        <Project
          right
          name="React Movies"
          image={movies}
          imageWebp={moviesWebp}
          project="movies"
          color="rgb(134, 191, 211)"
          hoverColor="rgb(154, 211, 231)"
          link="movies.andrewkaras.me"
          githubLink="https://github.com/Justbigmack/react-movies"
          text="React Movies is a web-application that allows you to search for your favorite movies. It utilizes React Router and pulls information from TMDB via API"
        />
      </div>
    </div>
  )
}

export default React.memo(MyProjects)

从“React”导入React
从“../../assets/colors.png”导入颜色
从“../../assets/colors.webp”导入colorsWebp
从“../../assets/crwn.png”导入crwn
从“../../assets/crwn.webp”导入crwnWebp
从“../../assets/devchat.png”导入devchat
从“../../assets/devchat.webp”导入devchatWebp
从“../../assets/movies.png”导入电影
从“../../assets/movies.webp”导入moviesWebp
从“../../Components/Project/Project”导入项目
从“./MyProjects.module.scss”导入样式
const MyProjects=（）=>{
返回(
精选作品
)
}
导出默认的React.memo（MyProjects）

一个项目：

import React, { useState } from 'react'

import { ReactComponent as GithubIcon } from '../../assets/github.svg'
import styles from './Project.module.scss'

const Project = ({
  name,
  color,
  hoverColor,
  image,
  imageWebp,
  githubLink,
  link,
  right,
  text
}) => {
  const [hover, setHover] = useState(false)
  const [hoverGH, setHoverGH] = useState(false)
  return (
    <div
      className={right ? styles.projectContainerRight : styles.projectContainer}
    >
      <div className={styles.imageContainer} style={{ backgroundColor: color }}>
        <picture>
          <source type="image/webp" srcSet={imageWebp} />
          <source type="image/png" srcSet={image} />
          <img src={image} alt="Project of mine" />
        </picture>
      </div>
      <div className={styles.projectTech}>Web-App</div>
      <div className={styles.projectInfo}>
        <h3 className={styles.projectName}>
          {name}
          <div className={styles.projectGithub}>
            <a href={githubLink}>
              <GithubIcon
                onMouseEnter={() => {
                  setHoverGH(true)
                }}
                onMouseLeave={() => {
                  setHoverGH(false)
                }}
                className={styles.githubIcon}
                style={
                  hoverGH
                    ? {
                        fill: color
                      }
                    : {
                        fill: hoverColor
                      }
                }
              />
            </a>
          </div>
        </h3>
        <h4 className={styles.projectText}>{text}</h4>

        <a
          className={styles.projectLink}
          onMouseEnter={() => {
            setHover(true)
          }}
          onMouseLeave={() => {
            setHover(false)
          }}
          style={
            hover
              ? {
                  color: color
                }
              : {
                  color: hoverColor
                }
          }
          href={`https://${link}`}
        >
          {link}
        </a>
      </div>
    </div>
  )
}

export default React.memo(Project)

import React，{useState}来自“React”
从“../../assets/github.svg”导入{ReactComponent as GithubIcon}
从“./Project.module.scss”导入样式
const项目=({
名称
颜色
哈弗颜色，
形象,，
imageWebp，
githubLink，
链接
正确的，
文本
}) => {
const[hover，setHover]=useState（false）
const[hoverGH，setHoverGH]=useState（false）
返回(
网络应用
{name}
{text}
)
}
导出默认的React.memo（项目）

---

一切都很好，如果我在所有项目中添加相同的图像，但只要我给每个项目传递一个单独的图像，它就会开始滞后于滚动。我很难找出原因

无法复制，即使缓存被禁用，一切都很顺利。我在MacOS上遇到了一些问题（主要是Safari）。你用的是哪种操作系统和浏览器？啊，是的，我忘了提。Windows、chrome 78和FF 70明白了！很高兴知道，感谢测试@ZohirSalak。我刚刚通过添加-webkit transform:translate3d（0,0,0）修复了它；到应用程序。我读过这篇文章，发现safari正在努力提高能效，所以它可能会导致滚动问题。这个技巧使它运行平稳。可能是图像分辨率高。