javascript - React 下载先前渲染的待处理图像

Question

(更新:之前我以为这个问题是由React Router引起的，但是我把React Router从代码中剥离出来了，问题依旧存在。所以我彻底修改了这个问题。)
情况:
我有分页页面，每页显示一个图像列表。 (“页面”是指可见的完整内容，而不是单独的 html 文件/url。)我想以有效的方式浏览这些页面。
问题:
如果我在页面中导航得足够快，则在导航到下一页之前，并非所有图像都会加载到当前页面中。我希望浏览器在导航到下一页时取消所有未完成的未完成图像下载。但这不会发生，浏览器会保留所有未完成的图像以等待下载，直到它们全部下载完毕。然后我导航到的页面的图像将被下载。这会导致很大的延迟和带宽浪费。
问题:
是否可以取消下载上一页的“待处理”图像？
演示代码:
要对此进行测试，请使用浏览器开发人员工具中的“网络”选项卡。还要选择“禁用缓存”并将 throttle (开发人员工具中的下载速度)设置为“慢 3G”之类的慢点，否则图像加载速度也会过快。然后浏览页面并查看待处理图像列表正在堆积，然后单击“禁用图像”按钮。然后，屏幕上将看不到任何图像，但浏览器仍然有大量未决的图像下载打开，这会浪费带宽并导致需要渲染新图像时出现延迟。
您可以在这里测试代码:https://codepen.io/Devabc/pen/PowjqwZ

//This code is using imgur images to demonstrate.
class Page extends React.Component {
  state = {
    pageNr: 1,
    imagesEnabled: true
  };

  onLinkClick = event => {
    const number = event.target.dataset.value;
    console.log("Number: " + number);
    this.setState({pageNr: number});
  };

  onButtonClick = event => {
    console.log("toggling images");
    this.setState(prevState => {
      return {imagesEnabled: ! prevState.imagesEnabled};
    });   
  };
 
  render() {
    const links = _.range(0, 5).map(number => {
      return (
        <a href="#" data-value={number} onClick={this.onLinkClick}>
          {number}
        </a>
      );
    });
    
    const pageNr = this.state.pageNr;
    const imgStart = pageNr * 100;
    const imgEnd = imgStart + 100;
    const images = this.state.imagesEnabled 
      ? <ImagesPanel imgStart={imgStart} imgEnd={imgEnd} />
      : null;
    
    return (
      <div>
        <h1>Page {this.state.pageNr}</h1>
        <div>Page links: {links}</div>
        <div><button onClick={this.onButtonClick}>{this.state.imagesEnabled ? "disable images" : "enable images"}</button></div>
        <div>Images:</div>
        <div>{images}</div>
      </div>
    );    
  }
}

function ImagesPanel(props) {  
  const images = _.range(props.imgStart, props.imgEnd).map(number => {
    return (
      <Image imageNr={number} />
    );
  });
  
  return images;
}

function imageUrl(imageNr) {
  const hash = imgurHashes[imageNr];
  return "https://i.imgur.com/" + hash + ".jpg";
}

function Image(props) {
  const url = imageUrl(props.imageNr);  
  return <img class="myImage" src={url} border='1' />
}


const imgurHashes = ["wmk2tcs","jvqH2X4","r3dz09r","yJYRtvI","33bUPXj","cYsggBH","URAl4lS","xBpS7lq","5LMFxjU","kUrFsMB","GZf8FnO","Er2lmge","22CbMOq","vJcKGb3","U9ALJof","LxfGswQ","YzyyFHI","vin2W11","c0PQRSY","b6b2qva","6UmvLGc","oTtDO7S","LGoOzDl","XD9o83i","dMUi3dj","XpvMqXC","9JYf6o2","8IBe95g","X26sUn3","qb7Taz9","lWd5TCZ","2UKHpPZ","PMmglpV","pZ5ukGv","ymEZize","nYURuNZ","1SToTrZ","GZHTkpe","NH0qm8I","mZRTNyB","FBAoint","nJWbHb9","BI9zvXf","OeT5kWf","JZ1WPQA","6ZK3S2x","z6M8ryn","3yMODr2","bUoicZu","p3ReIJA","dybF5Sh","DH5ZBEH","fMEbpy5","UyMkbSp","EKXikAy","YG3aJm9","4JWIQhV","lgsvM63","A0MepAi","957yfQF","iNkwwNi","aaJpoxO","Vxy5RgX","jZxV1kQ","JuTUNdL","WY4e0cg","xmgTP7A","O35FJpg","VA3fFhv","oGZVPYQ","X9PRsWA","wSYxWzX","xntVddT","rDn0s52","vQPT1rH","GmlqCZt","zntCiSZ","SoEHjHB","bTFF7HW","QjJRzmx","DZxjoKZ","XdIYgsc","aBZChfb","rAIuEHZ","zt9EJD9","vaEJQA1","9c5pjUL","VXW3Ubz","315aFBb","klp7nh9","fsZktFx","x1XmXYX","8HaInVG","6jJOtkE","9aElwYX","R4dDTw7","9hgY0kI","SW8M5sw","R9jcSrP","dlSSb0P","bhxZCLX","mogQ5tz","oHxiJye","PYyOOm3","Ns89wvi","2uWIFDx","nXN5uhB","UMQn1yZ","JCAEJ3a","VTlkiOu","5JyWm3p","RVE8GoO","XVje7aY","C6qr30z","e54jc67","0X4cRbP","qZaU4lT","WUPHAQD","iILnFAb","oCsxMga","hQyN9oX","GQYDzhE","RcTO075","JlTn7jd","0jJHUWZ","iKp7JGx","YaQeN45","Ot5nFpM","8CeXfPJ","m3cQQye","JYXQaj7","pzPglwg","B4a34uo","3dHvLPv","FEn3aTc","coi9Jpy","GU5ih0m","CtnHd4Y","hbOFsRS","xNW9ED4","avCP3XP","mcbapy0","r9E6DqQ","JDjounb","xHGiHZR","LPN7uSK","QwwPGKE","OGTUcVh","OLxQHfA","Mg0QT9y","0ia7Ca3","LKKHYJn","W8nyx6Q","FjLCYY4","5YEYOe9","vLQHljC","jyL5CS9","oCuKxVQ","L2IyiSA","ffkgeN2","FF7bKmo","JpWF0LA","72kPNNw","tmdNh8K","7PBAKy4","EXMlyuO","p5ZkX5b","Iilf92H","fQbVFiU","wj1csk6","rP14xLY","1iQM4nW","XMq6P6Y","dTRijsS","B3Sz2J8","UkSipp2","eAiZQlr","JJkbcAs","sfA0TJ4","foex9pW","IoCvWfI","5yAxTX7","H6EAfeQ","k8d637d","yIQVrZH","bQdJFx5","CiPGw2A","YZLiutP","BQlEKfd","0W032dR","r4PWPJF","mGBYym5","BC7cuX5","TcoRdCZ","KsCfq9T","KaoAUfC","RdDFY7O","HFhBXSb","kOkYQua","mmT60dj","vIqZffx","r7T9b7N","y1Qtgh9","GFwT6Zc","nWUqQQ3","OZMUUjP","x4ocIKv","wy13lyN","fTj8Om8","0AgyD0C","prWbjvJ","MNJdsJk","brS1te1","4xP3P3i","IlcxIrq","bX7vGyi","U4mhrTE","FVMGYVw","zRFW4oG","jpbvgCe","ZJJEUHu","aU5C2XY","jfFsb9b","WfkChky","qNKDvPo","fhgzlkL","4uEHjGz","cRPiOZz","OzA6TSu","iEhVkeo","tXCZZQY","7DBLToo","9rrTZl5","FWO4ugI","kel6MJM","md4dsMN","kvfKaxR","JMyKehy","3jlMpQk","r1DSqFd","ywuONdJ","eCfhJ5y","vDmQ7Sm","BS6VgDy","wwa7mX9","4E1aIuK","D0zqMuZ","ovehv4U","s3yrw4S","GXm3DCm","gugRkdk","6H2WA7e","M6qdVzv","59aJXiY","As2zA50","wyc2LnT","IuhXtFA","l3V5mZS","QoUlc4T","L7XNlhe","cNk7D2j","MPF5iQY","wRjmFCp","7PZSZrU","EpSMAzy","hLaPhDJ","bS3dM0R","SOCUNXb","Q7BIVld","3Yrg85R","cX4KejE","IQbsyz1","i1qMSgy","K5cU3Qb","NeeB0tr","YHZIvUY","I4BmxjZ","BtThGp0","qWPlax5","pDFqfpR","SdET6fw","9EpcwDb","6nDPyRo","B4X4pYN","mkYU9mK","P6A7I0V","Gwb8Wtr","kSkjNsR","vlEb6D8","Gznsyvk","Vpm3QdO","949USnU","8HyKw0G","4tJmhAP","GLXxX89","X4GGU1t","wRVqclU","rEFHH4Q","vLmSGxD","gkFI4kz","kQASxFm","Cq5brtp","KmWYkSo","2IjiGnN","laGj46X","mgYgH2n","I2iwVFj","oFHxy9R","8VWomE0","y1kV08m","PqXAGBv","MNoiTk8","qEEpz2x","e4ipNRw","CfVVnG8","hHnuzRP","YthPF8u","YBigt6A","tQI8AFu","2K0TnUO","GYReGhp","F2XQStI","7j7145H","BVkgYv1","4hfVk8z","faw1ajs","27H4ogL","0a9ZQ2T","041BIAs","dilQYiq","P1e5AXA","5Tia8aA","PFNJRet","t1Nhl5f","UpfH1sp","H2zXF5f","HLdaLwV","30O8VSP","KsaM1XE","jAhqN6P","Yoi2ylE","wkrg47U","ePmLF64","KLSJPrd","aUdvQ0a","VcqZhpH","zEqDYjX","WXLTAbp","shny07g","UqlXlR5","Bpw7KnV","YeP3Zhe","C5NSYDy","Y6GzbOA","6FxTImw","6PXXJmd","FnVsEu0","Ll2zJnC","JvNbUcB","nEOXggf","t28tvPa","m2qG0pl","KjkkYG5","kCcUVrD","g2G823J","ZyD1f4Z","P3SfyR5","QsA5vHF","DpSxArz","dKt3T4S","w0GfNCC","kvyacI9","Gqdr7qd","KlHHMzZ","VVZ7HVw","hFG5mwe","D4S9tPV","SMVSpk3","MYzi6pi","BzQeber","v7E7VCw","a03HdC6","KSAiRwR","7WkzcMx","z8iVQZP","qCDNLpI","TUerfpq","X08dKd5","qkmDrys","k0MjIxD","vIgbAlY","15TeGJg","j7vx4tU","DNvqPee","2jEQHaF","5Q1M9HL","EFninXx","0VttnZV","XKgdZGL","fDSOKh8","1i5Fhk1","wmUU0tL","O7SVAVF","WMoTmty","UUVTKaF","n9EPI8R","QqnEITA","lao3U57","ITabVKK","ph97wz5","bFfdCGt","9KWJKs3","aKKQd6o","jxzaSfj","6Gv8gBL","iDS0A1T","bTAS7ej","5FvLcFu","GtIFmNQ","kJAU7gn","UZCPmpz","68yuNFU","TuO5PNi","lMV0piH","taKCu3Y","PmNa3M4","Z6gErEZ","5qrVmOD","N5yxt2l","LhrvwLr","QhBn6p8","2kpPEe8","dnxlCK3","GMDnQ32","3qH62l5","Jy6aHR2","2tIZHcB","w0zzrUJ","aSh1mwr","fwCCSBI","k5osQCu","byHHnMX","Uu9Dq9I","K9sC2OO","CsFf1Kz","G28GqCu","OOPc79G","be5NrVR","C5XAmr2","rDNSwSj","AI4BrBq","hGwueuh","EpG6zfG","QORwSKm","sWDMpiD","U2QfeTp","kUqUudt","PGMbcrN","bEaFtGN","KPrPXxO","4iFaBhm","fDcFhWG","P1M2Ld5","aPAlbHH","8ye6kdq","ztVBpFQ","SVL8ujT","5CwT2Og","nIqakeV","SM3Jcoz","QdAk2M4","zpLnMrH","fglMOex","ynj6fe7","YG1DOZh","aJ50pkC","SbvVCaf","azLfxiY","gdw8DHE","1U00sfi","p3zgLIS","h9cTNnw","Z1tt3RC","HHnBLCI","hmkeUl1","aMKRR0h","6MteQjh","PMZzXiM","v2uh5Mk","QEDz82m","70LhmSw","KEGMEbg","tlG769G","gyoNASp","AUnDdta","z1TZP9m","nVmmkCH","IIDRcHT","8m1Go3S","LsscGjy"];

ReactDOM.render(
  <Page />,
  document.getElementById('root')
);

下面的屏幕截图显示了浏览器中待处理图像的列表，即使此时不应渲染图像，因为应该渲染图像的 React 组件已被卸载/删除。

Answer 1

这个问题不是由 React 引起的。我不确定这个问题应该归咎于谁，它可能是文档对象模型标准、HTML 或实现它的浏览器。问题是一旦图像被附加到 DOM(当浏览器开始渲染 HTML 页面时)，浏览器将开始下载它，即使图像后来从 DOM 中删除也是如此。

然而，有许多解决方案可以解决这个问题。

方案一:修改src属性取消下载
src img 中的属性是必需的HTML 的元素，但将其设置为空字符串(清除)，会导致取消图像的下载。 (这可能不适用于所有浏览器。)

此处描述了此解决方案:How to cancel an image from loading并在这里演示https://jsbin.com/zakeqaseru/1/edit?output在这里https://jsfiddle.net/nw34gLgt/
(使用浏览器开发者工具监控图片下载是否被取消。)
src可以使用 setAttribute() 将其更改为空字符串.将其设置为 null与将其设置为字符串 "null" 具有相同的效果，这也可以，但不太干净。
删除 src属性不适用于大多数浏览器。

此解决方案是否有效可能因浏览器而异。较旧的浏览器可能会导致在 src 时请求网页本身。已删除，如此处所述:https://gtmetrix.com/avoid-empty-src-or-href.html
这可能会对浏览器和 Web 服务器造成很大的性能影响。

如果浏览器无法处理这个问题，类似的解决方案是使用 background-image HTML 元素上的属性，如 div而不是 img .

此 src-clearing 解决方案在 React-Image 中实现:
https://github.com/mbrevda/react-image/pull/223

this.i.src = ''

try {
  delete this.i.src
} catch (e) {
  // On Safari in Strict mode this will throw an exception,
  //  - https://github.com/mbrevda/react-image/issues/187
  // We don't need to do anything about it.
}
delete this.i

React 中的解决方案是这样的:

class Img extends React.Component {
    constructor(props) {
        super(props);

        this.imgRef = React.createRef();
    }

    componentWillUnmount() {
        try {
            this.imgRef.current.src = '';
            delete this.imgRef.current.src;
        } catch (e) {}
    }

    render() {
        return (
            <img {...this.props} ref={this.imgRef} />
        );
    }
}

然后你可以像这样使用它:

<Img src="...some image url...." />

方案二:懒加载src

通过设置 src程序化条件下的属性，您可以确保仅在需要时加载图像。此解决方案还可以与其他解决方案结合使用，以确保在卸载关联的 React 元素时取消下载的图像。
data-src (自定义数据)属性通常用于此方法，将其值复制到 src当需要渲染图像时。

此解决方案可能仍会下载未安装的镜像。

解决方案 3:Chrome 的原生延迟加载

该解决方案自 Chrome 76(2019 年 7 月？)以来就存在。 Chrome 有一个 loading图片和 iframe 的属性，可以设置为 "lazy"推迟资源的下载，直到它到达与视口(viewport)的计算距离。
loading许多其他浏览器不支持该属性。

有关详细信息，请参阅:

https://web.dev/native-lazy-loading/

https://github.com/scott-little/lazyload/

Firefox 的延迟加载请求:https://bugzilla.mozilla.org/show_bug.cgi?id=1542784

此解决方案可能仍会下载未安装的镜像。

其他信息来源

https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video

https://imagekit.io/blog/lazy-loading-images-complete-guide/