{"id":120775,"date":"2026-11-01T10:48:37","date_gmt":"2026-11-01T02:48:37","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/120775.html"},"modified":"2026-11-01T10:48:37","modified_gmt":"2026-11-01T02:48:37","slug":"%e3%80%90flutter%e8%b8%a9%e5%9d%91%e6%8e%92%e9%9b%b7%e3%80%91%e7%ac%ac12%e8%af%be%ef%bc%9a%e5%9b%be%e7%89%87%e5%86%85%e5%ad%98%e5%9d%91%ef%bd%9c%e5%a4%a7%e5%9b%be%e6%97%a0%e7%ba%a6%e6%9d%9f%e5%8a%a0","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/120775.html","title":{"rendered":"\u3010Flutter\u8e29\u5751\u6392\u96f7\u3011\u7b2c12\u8bfe\uff1a\u56fe\u7247\u5185\u5b58\u5751\uff5c\u5927\u56fe\u65e0\u7ea6\u675f\u52a0\u8f7d\uff0cOOM\u5185\u5b58\u6ea2\u51fa\u6392\u67e5\u4fee\u590d"},"content":{"rendered":"<p>\u6458\u8981&#xff1a;\u672c\u6587\u805a\u7126 Flutter \u56fe\u7247\u5185\u5b58\u95ee\u9898&#xff0c;\u6307\u51fa\u56fe\u7247\u5185\u5b58\u7531\u300c\u89e3\u7801\u5c3a\u5bf8 \u00d7 \u5b58\u6d3b\u6570\u91cf\u300d\u51b3\u5b9a&#xff0c;\u800c\u975e\u78c1\u76d8\u6587\u4ef6\u5927\u5c0f\u2014\u2014\u4e00\u5f20 2MB \u7684 JPEG \u89e3\u7801\u540e\u53ef\u80fd\u5360\u7528 48MB\u3002\u6587\u7ae0\u5148\u5256\u6790\u56db\u79cd\u201c\u65e0\u7ea6\u675f\u89e3\u7801\u201d\u59ff\u6001&#xff08;\u6587\u4ef6\u5927\u5c0f\u4e0e\u89e3\u7801\u5185\u5b58\u8131\u94a9\u3001cacheWidth\/cacheHeight \u7684\u7269\u7406\u50cf\u7d20\u9677\u9631\u3001ImageCache \u7684 live \u4f8b\u5916\u3001\u52a8\u753b\u56fe\u7247\u5c3a\u5bf8\u53c2\u6570\u5931\u6548&#xff09;&#xff0c;\u518d\u4ece\u89e3\u7801\u653e\u5927\u3001\u53c2\u6570\u4f5c\u7528\u70b9\u3001LRU \u8fb9\u754c\u3001\u61d2\u6784\u5efa\u8bed\u4e49\u56db\u4e2a\u5c42\u9762\u6df1\u6316\u6839\u56e0&#xff1b;\u968f\u540e\u5f52\u7eb3\u56db\u7c7b\u7ecf\u5178\u6545\u969c\u6a21\u5f0f&#xff0c;\u7ed9\u51fa\u201c\u5148\u7b97\u3001\u518d\u770b\u3001\u540e\u6539\u201d\u7684\u7cfb\u7edf\u6027\u6392\u67e5\u4e94\u6b65\u6cd5&#xff0c;\u5e76\u6309\u89e3\u7801\u5c3a\u5bf8\u4e0e\u5b58\u6d3b\u6570\u91cf\u4e24\u4e2a\u7ef4\u5ea6\u63d0\u51fa\u516d\u5c42\u4fee\u590d\u65b9\u6848\u4e0e\u516d\u6761\u9884\u9632\u539f\u5219&#xff0c;\u6700\u540e\u914d 15 \u9053\u8bfe\u540e\u4e60\u9898\u5de9\u56fa\u3002<\/p>\n<h3>\u76ee\u5f55<\/h3>\n<ul>\n<li>\u524d\u8a00<\/li>\n<li>\u4e00\u3001\u6545\u969c\u73b0\u573a&#xff1a;\u56fe\u7247\u5185\u5b58\u7684\u56db\u79cd\u201c\u65e0\u7ea6\u675f\u89e3\u7801\u201d\n<ul>\n<li>\u59ff\u6001\u4e00&#xff1a;2MB \u7684 JPEG&#xff0c;48MB \u7684 RAM\u2014\u2014\u201c\u6587\u4ef6\u5927\u5c0f\u201d\u4e0e\u201c\u89e3\u7801\u5185\u5b58\u201d\u7684\u5f7b\u5e95\u8131\u94a9<\/li>\n<li>\u59ff\u6001\u4e8c&#xff1a;cacheWidth\/cacheHeight \u7684\u201c\u7269\u7406\u50cf\u7d20\u9677\u9631\u201d\u2014\u2014\u7ed9\u4e86\u53c2\u6570&#xff0c;\u5374\u7ed9\u4e86\u9519\u8bef\u7684\u5355\u4f4d<\/li>\n<li>\u59ff\u6001\u4e09&#xff1a;ImageCache \u7684\u201clive \u4f8b\u5916\u201d\u2014\u2014\u7f13\u5b58\u6709\u9650&#xff0c;\u4f46\u6b63\u5728\u663e\u793a\u7684\u5927\u56fe\u53ef\u4ee5\u7ed5\u8fc7\u4e0a\u9650<\/li>\n<li>\u59ff\u6001\u56db&#xff1a;\u52a8\u753b\u56fe\u7247\u7684\u201c\u5c3a\u5bf8\u53c2\u6570\u65e0\u6548\u201d\u2014\u2014cacheWidth \u5bf9 GIF\/WebP\/APNG \u4e0d\u751f\u6548<\/li>\n<\/ul>\n<\/li>\n<li>\u4e8c\u3001\u6839\u56e0\u5256\u6790&#xff1a;\u56fe\u7247\u5185\u5b58\u7531\u201c\u89e3\u7801\u5c3a\u5bf8 \u00d7 \u5b58\u6d3b\u6570\u91cf\u201d\u51b3\u5b9a&#xff0c;\u800c\u8fd9\u4e24\u8005\u90fd\u4e0d\u53d7\u76f4\u89c9\u63a7\u5236\n<ul>\n<li>2.1 \u89e3\u7801\u662f\u5185\u5b58\u7684\u201c\u653e\u5927\u5668\u201d&#xff1a;\u538b\u7f29\u5b57\u8282 \u2192 \u672a\u538b\u7f29\u50cf\u7d20<\/li>\n<li>2.2 cacheWidth\/cacheHeight \u7684\u4f5c\u7528\u70b9\u5728\u89e3\u7801\u5668&#xff0c;\u4e0d\u5728\u5e03\u5c40\u5f15\u64ce<\/li>\n<li>2.3 ImageCache \u7684 LRU \u53ea\u7ea6\u675f\u201c\u7f13\u5b58\u201d&#xff0c;\u4e0d\u7ea6\u675f\u201c\u5b58\u6d3b\u201d<\/li>\n<li>2.4 ListView \u7684\u201c\u61d2\u6784\u5efa\u201d\u4e0d\u81ea\u52a8\u7b49\u4e8e\u201c\u5185\u5b58\u91ca\u653e\u201d<\/li>\n<\/ul>\n<\/li>\n<li>\u4e09\u3001\u7ecf\u5178\u6545\u969c\u6a21\u5f0f\u4e0e\u6df1\u5165\u6848\u4f8b\n<ul>\n<li>\u6a21\u5f0f\u4e00&#xff1a;12MP \u5934\u50cf\u7684 48MB \u89e3\u7801\u2014\u2014\u5e03\u5c40\u5c3a\u5bf8\u4e0d\u7ea6\u675f\u89e3\u7801\u5c3a\u5bf8<\/li>\n<li>\u6a21\u5f0f\u4e8c&#xff1a;\u52a8\u753b\u8d34\u7eb8\u7f51\u683c\u7684 OOM\u2014\u2014cacheWidth \u9759\u9ed8\u5931\u6548<\/li>\n<li>\u6a21\u5f0f\u4e09&#xff1a;precacheImage \u7684\u201c\u597d\u5fc3\u529e\u574f\u4e8b\u201d\u2014\u2014\u9884\u52a0\u8f7d\u628a\u5927\u56fe\u9489\u5728\u5185\u5b58\u4e2d<\/li>\n<li>\u6a21\u5f0f\u56db&#xff1a;ImageCache \u7684\u201c\u9a71\u9010\u6296\u52a8\u201d\u2014\u2014\u5927\u56fe\u65e0\u6cd5\u8fdb\u5165\u7f13\u5b58&#xff0c;\u6bcf\u6b21\u6eda\u52a8\u90fd\u91cd\u65b0\u89e3\u7801<\/li>\n<\/ul>\n<\/li>\n<li>\u56db\u3001\u7cfb\u7edf\u6027\u6392\u67e5\u65b9\u6cd5\u8bba\n<ul>\n<li>\u7b2c\u4e00\u6b65&#xff1a;\u5148\u8ba1\u7b97\u201c\u7406\u8bba\u89e3\u7801\u5185\u5b58\u201d&#xff0c;\u800c\u4e0d\u662f\u731c\u6d4b<\/li>\n<li>\u7b2c\u4e8c\u6b65&#xff1a;\u5728 DevTools \u7684 Memory \u89c6\u56fe\u4e2d\u533a\u5206\u201c\u56fe\u7247\u5185\u5b58\u201d\u4e0e\u201c\u5176\u4ed6\u5185\u5b58\u201d<\/li>\n<li>\u7b2c\u4e09\u6b65&#xff1a;\u68c0\u67e5\u6bcf\u4e00\u5f20 Image \u7684 cacheWidth\/cacheHeight \u662f\u5426\u4e0e\u5e03\u5c40\u5c3a\u5bf8\u548c DPR \u5339\u914d<\/li>\n<li>\u7b2c\u56db\u6b65&#xff1a;\u8bc6\u522b\u52a8\u753b\u56fe\u7247\u5e76\u786e\u8ba4\u5c3a\u5bf8\u53c2\u6570\u662f\u5426\u6709\u6548<\/li>\n<li>\u7b2c\u4e94\u6b65&#xff1a;\u533a\u5206\u201c\u6cc4\u6f0f\u201d\u4e0e\u201c\u7f13\u5b58\u201d\u4e0e\u201clive \u9489\u4f4f\u201d<\/li>\n<\/ul>\n<\/li>\n<li>\u4e94\u3001\u4fee\u590d\u65b9\u6848&#xff1a;\u6309\u201c\u89e3\u7801\u5c3a\u5bf8\u201d\u548c\u201c\u5b58\u6d3b\u6570\u91cf\u201d\u4e24\u4e2a\u7ef4\u5ea6\u5206\u5c42\n<ul>\n<li>\u7b2c\u4e00\u5c42&#xff1a;\u5bf9\u9759\u6001\u56fe\u7247&#xff0c;\u7528 cacheWidth\/cacheHeight \u5c06\u89e3\u7801\u5c3a\u5bf8\u9650\u5236\u5230\u663e\u793a\u5c3a\u5bf8<\/li>\n<li>\u7b2c\u4e8c\u5c42&#xff1a;\u5bf9 ImageProvider \u7ec4\u5408\u573a\u666f&#xff0c;\u7528 ResizeImage \u5305\u88f9<\/li>\n<li>\u7b2c\u4e09\u5c42&#xff1a;\u5bf9 ListView\/GridView \u4e2d\u7684\u56fe\u7247&#xff0c;\u63a7\u5236 cacheExtent \u548c keepAlive<\/li>\n<li>\u7b2c\u56db\u5c42&#xff1a;\u5bf9 precacheImage \u5efa\u7acb\u201c\u4ec5\u9650\u5173\u952e\u5c0f\u56fe\u201d\u7684\u7eaa\u5f8b<\/li>\n<li>\u7b2c\u4e94\u5c42&#xff1a;\u5bf9\u52a8\u753b\u56fe\u7247&#xff0c;\u4ece\u201c\u89e3\u7801\u5c3a\u5bf8\u7ea6\u675f\u201d\u8f6c\u5411\u201c\u6e90\u5c3a\u5bf8\u7ea6\u675f\u201d<\/li>\n<li>\u7b2c\u516d\u5c42&#xff1a;\u5fc5\u8981\u65f6\u8c03\u6574 ImageCache \u7684\u9884\u7b97&#xff0c;\u4f46\u4e0d\u8981\u628a\u8c03\u5927\u5f53\u4f5c\u4fee\u590d<\/li>\n<\/ul>\n<\/li>\n<li>\u516d\u3001\u9884\u9632\u4f53\u7cfb&#xff1a;\u8ba9\u201c\u89e3\u7801\u5c3a\u5bf8\u201d\u6210\u4e3a\u56fe\u7247\u52a0\u8f7d\u7684\u9ed8\u8ba4\u5ba1\u67e5\u9879\n<ul>\n<li>\u539f\u5219\u4e00&#xff1a;\u6bcf\u4e00\u5f20 Image \u90fd\u5fc5\u987b\u56de\u7b54\u201c\u89e3\u7801\u5c3a\u5bf8\u662f\u591a\u5c11\u201d<\/li>\n<li>\u539f\u5219\u4e8c&#xff1a;\u533a\u5206\u201c\u5e03\u5c40\u5c3a\u5bf8\u201d\u548c\u201c\u89e3\u7801\u5c3a\u5bf8\u201d&#xff0c;\u5e76\u786e\u4fdd\u6362\u7b97\u6b63\u786e<\/li>\n<li>\u539f\u5219\u4e09&#xff1a;\u5bf9\u52a8\u753b\u56fe\u7247\u5efa\u7acb\u72ec\u7acb\u7684\u8d44\u6e90\u89c4\u8303<\/li>\n<li>\u539f\u5219\u56db&#xff1a;\u628a precacheImage \u5f53\u4f5c\u201c\u7a00\u7f3a\u8d44\u6e90\u201d\u800c\u4e0d\u662f\u201c\u901a\u7528\u4f18\u5316\u201d<\/li>\n<li>\u539f\u5219\u4e94&#xff1a;\u5728 CI \u6216\u6d4b\u8bd5\u4e2d\u76d1\u63a7\u56fe\u7247\u89e3\u7801\u5185\u5b58\u7684\u201c\u7406\u8bba\u5cf0\u503c\u201d<\/li>\n<li>\u539f\u5219\u516d&#xff1a;\u5728\u771f\u673a\u3001\u4f4e\u7aef\u8bbe\u5907\u548c Profile \u6a21\u5f0f\u4e0b\u9a8c\u8bc1<\/li>\n<\/ul>\n<\/li>\n<li>\u4e03\u3001\u8bfe\u540e\u4e60\u9898&#xff08;15\u9053&#xff09;<\/li>\n<li>\u516b\u3001\u672c\u8282\u8bfe\u77e5\u8bc6\u8981\u70b9\u603b\u7ed3<\/li>\n<li>\u4e5d\u3001\u4e0b\u8282\u8bfe\u9884\u544a\u2014<\/li>\n<\/ul>\n<h3>\u524d\u8a00<\/h3>\n<p>Flutter \u5e94\u7528\u91cc\u6700\u5bb9\u6613\u88ab\u4f4e\u4f30\u7684\u5185\u5b58\u6740\u624b&#xff0c;\u5f80\u5f80\u4e0d\u662f\u67d0\u4e2a\u590d\u6742\u7684\u72b6\u6001\u7ba1\u7406\u65b9\u6848&#xff0c;\u4e5f\u4e0d\u662f\u67d0\u4e2a\u6ca1\u5173\u6389\u7684\u5b9a\u65f6\u5668&#xff0c;\u800c\u662f\u4e00\u5f20\u770b\u8d77\u6765\u201c\u53ea\u6709\u51e0\u767e KB\u201d\u7684\u56fe\u7247\u3002\u5b83\u5b89\u9759\u5730\u8eba\u5728 Image.network(url) \u91cc&#xff0c;\u4ee3\u7801 review \u65f6\u6ca1\u4eba\u4f1a\u591a\u770b\u4e00\u773c&#xff0c;\u76f4\u5230\u67d0\u5929\u7528\u6237\u5728\u4f4e\u7aef\u673a\u4e0a\u6ed1\u5230\u5217\u8868\u7684\u67d0\u4e2a\u4f4d\u7f6e&#xff0c;\u5e94\u7528\u6beb\u65e0\u5f81\u5146\u5730\u95ea\u9000\u2014\u2014\u65e5\u5fd7\u91cc\u53ea\u6709\u4e00\u884c OutOfMemoryError\u3002<\/p>\n<p>\u8fd9\u4e2a\u5751\u7684\u8ff7\u60d1\u6027\u5728\u4e8e&#xff1a;\u5b83\u8fdd\u80cc\u4e86\u5927\u591a\u6570\u5f00\u53d1\u8005\u5bf9\u201c\u5185\u5b58\u5360\u7528\u201d\u7684\u76f4\u89c9\u3002\u6587\u4ef6\u5927\u5c0f\u3001\u5e03\u5c40\u5c3a\u5bf8\u3001\u89e3\u7801\u5c3a\u5bf8&#xff0c;\u8fd9\u4e09\u4e2a\u6982\u5ff5\u5728\u65e5\u5e38\u5f00\u53d1\u4e2d\u88ab\u6df7\u4e3a\u4e00\u8c08&#xff0c;\u800c Flutter \u7684\u56fe\u7247\u7ba1\u7ebf\u6070\u6070\u628a\u5b83\u4eec\u5206\u5f97\u5f88\u6e05\u695a\u2014\u2014width: 48 \u7ba1\u7684\u662f\u753b\u591a\u5927&#xff0c;cacheWidth: 144 \u7ba1\u7684\u624d\u662f\u89e3\u7801\u591a\u5927&#xff0c;\u771f\u6b63\u5403\u6389\u5185\u5b58\u7684\u662f\u540e\u8005&#xff0c;\u524d\u8005\u5bf9\u6b64\u6beb\u65e0\u7ea6\u675f\u529b\u3002\u66f4\u9ebb\u70e6\u7684\u662f&#xff0c;ImageCache \u7684 100MB \u4e0a\u9650\u770b\u8d77\u6765\u50cf\u4e00\u9053\u4fdd\u9669&#xff0c;\u4f46 live \u5f15\u7528\u53ef\u4ee5\u5408\u6cd5\u5730\u7ed5\u8fc7\u5b83&#xff1b;cacheWidth \u770b\u8d77\u6765\u50cf\u4e07\u80fd\u89e3\u836f&#xff0c;\u4f46\u5bf9 GIF\/WebP\/APNG \u9759\u9ed8\u5931\u6548\u3002<\/p>\n<p>\u672c\u6587\u8981\u505a\u7684&#xff0c;\u662f\u628a\u8fd9\u6761\u4ece\u201c\u538b\u7f29\u5b57\u8282\u201d\u5230\u201c\u672a\u538b\u7f29\u50cf\u7d20\u201d\u7684\u94fe\u8def\u5f7b\u5e95\u62c6\u5f00&#xff1a;\u5148\u770b\u56db\u79cd\u5178\u578b\u7684\u201c\u65e0\u7ea6\u675f\u89e3\u7801\u201d\u73b0\u573a&#xff0c;\u518d\u4ece\u89e3\u7801\u653e\u5927\u3001\u53c2\u6570\u4f5c\u7528\u70b9\u3001LRU \u8fb9\u754c\u3001\u61d2\u6784\u5efa\u8bed\u4e49\u56db\u4e2a\u5c42\u9762\u6316\u5230\u6839\u56e0&#xff1b;\u7136\u540e\u7528\u56db\u7c7b\u7ecf\u5178\u6545\u969c\u6a21\u5f0f\u628a\u7406\u8bba\u843d\u5230\u5177\u4f53\u573a\u666f&#xff0c;\u7ed9\u51fa\u201c\u5148\u7b97\u3001\u518d\u770b\u3001\u540e\u6539\u201d\u7684\u4e94\u6b65\u6392\u67e5\u6cd5&#xff1b;\u6700\u540e\u6309\u201c\u89e3\u7801\u5c3a\u5bf8\u201d\u548c\u201c\u5b58\u6d3b\u6570\u91cf\u201d\u4e24\u4e2a\u7ef4\u5ea6&#xff0c;\u7ed9\u51fa\u516d\u5c42\u4fee\u590d\u65b9\u6848\u4e0e\u516d\u6761\u9884\u9632\u539f\u5219&#xff0c;\u5e76\u914d 15 \u9053\u4e60\u9898\u5e2e\u4f60\u628a\u8ba4\u77e5\u56fa\u5316\u4e0b\u6765\u3002<\/p>\n<p>\u8bfb\u5b8c\u4e4b\u540e&#xff0c;\u5e0c\u671b\u4f60\u5728\u5199\u4e0b\u6bcf\u4e00\u4e2a Image \u65f6&#xff0c;\u90fd\u4f1a\u4e0b\u610f\u8bc6\u5730\u95ee\u4e00\u53e5&#xff1a;\u8fd9\u5f20\u56fe&#xff0c;\u89e3\u7801\u5c3a\u5bf8\u662f\u591a\u5c11&#xff1f;<\/p>\n<h3>\u4e00\u3001\u6545\u969c\u73b0\u573a&#xff1a;\u56fe\u7247\u5185\u5b58\u7684\u56db\u79cd\u201c\u65e0\u7ea6\u675f\u89e3\u7801\u201d<\/h3>\n<hr \/>\n<p>\u524d\u5341\u4e00\u8bfe\u7684\u6545\u969c\u5927\u591a\u53ef\u4ee5\u4ece\u4ee3\u7801\u7ed3\u6784\u6216\u8c03\u7528\u65b9\u5f0f\u4e2d\u8ffd\u6eaf&#xff1a;\u4e00\u4e2a\u4e92\u65a5\u7684\u7ea6\u675f\u3001\u4e00\u4e2a\u4e0d\u8be5\u5199\u7684 !\u3001\u4e00\u4e2a\u963b\u65ad\u91cd\u5efa\u7684 const\u3001\u4e00\u4e2a\u6ea2\u51fa\u7684 Positioned\u3001\u4e00\u4e2a\u5168\u91cf\u5b9e\u4f8b\u5316\u7684 children \u5217\u8868\u3002\u56fe\u7247\u5185\u5b58\u95ee\u9898\u7684\u7279\u6b8a\u6027\u5728\u4e8e&#xff1a;\u78c1\u76d8\u4e0a\u7684\u6587\u4ef6\u5927\u5c0f\u4e0e\u5185\u5b58\u4e2d\u7684\u5b9e\u9645\u5360\u7528\u4e4b\u95f4&#xff0c;\u51e0\u4e4e\u6ca1\u6709\u4efb\u4f55\u76f4\u89c2\u5173\u7cfb\u3002\u4e00\u5f20 2MB \u7684 JPEG \u53ef\u4ee5\u8f7b\u677e\u5360\u7528 48MB \u7684 RAM&#xff0c;\u800c\u5f00\u53d1\u8005\u770b\u5230 Image.network(url) \u65f6&#xff0c;\u5fc3\u667a\u6a21\u578b\u91cc\u5f80\u5f80\u53ea\u6709\u201c\u4e0b\u8f7d\u4e00\u5f20\u56fe\u7247\u201d&#xff0c;\u800c\u4e0d\u662f\u201c\u89e3\u538b\u4e00\u4e2a 4000\u00d73000 \u7684\u50cf\u7d20\u77e9\u9635\u201d\u3002<\/p>\n<h4>\u59ff\u6001\u4e00&#xff1a;2MB \u7684 JPEG&#xff0c;48MB \u7684 RAM\u2014\u2014\u201c\u6587\u4ef6\u5927\u5c0f\u201d\u4e0e\u201c\u89e3\u7801\u5185\u5b58\u201d\u7684\u5f7b\u5e95\u8131\u94a9<\/h4>\n<p>Flutter \u5b98\u65b9 Image \u7c7b\u7684\u6587\u6863\u5bf9\u6b64\u7684\u8868\u8ff0\u662f\u7cbe\u786e\u7684&#xff1a;\u201c\u56fe\u7247\u4ee5\u672a\u538b\u7f29\u5f62\u5f0f\u5b58\u50a8\u5728\u5185\u5b58\u4e2d&#xff08;\u4ee5\u4fbf\u6e32\u67d3&#xff09;\u3002\u5927\u56fe\u4f1a\u5360\u7528\u5927\u91cf\u5185\u5b58&#xff1a;\u4e00\u5f20 4K \u56fe\u7247&#xff08;3840\u00d72160&#xff09;\u4f1a\u5360\u7528\u8d85\u8fc7 30MB \u7684 RAM&#xff08;\u5047\u8bbe\u6bcf\u50cf\u7d20 32 \u4f4d&#xff09;\u201d\u3002Android \u5f00\u53d1\u8005\u6587\u6863\u7ed9\u51fa\u7684\u8ba1\u7b97\u516c\u5f0f\u662f\u540c\u4e00\u4ef6\u4e8b\u7684\u53e6\u4e00\u79cd\u8868\u8ff0&#xff1a;\u201cMemory (Bytes) &#061; Width \u00d7 Height \u00d7 Bytes Per Pixel\u201d&#xff0c;\u5e76\u7ed9\u51fa\u4e86\u4e00\u4e2a\u5177\u4f53\u7684\u6570\u5b57&#xff1a;\u201c\u5bf9\u4e8e 4000\u00d73000 \u50cf\u7d20\u7684\u5168\u5206\u8fa8\u7387\u7167\u7247&#xff0c;ARGB_8888 \u683c\u5f0f\u4f1a\u5360\u7528 48MB\u201d\u3002<\/p>\n<p>\u8fd9\u610f\u5473\u7740&#xff1a;\u4e00\u5f20 4000\u00d73000 \u7684 JPEG \u5728\u78c1\u76d8\u4e0a\u53ef\u80fd\u53ea\u6709 2MB&#xff0c;\u4f46\u89e3\u7801\u4e3a RGBA_8888 \u4f4d\u56fe\u540e\u5360\u7528\u7ea6 48MB\u2014\u2014\u6587\u4ef6\u538b\u7f29\u7387\u8d8a\u9ad8&#xff0c;\u78c1\u76d8\u5927\u5c0f\u4e0e\u89e3\u7801\u5185\u5b58\u4e4b\u95f4\u7684\u5dee\u8ddd\u5c31\u8d8a\u5927\u3002\u4e00\u4e2a\u5f00\u53d1\u8005\u5728\u4e00\u4e2a\u804a\u5929\u5217\u8868\u7684 12MP \u5934\u50cf\u4e0a\u8e29\u5751\u65f6&#xff0c;\u4ed6\u770b\u5230\u7684\u53ef\u80fd\u53ea\u662f\u4e00\u5f20\u201c\u51e0\u767e KB \u7684\u5934\u50cf\u201d&#xff0c;\u4f46\u6bcf\u6b21\u89e3\u7801\u90fd\u5728\u7533\u8bf7 48MB \u7684\u8fde\u7eed\u5185\u5b58\u3002\u5982\u679c\u9875\u9762\u4e0a\u540c\u65f6\u6709\u51e0\u5f20\u8fd9\u6837\u7684\u56fe\u7247\u5b58\u6d3b&#xff0c;\u6216\u8005\u5b83\u4eec\u88ab\u52a0\u8f7d\u5230\u4e00\u4e2a\u4e0d\u91ca\u653e\u7684\u5217\u8868\u4e2d&#xff0c;OOM \u4f1a\u5728\u7528\u6237\u6ed1\u52a8\u5230\u67d0\u4e2a\u4f4d\u7f6e\u65f6\u7a81\u7136\u53d1\u751f\u3002<\/p>\n<p>\u66f4\u5173\u952e\u7684\u662f&#xff0c;\u8fd9 48MB \u662f\u89e3\u7801\u540e\u7684\u50cf\u7d20\u6570\u636e&#xff0c;\u5b83\u4e0d\u5305\u542b\u7f16\u7801\u5b57\u8282\u3001\u89e3\u7801\u5668\u7f13\u51b2\u533a\u3001GPU \u7eb9\u7406\u5f00\u9500\u548c Flutter ImageCache \u7684\u7ba1\u7406\u6210\u672c\u3002buoy \u5305\u7684 decodedPixelBytes \u6587\u6863\u660e\u786e\u533a\u5206\u4e86\u8fd9\u4e00\u70b9&#xff1a;\u201cEstimated RGBA pixel storage, excluding Flutter\u2019s global image cache, encoded bytes, retained pictures, decoder buffers and GPU overhead\u201d\u3002\u771f\u5b9e\u7684\u5cf0\u503c\u5185\u5b58\u4f1a\u9ad8\u4e8e\u8fd9\u4e2a\u4f30\u7b97\u503c&#xff0c;\u800c\u4e0d\u662f\u4f4e\u4e8e\u5b83\u3002<\/p>\n<h4>\u59ff\u6001\u4e8c&#xff1a;cacheWidth\/cacheHeight \u7684\u201c\u7269\u7406\u50cf\u7d20\u9677\u9631\u201d\u2014\u2014\u7ed9\u4e86\u53c2\u6570&#xff0c;\u5374\u7ed9\u4e86\u9519\u8bef\u7684\u5355\u4f4d<\/h4>\n<p>cacheWidth \u548c cacheHeight \u662f Flutter \u4e3a\u201c\u9650\u5236\u89e3\u7801\u5c3a\u5bf8\u201d\u63d0\u4f9b\u7684\u76f4\u63a5\u624b\u6bb5\u3002Image \u6587\u6863\u7684\u793a\u4f8b\u5c55\u793a\u4e86\u5b83\u7684\u5a01\u529b&#xff1a;\u201c\u4e00\u5f20 4K \u56fe\u7247\u5982\u679c\u53ea\u6e32\u67d3\u5230 384\u00d7216 \u50cf\u7d20&#xff08;\u6c34\u5e73\u548c\u5782\u76f4\u7ef4\u5ea6\u5404\u5341\u5206\u4e4b\u4e00&#xff09;&#xff0c;\u5728\u6307\u5b9a\u8fd9\u4e24\u4e2a\u53c2\u6570\u540e\u53ea\u5360\u7528 330KB&#xff0c;\u5185\u5b58\u51cf\u5c11\u7ea6 100 \u500d\u201d\u3002instantiateImageCodecFromBuffer \u7684 API \u6587\u6863\u8fdb\u4e00\u6b65\u8bf4\u660e\u4e86\u8bed\u4e49&#xff1a;\u8fd9\u4e24\u4e2a\u53c2\u6570\u201c\u6307\u793a\u89e3\u7801\u56fe\u7247\u7684\u76ee\u6807\u5c3a\u5bf8\u201d&#xff0c;\u5f53\u53ea\u6307\u5b9a\u5176\u4e2d\u4e00\u4e2a\u65f6&#xff0c;\u201c\u7701\u7565\u7684\u7ef4\u5ea6\u5c06\u6309\u539f\u59cb\u5bbd\u9ad8\u6bd4\u7f29\u653e\u201d&#xff0c;\u800c\u5f53\u4e24\u8005\u90fd\u7701\u7565\u65f6&#xff0c;\u201c\u56fe\u7247\u5c06\u6309\u5176\u539f\u751f\u5206\u8fa8\u7387\u89e3\u7801\u201d\u3002<\/p>\n<p>\u95ee\u9898\u51fa\u5728\u5355\u4f4d\u7684\u6df7\u6dc6\u4e0a\u3002Image.network(url, width: 200) \u4e2d\u7684 width: 200 \u662f\u5e03\u5c40\u5c3a\u5bf8&#xff0c;\u903b\u8f91\u50cf\u7d20&#xff1b;cacheWidth: 400 \u4e2d\u7684 400 \u662f\u89e3\u7801\u5c3a\u5bf8&#xff0c;\u7269\u7406\u50cf\u7d20\u3002\u4e00\u4e2a\u5f00\u53d1\u8005\u5982\u679c\u770b\u5230\u8bbe\u8ba1\u7a3f\u4e0a\u7684\u56fe\u7247\u5bbd\u5ea6\u662f 200&#xff0c;\u5c31\u5199\u6210 cacheWidth: 200&#xff0c;\u5728 devicePixelRatio \u4e3a 2 \u6216 3 \u7684\u5c4f\u5e55\u4e0a&#xff0c;\u89e3\u7801\u51fa\u7684\u56fe\u7247\u53ea\u6709\u5b9e\u9645\u9700\u8981\u50cf\u7d20\u7684\u4e00\u534a\u6216\u4e09\u5206\u4e4b\u4e00&#xff0c;\u89c6\u89c9\u4e0a\u8868\u73b0\u4e3a\u6a21\u7cca&#xff1b;\u5982\u679c\u53cd\u8fc7\u6765&#xff0c;\u628a\u6e90\u56fe\u7684\u5bbd\u5ea6\u76f4\u63a5\u4f20\u7ed9 cacheWidth&#xff08;\u4f8b\u5982 cacheWidth: 4000&#xff09;&#xff0c;\u5219\u5b8c\u5168\u6ca1\u6709\u8d77\u5230\u9650\u5236\u5185\u5b58\u7684\u4f5c\u7528\u3002\u6b63\u786e\u7684\u6362\u7b97\u65b9\u5f0f\u662f cacheWidth &#061; \u903b\u8f91\u5bbd\u5ea6 \u00d7 devicePixelRatio&#xff0c;\u6b63\u5982\u4e00\u7bc7\u56fe\u7247\u7ba1\u7ebf\u6587\u7ae0\u6240\u603b\u7ed3\u7684&#xff1a;\u201cwidth: 200 \u662f\u5e03\u5c40\u2014\u2014\u903b\u8f91\u50cf\u7d20\u3002cacheWidth: 400 \u662f\u89e3\u7801\u2014\u2014\u7269\u7406\u50cf\u7d20&#xff0c;\u6240\u4ee5\u5927\u81f4\u662f\u903b\u8f91\u5bbd\u5ea6\u4e58\u4ee5\u8bbe\u5907\u50cf\u7d20\u6bd4\u3002\u628a\u903b\u8f91\u5bbd\u5ea6\u4f20\u7ed9 cacheWidth \u4f1a\u5728 2x \u6216 3x \u5c4f\u5e55\u4e0a\u4ea7\u751f\u6a21\u7cca\u56fe\u7247&#xff1b;\u4f20\u6e90\u56fe\u5bbd\u5ea6\u5219\u8fdd\u80cc\u4e86\u521d\u8877\u201d\u3002<\/p>\n<p>\u8fd9\u4e2a\u59ff\u6001\u7684\u6559\u5b66\u4ef7\u503c\u5728\u4e8e&#xff1a;cacheWidth \u4e0d\u662f\u201c\u4e00\u4e2a\u53ef\u4ee5\u968f\u624b\u586b\u7684\u6570\u5b57\u201d&#xff0c;\u5b83\u662f\u4e00\u4e2a\u9700\u8981\u4e0e\u5e03\u5c40\u5c3a\u5bf8\u548c\u8bbe\u5907\u5bc6\u5ea6\u7cbe\u786e\u534f\u5546\u7684\u7269\u7406\u50cf\u7d20\u503c\u3002\u586b\u9519\u4e86&#xff0c;\u8981\u4e48\u6a21\u7cca&#xff0c;\u8981\u4e48\u65e0\u6548\u3002<\/p>\n<h4>\u59ff\u6001\u4e09&#xff1a;ImageCache \u7684\u201clive \u4f8b\u5916\u201d\u2014\u2014\u7f13\u5b58\u6709\u9650&#xff0c;\u4f46\u6b63\u5728\u663e\u793a\u7684\u5927\u56fe\u53ef\u4ee5\u7ed5\u8fc7\u4e0a\u9650<\/h4>\n<p>Flutter \u7684 ImageCache \u662f\u4e00\u4e2a\u6700\u8fd1\u6700\u5c11\u4f7f\u7528&#xff08;LRU&#xff09; \u7684\u5185\u5b58\u7f13\u5b58&#xff0c;\u9ed8\u8ba4\u4e0a\u9650\u662f 1000 \u5f20\u56fe\u7247\u548c 100MB\u3002\u5f00\u53d1\u8005\u901a\u5e38\u4f1a\u628a\u201c100MB\u201d\u7406\u89e3\u4e3a\u201c\u6240\u6709\u56fe\u7247\u5185\u5b58\u7684\u603b\u4e0a\u9650\u201d&#xff0c;\u4f46 ImageCache \u7684\u673a\u5236\u4e2d\u6709\u4e00\u4e2a\u5173\u952e\u7684\u4f8b\u5916&#xff1a;live \u5f15\u7528\u3002<\/p>\n<p>ImageCache \u7684\u7c7b\u6587\u6863\u63cf\u8ff0&#xff1a;\u201c\u7f13\u5b58\u8fd8\u6301\u6709\u4e00\u4e2a \u2018live\u2019 \u5f15\u7528\u5217\u8868\u3002\u4e00\u5f20\u56fe\u7247\u88ab\u8ba4\u4e3a\u662f live \u7684&#xff0c;\u5982\u679c\u5b83\u7684 ImageStreamCompleter \u7684\u76d1\u542c\u8005\u6570\u91cf\u5728\u6dfb\u52a0\u81f3\u5c11\u4e00\u4e2a\u76d1\u542c\u8005\u4e4b\u540e\u4ece\u672a\u964d\u5230\u96f6\u201d\u3002putIfAbsent \u7684\u6587\u6863\u8865\u5145\u4e86\u66f4\u91cd\u8981\u7684\u7ea6\u675f&#xff1a;\u201c\u5927\u4e8e maximumSizeBytes \u7684\u56fe\u7247\u4e0d\u4f1a\u88ab\u7f13\u5b58&#xff0c;\u4e5f\u4e0d\u4f1a\u5bfc\u81f4\u7f13\u5b58\u4e2d\u7684\u5176\u4ed6\u56fe\u7247\u88ab\u9a71\u9010\u201d\u3002\u7ed3\u5408 precacheImage \u7684\u6587\u6863\u53ef\u4ee5\u770b\u6e05\u5b8c\u6574\u7684\u56fe\u666f&#xff1a;\u4e00\u5f20\u88ab precacheImage \u6216\u6b63\u5728\u88ab Image Widget \u76d1\u542c\u7684\u56fe\u7247&#xff0c;\u201c\u81f3\u5c11\u4f1a\u4fdd\u6301\u5728\u5185\u5b58\u4e2d&#xff0c;\u76f4\u5230\u8c03\u7528\u8005\u4ece\u6d41\u4e2d\u79fb\u9664\u5b83\u7684\u76d1\u542c\u8005&#xff0c;\u5373\u4f7f\u5b83\u672c\u6765\u4e0d\u9002\u5408\u7f13\u5b58\u201d&#xff1b;\u6587\u6863\u540c\u65f6\u8b66\u544a&#xff1a;\u201c\u8c03\u7528\u8005\u5e94\u8c28\u614e\u5c06\u5927\u56fe\u6216\u5927\u91cf\u56fe\u7247\u9489\u5728\u5185\u5b58\u4e2d&#xff0c;\u56e0\u4e3a\u8fd9\u53ef\u80fd\u5bfc\u81f4\u5185\u5b58\u8017\u5c3d\u5e76\u88ab\u64cd\u4f5c\u7cfb\u7edf\u6740\u6b7b\u201d\u3002<\/p>\n<p>\u8fd9\u610f\u5473\u7740&#xff1a;100MB \u7684 LRU \u4e0a\u9650\u7ba1\u7684\u662f\u201c\u7f13\u5b58\u4e2d\u7684\u56fe\u7247\u201d&#xff0c;\u4e0d\u7ba1\u201c\u6b63\u5728\u88ab\u76d1\u542c\u6216\u9489\u4f4f\u7684\u56fe\u7247\u201d \u3002\u5982\u679c\u9875\u9762\u4e0a\u540c\u65f6\u6709 5 \u5f20 48MB \u7684\u5927\u56fe\u5904\u4e8e live \u72b6\u6001&#xff08;\u4f8b\u5982\u4e00\u4e2a\u6a2a\u5411 PageView \u4e2d\u76f8\u90bb\u7684\u51e0\u9875&#xff0c;\u6216\u8005\u4e00\u4e2a GridView \u7684\u53ef\u89c1\u533a\u57df&#xff09;&#xff0c;\u5b83\u4eec\u53ef\u4ee5\u5408\u6cd5\u5730\u7ed5\u8fc7 LRU \u7684\u4e0a\u9650&#xff0c;\u5408\u8ba1\u5360\u7528 240MB&#xff0c;\u800c ImageCache \u7684\u201c100MB\u201d\u8fd9\u4e2a\u6570\u5b57\u5bf9\u5b83\u4eec\u6beb\u65e0\u7ea6\u675f\u529b\u3002<\/p>\n<h4>\u59ff\u6001\u56db&#xff1a;\u52a8\u753b\u56fe\u7247\u7684\u201c\u5c3a\u5bf8\u53c2\u6570\u65e0\u6548\u201d\u2014\u2014cacheWidth \u5bf9 GIF\/WebP\/APNG \u4e0d\u751f\u6548<\/h4>\n<p>\u8fd9\u662f\u59ff\u6001\u4e8c\u4e2d\u201c\u53c2\u6570\u7ed9\u4e86\u4f46\u6ca1\u8d77\u4f5c\u7528\u201d\u7684\u4e00\u4e2a\u66f4\u9690\u853d\u7684\u53d8\u4f53&#xff0c;\u800c\u4e14\u5b83\u6070\u597d\u53d1\u751f\u5728\u5185\u5b58\u538b\u529b\u6700\u5927\u7684\u573a\u666f\u4e2d\u3002Flutter \u5f15\u64ce\u7684\u4e00\u4e2a PR \u5bf9\u6b64\u7684\u8868\u8ff0\u662f\u76f4\u63a5\u7684&#xff1a;\u201ccacheWidth\/cacheHeight \u548c ResizeImage \u5bf9\u52a8\u753b GIF\u3001WebP \u548c APNG \u56fe\u7247\u6ca1\u6709\u6548\u679c&#xff0c;\u8fd9\u662f\u9ad8\u5185\u5b58\u5360\u7528\u7684\u4e00\u4e2a\u5e38\u89c1\u6765\u6e90&#xff08;\u4f8b\u5982\u52a8\u753b\u8d34\u7eb8\u7684\u7f51\u683c&#xff09;\u201d\u3002\u4e2d\u6587\u6280\u672f\u793e\u533a\u5bf9 MOO \u97f3\u4e50\u9879\u76ee\u7684\u603b\u7ed3\u4e5f\u6307\u5411\u540c\u4e00\u7c7b\u95ee\u9898&#xff1a;\u201c\u5f88\u591a\u5217\u8868\u90fd\u4f7f\u7528 GIF \u52a8\u56fe&#xff0c;\u5927\u5c0f\u53ef\u4ee5\u8fbe\u51e0 MB \u4e43\u81f3\u5341\u51e0 MB&#xff0c;\u56fe\u7247\u6240\u5360\u5185\u5b58\u8ddf\u56fe\u7247\u5927\u5c0f\u6709\u5173&#xff0c;\u5f71\u54cd\u66f4\u5927\u7684\u662f\u56fe\u7247\u7f13\u5b58\u5c3a\u5bf8\u5bfc\u81f4\u7684\u5185\u5b58\u589e\u957f&#xff0c;\u4e00\u65e6\u51fa\u95ee\u9898\u5c31\u5f88\u5bb9\u6613\u5bfc\u81f4 OOM\u201d\u3002<\/p>\n<p>\u8fd9\u4e2a\u59ff\u6001\u7684\u5371\u9669\u5728\u4e8e&#xff1a;\u5f00\u53d1\u8005\u4ee5\u4e3a\u5df2\u7ecf\u505a\u4e86\u4f18\u5316\u3002\u4ee3\u7801\u4e2d\u5199\u4e0a\u4e86 cacheWidth: 400&#xff0c;analyzer \u4e0d\u4f1a\u8b66\u544a&#xff0c;\u4ee3\u7801 review \u4e5f\u4e0d\u4f1a\u53d1\u73b0\u95ee\u9898&#xff0c;\u4f46\u52a8\u753b\u56fe\u7247\u7684\u89e3\u7801\u4ecd\u7136\u6309\u539f\u59cb\u5c3a\u5bf8\u8fdb\u884c\u3002\u4e00\u4e2a\u7531\u51e0\u5341\u5f20\u52a8\u753b\u8d34\u7eb8\u7ec4\u6210\u7684\u7f51\u683c&#xff0c;\u6bcf\u5f20\u8d34\u7eb8\u7684\u539f\u59cb\u5c3a\u5bf8\u53ef\u80fd\u662f 500\u00d7500 \u751a\u81f3\u66f4\u5927&#xff0c;\u89e3\u7801\u540e\u7684\u5185\u5b58\u5360\u7528\u4e0e\u9759\u6001\u5927\u56fe\u5728\u540c\u4e00\u4e2a\u91cf\u7ea7&#xff0c;\u800c\u5c3a\u5bf8\u9650\u5236\u53c2\u6570\u5728\u8fd9\u4e2a\u573a\u666f\u4e2d\u662f\u9759\u9ed8\u5931\u6548\u7684\u3002<\/p>\n<h3>\u4e8c\u3001\u6839\u56e0\u5256\u6790&#xff1a;\u56fe\u7247\u5185\u5b58\u7531\u201c\u89e3\u7801\u5c3a\u5bf8 \u00d7 \u5b58\u6d3b\u6570\u91cf\u201d\u51b3\u5b9a&#xff0c;\u800c\u8fd9\u4e24\u8005\u90fd\u4e0d\u53d7\u76f4\u89c9\u63a7\u5236<\/h3>\n<p>\u5148\u770b\u4e00\u5f20\u56fe\u7247\u4ece\u8bf7\u6c42\u5230\u6e32\u67d3\u7684\u5b8c\u6574\u7ba1\u7ebf\u56fe&#xff0c;\u7406\u89e3\u5185\u5b58\u95ee\u9898\u53d1\u751f\u5728\u54ea\u4e2a\u9636\u6bb5&#xff1a;<\/p>\n<p>  #mermaid-svg-BvSJ2ro7Tnu85FAz{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-BvSJ2ro7Tnu85FAz .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-BvSJ2ro7Tnu85FAz .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-BvSJ2ro7Tnu85FAz .error-icon{fill:#552222;}#mermaid-svg-BvSJ2ro7Tnu85FAz .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-BvSJ2ro7Tnu85FAz .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-BvSJ2ro7Tnu85FAz .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-BvSJ2ro7Tnu85FAz .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-BvSJ2ro7Tnu85FAz .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-BvSJ2ro7Tnu85FAz .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-BvSJ2ro7Tnu85FAz .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-BvSJ2ro7Tnu85FAz .marker{fill:#333333;stroke:#333333;}#mermaid-svg-BvSJ2ro7Tnu85FAz .marker.cross{stroke:#333333;}#mermaid-svg-BvSJ2ro7Tnu85FAz svg{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-BvSJ2ro7Tnu85FAz p{margin:0;}#mermaid-svg-BvSJ2ro7Tnu85FAz .label{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;color:#333;}#mermaid-svg-BvSJ2ro7Tnu85FAz .cluster-label text{fill:#333;}#mermaid-svg-BvSJ2ro7Tnu85FAz .cluster-label span{color:#333;}#mermaid-svg-BvSJ2ro7Tnu85FAz .cluster-label span p{background-color:transparent;}#mermaid-svg-BvSJ2ro7Tnu85FAz .label text,#mermaid-svg-BvSJ2ro7Tnu85FAz span{fill:#333;color:#333;}#mermaid-svg-BvSJ2ro7Tnu85FAz .node rect,#mermaid-svg-BvSJ2ro7Tnu85FAz .node circle,#mermaid-svg-BvSJ2ro7Tnu85FAz .node ellipse,#mermaid-svg-BvSJ2ro7Tnu85FAz .node polygon,#mermaid-svg-BvSJ2ro7Tnu85FAz .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-BvSJ2ro7Tnu85FAz .rough-node .label text,#mermaid-svg-BvSJ2ro7Tnu85FAz .node .label text,#mermaid-svg-BvSJ2ro7Tnu85FAz .image-shape .label,#mermaid-svg-BvSJ2ro7Tnu85FAz .icon-shape .label{text-anchor:middle;}#mermaid-svg-BvSJ2ro7Tnu85FAz .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-BvSJ2ro7Tnu85FAz .rough-node .label,#mermaid-svg-BvSJ2ro7Tnu85FAz .node .label,#mermaid-svg-BvSJ2ro7Tnu85FAz .image-shape .label,#mermaid-svg-BvSJ2ro7Tnu85FAz .icon-shape .label{text-align:center;}#mermaid-svg-BvSJ2ro7Tnu85FAz .node.clickable{cursor:pointer;}#mermaid-svg-BvSJ2ro7Tnu85FAz .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-BvSJ2ro7Tnu85FAz .arrowheadPath{fill:#333333;}#mermaid-svg-BvSJ2ro7Tnu85FAz .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-BvSJ2ro7Tnu85FAz .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-BvSJ2ro7Tnu85FAz .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-BvSJ2ro7Tnu85FAz .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-BvSJ2ro7Tnu85FAz .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-BvSJ2ro7Tnu85FAz .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-BvSJ2ro7Tnu85FAz .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-BvSJ2ro7Tnu85FAz .cluster text{fill:#333;}#mermaid-svg-BvSJ2ro7Tnu85FAz .cluster span{color:#333;}#mermaid-svg-BvSJ2ro7Tnu85FAz div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-BvSJ2ro7Tnu85FAz .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-BvSJ2ro7Tnu85FAz rect.text{fill:none;stroke-width:0;}#mermaid-svg-BvSJ2ro7Tnu85FAz .icon-shape,#mermaid-svg-BvSJ2ro7Tnu85FAz .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-BvSJ2ro7Tnu85FAz .icon-shape p,#mermaid-svg-BvSJ2ro7Tnu85FAz .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-BvSJ2ro7Tnu85FAz .icon-shape .label rect,#mermaid-svg-BvSJ2ro7Tnu85FAz .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-BvSJ2ro7Tnu85FAz .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-BvSJ2ro7Tnu85FAz .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-BvSJ2ro7Tnu85FAz :root{&#8211;mermaid-font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;}<\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u5185\u5b58\u653e\u5927\u56682MB JPEG \u2192 48MB RGBA<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>width\/height\u53ea\u5f71\u54cd\u7ed8\u5236\u5c3a\u5bf8<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>cacheWidth\/cacheHeight\u5f71\u54cd\u89e3\u7801\u8f93\u51fa\u5c3a\u5bf8<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>Key \u9636\u6bb5\u751f\u6210 ImageProvider \u7684 key<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>Fetch \u9636\u6bb5\u4ece\u7f51\u7edc\/\u78c1\u76d8\/\u5185\u5b58\u83b7\u53d6\u538b\u7f29\u5b57\u8282<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>Decode \u9636\u6bb5\u538b\u7f29\u5b57\u8282 \u2192 \u672a\u538b\u7f29\u50cf\u7d20\u77e9\u9635<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>Cache \u9636\u6bb5\u89e3\u7801\u7ed3\u679c\u8fdb\u5165 ImageCache<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>Paint \u9636\u6bb5\u6309\u5e03\u5c40\u5c3a\u5bf8\u7ed8\u5236\u5230\u5c4f\u5e55<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u5185\u5b58\u5cf0\u503c\u5bbd\u5ea6 \u00d7 \u9ad8\u5ea6 \u00d7 4 \u5b57\u8282<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u5e03\u5c40\u5c3a\u5bf8\u903b\u8f91\u50cf\u7d20<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u89e3\u7801\u5c3a\u5bf8\u7269\u7406\u50cf\u7d20<\/p>\n<p><\/span><\/p>\n<p>\u5173\u952e\u7ed3\u8bba&#xff1a; \u5185\u5b58\u95ee\u9898\u53d1\u751f\u5728 Decode \u9636\u6bb5&#xff0c;cacheWidth\/cacheHeight \u7684\u4f5c\u7528\u70b9\u5728\u89e3\u7801\u5668&#xff0c;\u800c width\/height \u53ea\u5f71\u54cd Paint \u9636\u6bb5\u7684\u7ed8\u5236\u5c3a\u5bf8\u3002<\/p>\n<h4>2.1 \u89e3\u7801\u662f\u5185\u5b58\u7684\u201c\u653e\u5927\u5668\u201d&#xff1a;\u538b\u7f29\u5b57\u8282 \u2192 \u672a\u538b\u7f29\u50cf\u7d20<\/h4>\n<p>Flutter \u7684\u56fe\u7247\u7ba1\u7ebf\u5305\u542b\u4e94\u4e2a\u9636\u6bb5&#xff1a;Key \u2192 Fetch \u2192 Decode \u2192 Cache \u2192 Paint\u3002\u5185\u5b58\u95ee\u9898\u53d1\u751f\u5728 Decode \u9636\u6bb5&#xff1a;\u538b\u7f29\u7684\u5b57\u8282&#xff08;JPEG\u3001PNG\u3001WebP&#xff09;\u88ab\u89e3\u7801\u5668\u5c55\u5f00\u4e3a dart:ui.Image&#xff0c;\u5373\u201c\u539f\u59cb\u50cf\u7d20&#xff0c;\u5bbd\u5ea6 \u00d7 \u9ad8\u5ea6 \u00d7 4 \u5b57\u8282\u201d\u3002\u4e00\u5f20 4000\u00d73000 \u7684\u56fe\u7247&#xff0c;\u5728\u8fd9\u4e2a\u9636\u6bb5\u4ece\u201c\u7ea6 2MB \u7684\u538b\u7f29\u6570\u636e\u201d\u53d8\u6210\u4e86\u201c48MB \u7684 RGBA \u50cf\u7d20\u77e9\u9635\u201d\u3002<\/p>\n<p>\u8fd9\u4e2a\u653e\u5927\u500d\u7387\u4e0d\u662f\u6052\u5b9a\u7684&#xff0c;\u5b83\u53d6\u51b3\u4e8e\u538b\u7f29\u7387\u3001\u56fe\u7247\u5185\u5bb9\u7684\u590d\u6742\u5ea6\u548c\u683c\u5f0f\u3002\u4e00\u5f20\u7eaf\u8272 PNG \u7684\u538b\u7f29\u7387\u6781\u9ad8&#xff0c;\u78c1\u76d8\u4e0a\u53ef\u80fd\u53ea\u6709\u51e0\u5341 KB&#xff0c;\u4f46\u89e3\u7801\u540e\u4ecd\u7136\u662f \u5bbd\u5ea6 \u00d7 \u9ad8\u5ea6 \u00d7 4 \u5b57\u8282&#xff1b;\u4e00\u5f20\u9ad8\u8d28\u91cf\u7684 JPEG \u538b\u7f29\u7387\u8f83\u4f4e&#xff0c;\u78c1\u76d8\u4e0a\u53ef\u80fd\u6709 5MB&#xff0c;\u4f46\u89e3\u7801\u540e\u540c\u6837\u662f\u90a3\u4e2a\u50cf\u7d20\u77e9\u9635\u3002\u51b3\u5b9a\u5185\u5b58\u7684\u662f\u89e3\u7801\u540e\u7684\u5c3a\u5bf8&#xff0c;\u4e0d\u662f\u6587\u4ef6\u5927\u5c0f\u3002\u8fd9\u5c31\u662f\u4e3a\u4ec0\u4e48\u201c\u53ea\u52a0\u8f7d\u7f29\u7565\u56fe\u201d\u548c\u201c\u53ea\u52a0\u8f7d\u5934\u50cf\u201d\u4ecd\u7136\u53ef\u80fd\u5bfc\u81f4 OOM&#xff1a;\u5982\u679c\u6e90\u56fe\u662f 12MP \u7684\u76f8\u673a\u7167\u7247&#xff0c;\u5373\u4f7f\u5b83\u5728\u5c4f\u5e55\u4e0a\u53ea\u663e\u793a\u4e3a 48\u00d748 \u7684\u5706\u5f62\u5934\u50cf&#xff0c;\u9ed8\u8ba4\u7684\u89e3\u7801\u884c\u4e3a\u4ecd\u7136\u4f1a\u628a\u6574\u5f20 12MP \u56fe\u7247\u5c55\u5f00\u5230\u5185\u5b58\u4e2d&#xff0c;\u7136\u540e\u518d\u7f29\u5c0f\u7ed8\u5236\u3002<\/p>\n<h4>2.2 cacheWidth\/cacheHeight \u7684\u4f5c\u7528\u70b9\u5728\u89e3\u7801\u5668&#xff0c;\u4e0d\u5728\u5e03\u5c40\u5f15\u64ce<\/h4>\n<p>cacheWidth \u548c cacheHeight \u4e4b\u6240\u4ee5\u80fd\u5c06 4K \u56fe\u7247\u7684\u5185\u5b58\u4ece 30MB \u964d\u5230 330KB&#xff0c;\u662f\u56e0\u4e3a\u5b83\u4eec\u6539\u53d8\u4e86 Decode \u9636\u6bb5\u672c\u8eab\u3002instantiateImageCodecFromBuffer \u7684\u6587\u6863\u8bf4\u660e&#xff0c;\u8fd9\u4e24\u4e2a\u53c2\u6570\u201c\u6307\u793a\u89e3\u7801\u56fe\u7247\u7684\u76ee\u6807\u5c3a\u5bf8\u201d&#xff0c;\u5f15\u64ce\u4f1a\u5728\u89e3\u7801\u65f6\u76f4\u63a5\u8f93\u51fa\u7f29\u5c0f\u540e\u7684\u50cf\u7d20\u77e9\u9635&#xff0c;\u800c\u4e0d\u662f\u5148\u89e3\u7801\u5168\u5c3a\u5bf8\u518d\u7f29\u5c0f\u3002Image \u6587\u6863\u5bf9\u6b64\u7684\u8868\u8ff0\u662f&#xff1a;\u201c\u5f15\u64ce\u5c06\u5728\u6307\u5b9a\u5c3a\u5bf8\u89e3\u7801\u5e76\u5b58\u50a8\u56fe\u7247&#xff0c;\u800c\u4e0d\u662f\u56fe\u7247\u7684\u81ea\u7136\u5c3a\u5bf8\u3002\u8fd9\u53ef\u4ee5\u663e\u8457\u51cf\u5c11\u5185\u5b58\u5360\u7528\u201d\u3002<\/p>\n<p>\u8fd9\u4e0e Image Widget \u7684 width\/height \u53c2\u6570\u6709\u672c\u8d28\u533a\u522b&#xff1a;width\/height \u5f71\u54cd\u7684\u662f Paint \u9636\u6bb5\u7684\u7ed8\u5236\u5c3a\u5bf8&#xff0c;\u89e3\u7801\u4ecd\u7136\u6309\u539f\u59cb\u5c3a\u5bf8\u8fdb\u884c&#xff0c;\u5185\u5b58\u5df2\u7ecf\u652f\u4ed8\u4e86\u3002cacheWidth\/cacheHeight \u5f71\u54cd\u7684\u662f Decode \u9636\u6bb5\u7684\u8f93\u51fa\u5c3a\u5bf8&#xff0c;\u5185\u5b58\u5728\u8fd9\u5f20\u56fe\u7247\u7684\u751f\u547d\u5468\u671f\u4e2d\u6839\u672c\u4e0d\u4f1a\u88ab\u5206\u914d\u3002\u4e00\u4e2a\u5e38\u89c1\u7684\u8bef\u89e3\u662f\u201c\u6211\u5728 Image \u4e0a\u8bbe\u7f6e\u4e86 width: 200&#xff0c;\u6240\u4ee5\u5185\u5b58\u5e94\u8be5\u5f88\u5c0f\u201d\u2014\u2014\u5e03\u5c40\u5c3a\u5bf8\u548c\u5185\u5b58\u5c3a\u5bf8\u662f\u4e24\u4e2a\u72ec\u7acb\u7684\u7ef4\u5ea6&#xff0c;\u524d\u8005\u4e0d\u7ea6\u675f\u540e\u8005\u3002<\/p>\n<h4>2.3 ImageCache \u7684 LRU \u53ea\u7ea6\u675f\u201c\u7f13\u5b58\u201d&#xff0c;\u4e0d\u7ea6\u675f\u201c\u5b58\u6d3b\u201d<\/h4>\n<p>ImageCache \u7684 LRU \u673a\u5236\u7ba1\u7406\u7684\u662f _cache \u4e2d\u7684\u6761\u76ee&#xff1a;\u5f53\u7f13\u5b58\u7684\u603b\u5b57\u8282\u6570\u8d85\u8fc7 maximumSizeBytes&#xff08;\u9ed8\u8ba4 100MB&#xff09;\u6216\u6761\u76ee\u6570\u8d85\u8fc7 maximumSize&#xff08;\u9ed8\u8ba4 1000&#xff09;\u65f6&#xff0c;\u6700\u4e45\u672a\u4f7f\u7528\u7684\u6761\u76ee\u88ab\u9a71\u9010\u3002\u4f46\u8fd9\u4e2a\u673a\u5236\u6709\u4e00\u4e2a\u7ed3\u6784\u6027\u7684\u8fb9\u754c&#xff1a;\u5b83\u4e0d\u9a71\u9010 live \u7684\u56fe\u7247\u3002<\/p>\n<p>\u4e00\u5f20\u56fe\u7247\u5728\u4ee5\u4e0b\u60c5\u51b5\u4e0b\u662f live \u7684&#xff1a;\u5b83\u81f3\u5c11\u6709\u4e00\u4e2a\u76d1\u542c\u8005&#xff08;\u4f8b\u5982\u4e00\u4e2a\u6b63\u5728\u663e\u793a\u7684 Image Widget&#xff09;&#xff0c;\u6216\u8005\u5b83\u901a\u8fc7 precacheImage \u88ab\u9489\u4f4f&#xff0c;\u6216\u8005\u5b83\u88ab ImageStreamCompleterHandle \u6301\u6709\u3002precacheImage \u7684\u6587\u6863\u5bf9\u6b64\u7684\u8b66\u544a\u662f\u76f4\u63a5\u7684&#xff1a;\u56fe\u7247\u201c\u4f1a\u4fdd\u6301\u5728\u5185\u5b58\u4e2d\u81f3\u5c11\u76f4\u5230\u8c03\u7528\u8005\u79fb\u9664\u76d1\u542c\u8005&#xff0c;\u5373\u4f7f\u5b83\u672c\u6765\u4e0d\u9002\u5408\u7f13\u5b58\u201d&#xff1b;\u201c\u8c03\u7528\u8005\u5e94\u8c28\u614e\u5c06\u5927\u56fe\u6216\u5927\u91cf\u56fe\u7247\u9489\u5728\u5185\u5b58\u4e2d&#xff0c;\u56e0\u4e3a\u8fd9\u53ef\u80fd\u5bfc\u81f4 OOM\u201d\u3002ImageCache \u7684 clear() \u65b9\u6cd5\u201c\u9a71\u9010\u6240\u6709 pending \u548c keepAlive \u6761\u76ee\u201d&#xff0c;\u4f46\u8981\u6e05\u9664 live \u5f15\u7528&#xff0c;\u201c\u4f7f\u7528 clearLiveImages\u201d\u2014\u2014\u8fd9\u4ece API \u7684\u5c42\u9762\u786e\u8ba4\u4e86 live \u4e0e cache \u662f\u4e24\u5957\u4e0d\u540c\u7684\u7ba1\u7406\u673a\u5236\u3002<\/p>\n<p>\u4e00\u4e2a\u5177\u4f53\u7684\u540e\u679c\u662f&#xff1a;\u5982\u679c\u5f00\u53d1\u8005\u4e3a\u4e86\u201c\u4f18\u5316\u4f53\u9a8c\u201d\u800c\u5bf9\u4e00\u4e2a\u76f8\u518c\u7684\u6bcf\u4e00\u5f20\u56fe\u7247\u90fd\u8c03\u7528\u4e86 precacheImage&#xff0c;\u8fd9\u4e9b\u56fe\u7247\u5728\u9884\u52a0\u8f7d\u5b8c\u6210\u540e\u5e76\u6ca1\u6709\u7acb\u5373\u88ab\u4efb\u4f55 Widget \u76d1\u542c&#xff0c;\u4f46 precacheImage \u7684 Future \u5b8c\u6210\u4e4b\u524d\u5b83\u4f1a\u4fdd\u6301\u4e00\u4e2a\u76d1\u542c\u8005&#xff0c;\u5b8c\u6210\u540e\u76d1\u542c\u8005\u88ab\u79fb\u9664\u2014\u2014\u5982\u679c\u6b64\u65f6\u56fe\u7247\u6ca1\u6709\u88ab\u4efb\u4f55 Widget \u63a5\u7ba1&#xff0c;\u5b83\u53ef\u80fd\u8fdb\u5165\u7f13\u5b58&#xff1b;\u4f46\u5982\u679c\u5b83\u5df2\u7ecf\u56e0\u4e3a\u5c3a\u5bf8\u8d85\u8fc7 maximumSizeBytes \u800c\u65e0\u6cd5\u8fdb\u5165\u7f13\u5b58&#xff0c;\u5b83\u4f1a\u5728\u76d1\u542c\u8005\u79fb\u9664\u540e\u88ab\u91ca\u653e\u3002\u771f\u6b63\u5371\u9669\u7684\u662f\u201c\u56fe\u7247\u540c\u65f6\u88ab\u591a\u4e2a Widget \u76d1\u542c&#xff0c;\u6216\u8005\u88ab\u4e00\u4e2a\u4e0d\u91ca\u653e\u7684 ImageStreamCompleterHandle \u6301\u6709\u201d\u7684\u573a\u666f&#xff1a;\u6b64\u65f6 LRU \u7684\u5b57\u8282\u4e0a\u9650\u5bf9\u8fd9\u4e9b live \u56fe\u7247\u5b8c\u5168\u65e0\u6548\u3002<\/p>\n<h4>2.4 ListView \u7684\u201c\u61d2\u6784\u5efa\u201d\u4e0d\u81ea\u52a8\u7b49\u4e8e\u201c\u5185\u5b58\u91ca\u653e\u201d<\/h4>\n<p>\u7b2c11\u8bfe\u5efa\u7acb\u4e86 ListView.builder \u7684\u61d2\u52a0\u8f7d\u8bed\u4e49&#xff1a;\u5c4f\u5e55\u5916\u7684\u6761\u76ee\u4e0d\u6784\u5efa\u3002\u4f46\u61d2\u6784\u5efa\u548c\u5185\u5b58\u91ca\u653e\u662f\u4e24\u4ef6\u4e0d\u540c\u7684\u4e8b\u3002Flutter \u7684 issue #92378 \u8bb0\u5f55\u4e86\u4e00\u4e2a\u5f00\u53d1\u8005\u7684\u7cbe\u786e\u89c2\u5bdf&#xff1a;\u201c\u5185\u5b58\u53ea\u589e\u4e0d\u51cf&#xff0c;\u968f\u7740\u4ece\u7f51\u7edc\u4e0b\u8f7d\u7684\u65b0\u56fe\u7247\u4e0d\u65ad\u7d2f\u79ef&#xff1b;\u5f53 Widget \u88ab dispose \u65f6&#xff0c;\u5185\u5b58\u4ece\u672a\u88ab\u81ea\u52a8\u91ca\u653e\u201d&#xff1b;\u4ed6\u7684\u671f\u671b\u4e4b\u4e00\u662f\u201c\u5728 ListView.builder \u4e2d\u53ea\u4e3a\u53ef\u89c1\u6761\u76ee&#xff08;\u6216\u52a0\u4e0a cacheExtent \u9650\u5236&#xff09;\u4fdd\u6301\u56fe\u7247\u5728\u5185\u5b58\u4e2d\u201d&#xff0c;\u4f46\u5b9e\u9645\u884c\u4e3a\u5e76\u975e\u5982\u6b64&#xff1b;\u4ed6\u5c1d\u8bd5\u4e86 automaticKeepAlive \u53c2\u6570&#xff0c;\u201c\u65e0\u8bba\u8bbe\u4e3a true \u8fd8\u662f false \u90fd\u4e0d\u6539\u53d8\u4efb\u4f55\u4e1c\u897f\u201d&#xff1b;\u5373\u4f7f\u4f7f\u7528\u4e86 ResizeImage&#xff0c;\u201cOOM \u4ecd\u7136\u4e0d\u53ef\u907f\u514d\u201d\u3002<\/p>\n<p>\u8fd9\u4e2a issue \u63ed\u793a\u7684\u6839\u56e0\u662f&#xff1a;ListView.builder \u9500\u6bc1\u7684\u662f\u5217\u8868\u9879\u7684 Element \u548c State&#xff0c;\u5b83\u4e0d\u8d1f\u8d23\u6e05\u7406 ImageCache \u4e2d\u7684\u7f13\u5b58\u6761\u76ee\u3002\u5f53\u4e00\u4e2a\u5217\u8868\u9879\u6eda\u51fa\u89c6\u53e3\u5e76\u88ab\u9500\u6bc1\u65f6&#xff0c;\u5b83\u5bf9\u5e94\u7684 Image Widget \u7684\u76d1\u542c\u8005\u88ab\u79fb\u9664&#xff0c;\u56fe\u7247\u4ece live \u53d8\u4e3a\u975e live&#xff0c;\u8fdb\u5165 ImageCache \u7684 LRU \u7ba1\u7406\u3002\u5982\u679c\u5217\u8868\u9879\u8db3\u591f\u591a\u3001\u56fe\u7247\u8db3\u591f\u5927&#xff0c;ImageCache \u4f1a\u5728\u6eda\u52a8\u8fc7\u7a0b\u4e2d\u4e0d\u65ad\u7d2f\u79ef\u89e3\u7801\u540e\u7684\u56fe\u7247&#xff0c;\u76f4\u5230\u8fbe\u5230 100MB \u7684\u9ed8\u8ba4\u4e0a\u9650\u624d\u5f00\u59cb\u9a71\u9010\u3002\u5728\u8fd9\u4e2a\u7d2f\u79ef\u8fc7\u7a0b\u4e2d&#xff0c;\u5185\u5b58\u5cf0\u503c\u53ef\u80fd\u8fdc\u9ad8\u4e8e\u201c\u53ef\u89c1\u6761\u76ee\u201d\u7684\u7406\u8bba\u503c\u3002\u5982\u679c\u56fe\u7247\u5c3a\u5bf8\u63a5\u8fd1\u6216\u8d85\u8fc7 maximumSizeBytes&#xff0c;\u5b83\u4eec\u751a\u81f3\u65e0\u6cd5\u8fdb\u5165\u7f13\u5b58&#xff08;putIfAbsent \u7684\u6587\u6863&#xff1a;\u201c\u5927\u4e8e maximumSizeBytes \u7684\u56fe\u7247\u4e0d\u4f1a\u88ab\u7f13\u5b58\u201d&#xff09;&#xff0c;\u6bcf\u6b21\u91cd\u65b0\u8fdb\u5165\u89c6\u53e3\u90fd\u9700\u8981\u91cd\u65b0\u89e3\u7801&#xff0c;\u9020\u6210 CPU \u548c\u5185\u5b58\u7684\u53cd\u590d\u6296\u52a8\u3002<\/p>\n<p>keepAlive \u673a\u5236\u4f1a\u8fdb\u4e00\u6b65\u52a0\u5267\u8fd9\u4e2a\u95ee\u9898\u3002Image \u7684 keepAlive \u5c5e\u6027\u201c\u51b3\u5b9a\u6e32\u67d3\u7684\u56fe\u7247\u662f\u5426\u5e94\u8be5\u5728\u4f8b\u5982\u6eda\u51fa ListView \u89c6\u56fe\u540e\u4ecd\u7136\u88ab\u4fdd\u7559\u201d\u3002\u5f53 keepAlive \u4e3a true \u65f6&#xff0c;\u56fe\u7247\u88ab\u663e\u5f0f\u9489\u4f4f&#xff0c;\u5373\u4f7f\u5217\u8868\u9879\u88ab\u9500\u6bc1&#xff0c;\u56fe\u7247\u4ecd\u7136\u7559\u5728\u5185\u5b58\u4e2d\u3002\u8fd9\u5728\u201c\u9700\u8981\u4fdd\u6301\u6eda\u52a8\u4f4d\u7f6e\u548c\u56fe\u7247\u72b6\u6001\u201d\u7684\u573a\u666f\u4e2d\u662f\u5408\u7406\u7684&#xff0c;\u4f46\u5728\u957f\u5217\u8868\u4e2d&#xff0c;\u5b83\u4f1a\u628a\u201c\u6309\u9700\u52a0\u8f7d\u201d\u9000\u5316\u4e3a\u201c\u7d2f\u79ef\u4fdd\u7559\u201d\u3002<\/p>\n<h3>\u4e09\u3001\u7ecf\u5178\u6545\u969c\u6a21\u5f0f\u4e0e\u6df1\u5165\u6848\u4f8b<\/h3>\n<p>\u56db\u79cd\u7ecf\u5178\u6545\u969c\u6a21\u5f0f&#xff0c;\u672c\u8d28\u4e0a\u662f\u201c\u89e3\u7801\u5c3a\u5bf8\u201d\u548c\u201c\u5b58\u6d3b\u6570\u91cf\u201d\u4e24\u4e2a\u7ef4\u5ea6\u7684\u5931\u63a7\u7ec4\u5408&#xff1a;<\/p>\n<p>  #mermaid-svg-Pu7Ffy6GiAyRu3le{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-Pu7Ffy6GiAyRu3le .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-Pu7Ffy6GiAyRu3le .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-Pu7Ffy6GiAyRu3le .error-icon{fill:#552222;}#mermaid-svg-Pu7Ffy6GiAyRu3le .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Pu7Ffy6GiAyRu3le .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-Pu7Ffy6GiAyRu3le .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Pu7Ffy6GiAyRu3le .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Pu7Ffy6GiAyRu3le .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-Pu7Ffy6GiAyRu3le .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Pu7Ffy6GiAyRu3le .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Pu7Ffy6GiAyRu3le .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Pu7Ffy6GiAyRu3le .marker.cross{stroke:#333333;}#mermaid-svg-Pu7Ffy6GiAyRu3le svg{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Pu7Ffy6GiAyRu3le p{margin:0;}#mermaid-svg-Pu7Ffy6GiAyRu3le .label{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;color:#333;}#mermaid-svg-Pu7Ffy6GiAyRu3le .cluster-label text{fill:#333;}#mermaid-svg-Pu7Ffy6GiAyRu3le .cluster-label span{color:#333;}#mermaid-svg-Pu7Ffy6GiAyRu3le .cluster-label span p{background-color:transparent;}#mermaid-svg-Pu7Ffy6GiAyRu3le .label text,#mermaid-svg-Pu7Ffy6GiAyRu3le span{fill:#333;color:#333;}#mermaid-svg-Pu7Ffy6GiAyRu3le .node rect,#mermaid-svg-Pu7Ffy6GiAyRu3le .node circle,#mermaid-svg-Pu7Ffy6GiAyRu3le .node ellipse,#mermaid-svg-Pu7Ffy6GiAyRu3le .node polygon,#mermaid-svg-Pu7Ffy6GiAyRu3le .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Pu7Ffy6GiAyRu3le .rough-node .label text,#mermaid-svg-Pu7Ffy6GiAyRu3le .node .label text,#mermaid-svg-Pu7Ffy6GiAyRu3le .image-shape .label,#mermaid-svg-Pu7Ffy6GiAyRu3le .icon-shape .label{text-anchor:middle;}#mermaid-svg-Pu7Ffy6GiAyRu3le .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-Pu7Ffy6GiAyRu3le .rough-node .label,#mermaid-svg-Pu7Ffy6GiAyRu3le .node .label,#mermaid-svg-Pu7Ffy6GiAyRu3le .image-shape .label,#mermaid-svg-Pu7Ffy6GiAyRu3le .icon-shape .label{text-align:center;}#mermaid-svg-Pu7Ffy6GiAyRu3le .node.clickable{cursor:pointer;}#mermaid-svg-Pu7Ffy6GiAyRu3le .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-Pu7Ffy6GiAyRu3le .arrowheadPath{fill:#333333;}#mermaid-svg-Pu7Ffy6GiAyRu3le .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-Pu7Ffy6GiAyRu3le .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-Pu7Ffy6GiAyRu3le .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Pu7Ffy6GiAyRu3le .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-Pu7Ffy6GiAyRu3le .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Pu7Ffy6GiAyRu3le .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-Pu7Ffy6GiAyRu3le .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-Pu7Ffy6GiAyRu3le .cluster text{fill:#333;}#mermaid-svg-Pu7Ffy6GiAyRu3le .cluster span{color:#333;}#mermaid-svg-Pu7Ffy6GiAyRu3le div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-Pu7Ffy6GiAyRu3le .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-Pu7Ffy6GiAyRu3le rect.text{fill:none;stroke-width:0;}#mermaid-svg-Pu7Ffy6GiAyRu3le .icon-shape,#mermaid-svg-Pu7Ffy6GiAyRu3le .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Pu7Ffy6GiAyRu3le .icon-shape p,#mermaid-svg-Pu7Ffy6GiAyRu3le .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-Pu7Ffy6GiAyRu3le .icon-shape .label rect,#mermaid-svg-Pu7Ffy6GiAyRu3le .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Pu7Ffy6GiAyRu3le .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-Pu7Ffy6GiAyRu3le .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-Pu7Ffy6GiAyRu3le :root{&#8211;mermaid-font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;}<\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u56fe\u7247\u5185\u5b58 &#061; \u89e3\u7801\u5c3a\u5bf8 \u00d7 \u5b58\u6d3b\u6570\u91cf<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u89e3\u7801\u5c3a\u5bf8\u5931\u63a7<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u5b58\u6d3b\u6570\u91cf\u5931\u63a7<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u6a21\u5f0f\u4e00\u5e03\u5c40\u5c3a\u5bf8\u4e0d\u7ea6\u675f\u89e3\u7801\u5c3a\u5bf848\u00d748 \u5934\u50cf\u89e3\u7801 48MB<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u6a21\u5f0f\u4e8c\u52a8\u753b\u56fe\u7247 cacheWidth \u9759\u9ed8\u5931\u6548GIF\/WebP\/APNG \u4e0d\u751f\u6548<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u6a21\u5f0f\u4e09precacheImage \u9489\u4f4f\u5927\u56fe\u7ed5\u8fc7 LRU \u9a71\u9010<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u6a21\u5f0f\u56db\u5927\u56fe\u65e0\u6cd5\u8fdb\u5165\u7f13\u5b58\u6bcf\u6b21\u6eda\u52a8\u91cd\u65b0\u89e3\u7801<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u4fee\u590d&#xff1a;cacheWidth &#061; \u5e03\u5c40 \u00d7 DPR<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u4fee\u590d&#xff1a;\u670d\u52a1\u7aef\u7f29\u7565\u56fe &#043; \u6570\u91cf\u63a7\u5236<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u4fee\u590d&#xff1a;\u4ec5\u9650\u5173\u952e\u5c0f\u56fe\u9884\u52a0\u8f7d<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u4fee\u590d&#xff1a;\u7f29\u5c0f\u89e3\u7801\u5c3a\u5bf8\u653e\u5165\u7f13\u5b58<\/p>\n<p><\/span><\/p>\n<p>\u56db\u79cd\u6a21\u5f0f\u5bf9\u5e94\u56db\u79cd\u4e0d\u540c\u7684\u4fee\u590d\u8def\u5f84&#xff0c;\u4e0d\u80fd\u7528\u4e00\u4e2a\u7edf\u4e00\u7684\u201c\u52a0 cacheWidth\u201d\u89e3\u51b3\u6240\u6709\u95ee\u9898\u3002<\/p>\n<h4>\u6a21\u5f0f\u4e00&#xff1a;12MP \u5934\u50cf\u7684 48MB \u89e3\u7801\u2014\u2014\u5e03\u5c40\u5c3a\u5bf8\u4e0d\u7ea6\u675f\u89e3\u7801\u5c3a\u5bf8<\/h4>\n<p>\u4e00\u4e2a\u804a\u5929\u6216\u793e\u4ea4\u5e94\u7528\u7684\u5934\u50cf\u901a\u5e38\u663e\u793a\u4e3a 48\u00d748 \u6216 64\u00d764 \u7684\u5706\u5f62\u3002\u5f00\u53d1\u8005\u5199\u4e0b Image.network(user.avatarUrl, width: 48, height: 48, fit: BoxFit.cover)&#xff0c;\u89c6\u89c9\u4e0a\u5b8c\u5168\u6b63\u786e&#xff0c;\u4f46\u5185\u5b58\u4e2d\u89e3\u7801\u7684\u662f\u539f\u59cb\u56fe\u7247\u7684\u5168\u5c3a\u5bf8\u50cf\u7d20\u3002\u5982\u679c\u7528\u6237\u7684\u5934\u50cf\u662f\u4ece\u624b\u673a\u76f8\u673a\u4e0a\u4f20\u7684 4000\u00d73000 \u7167\u7247&#xff0c;\u6bcf\u6b21\u89e3\u7801\u90fd\u4f1a\u4ea7\u751f\u7ea6 48MB \u7684 RGBA \u6570\u636e\u3002\u4e00\u4e2a\u6eda\u52a8\u5217\u8868\u4e2d\u6709 20 \u4e2a\u8fd9\u6837\u7684\u5934\u50cf\u8fdb\u5165\u8fc7\u89c6\u53e3&#xff0c;ImageCache \u4e2d\u7684\u7d2f\u79ef\u5185\u5b58\u53ef\u4ee5\u8f7b\u677e\u8fbe\u5230\u6570\u767e MB&#xff0c;\u800c\u5c4f\u5e55\u4e0a\u6bcf\u4e2a\u5934\u50cf\u7684\u89c6\u89c9\u5c3a\u5bf8\u53ea\u6709 48 \u903b\u8f91\u50cf\u7d20\u3002<\/p>\n<p>\u8fd9\u4e2a\u6a21\u5f0f\u7684\u4fee\u590d\u662f\u7cbe\u786e\u7684&#xff1a;\u5728 Image.network \u4e0a\u6dfb\u52a0 cacheWidth \u548c cacheHeight&#xff0c;\u503c\u4e3a\u201c\u5e03\u5c40\u903b\u8f91\u5c3a\u5bf8 \u00d7 devicePixelRatio\u201d\u3002\u5bf9\u4e8e 48 \u903b\u8f91\u50cf\u7d20\u7684\u5934\u50cf&#xff0c;\u5728 DPR \u4e3a 3 \u7684\u8bbe\u5907\u4e0a&#xff0c;cacheWidth: 144 \u5c31\u8db3\u591f\u6e05\u6670&#xff0c;\u89e3\u7801\u5185\u5b58\u4ece 48MB \u964d\u5230\u7ea6 83KB&#xff08;144\u00d7144\u00d74 \u5b57\u8282&#xff09;\u2014\u2014\u51cf\u5c11\u7ea6 580 \u500d\u3002ResizeImage \u662f\u540c\u4e00\u673a\u5236\u5728 ImageProvider \u5c42\u9762\u7684\u8868\u8fbe&#xff1a;\u201cResizeImage \u4e0e\u663e\u5f0f provider \u662f\u540c\u4e00\u673a\u5236&#xff0c;\u5f53\u4f60\u7ec4\u5408 provider \u800c\u4e0d\u662f\u4f7f\u7528 Image \u6784\u9020\u51fd\u6570\u65f6\u5f88\u6709\u7528\u201d\u3002<\/p>\n<h4>\u6a21\u5f0f\u4e8c&#xff1a;\u52a8\u753b\u8d34\u7eb8\u7f51\u683c\u7684 OOM\u2014\u2014cacheWidth \u9759\u9ed8\u5931\u6548<\/h4>\n<p>\u4e00\u4e2a\u793e\u4ea4\u5e94\u7528\u7684\u201c\u8d34\u7eb8\u9009\u62e9\u201d\u7f51\u683c\u4f7f\u7528 GridView.builder \u5c55\u793a 40 \u5f20\u52a8\u753b GIF&#xff0c;\u6bcf\u5f20 GIF \u7684\u6e90\u5c3a\u5bf8\u53ef\u80fd\u662f 500\u00d7500&#xff0c;\u78c1\u76d8\u5927\u5c0f\u4ece\u51e0\u767e KB \u5230\u51e0 MB \u4e0d\u7b49\u3002\u5f00\u53d1\u8005\u7ed9\u6bcf\u4e2a Image.network \u52a0\u4e0a\u4e86 cacheWidth: 200&#xff0c;\u671f\u671b\u5185\u5b58\u53ef\u63a7\u3002\u4f46\u5f15\u64ce\u7684 PR \u660e\u786e\u6307\u51fa&#xff1a;\u201ccacheWidth\/cacheHeight \u548c ResizeImage \u5bf9\u52a8\u753b GIF\u3001WebP \u548c APNG \u56fe\u7247\u6ca1\u6709\u6548\u679c&#xff0c;\u8fd9\u662f\u9ad8\u5185\u5b58\u5360\u7528\u7684\u4e00\u4e2a\u5e38\u89c1\u6765\u6e90&#xff08;\u4f8b\u5982\u52a8\u753b\u8d34\u7eb8\u7684\u7f51\u683c&#xff09;\u201d\u3002<\/p>\n<p>\u5b9e\u9645\u7684\u89e3\u7801\u5185\u5b58\u662f 40 \u00d7 500 \u00d7 500 \u00d7 4 \u5b57\u8282 \u2248 40MB \u7684\u5355\u5e27\u50cf\u7d20\u6570\u636e&#xff1b;\u52a8\u753b\u56fe\u7247\u8fd8\u9700\u8981\u4e3a\u89e3\u7801\u5e27\u7684\u7f13\u5b58\u5206\u914d\u989d\u5916\u5185\u5b58&#xff0c;\u800c\u5e27\u7f13\u5b58\u7684\u4e0a\u9650\u4e0e\u538b\u7f29\u5c3a\u5bf8\u76f8\u5173&#xff08;\u4e00\u4e2a decodedCacheRatioCap \u7684\u8bbe\u8ba1\u610f\u56fe\u662f\u9650\u5236\u201c\u7f13\u5b58\u975e\u5fc5\u8981\u89e3\u7801\u5e27\u201d\u7684\u5185\u5b58&#xff0c;\u4f8b\u5982\u201c400KB \u7684 GIF \u6700\u591a\u5141\u8bb8\u4f7f\u7528 800KB \u7684\u5185\u5b58\u6765\u7f13\u5b58\u89e3\u7801\u5e27\u201d&#xff09;\u3002\u5728\u4e00\u4e2a\u7f51\u683c\u4e2d\u540c\u65f6\u5c55\u793a 20 \u5f20\u53ef\u89c1\u8d34\u7eb8&#xff0c;\u52a0\u4e0a cacheExtent \u9884\u52a0\u8f7d\u7684\u6761\u76ee&#xff0c;\u518d\u52a0\u4e0a\u5e27\u7f13\u5b58&#xff0c;\u5185\u5b58\u5cf0\u503c\u53ef\u4ee5\u8f7b\u677e\u8d85\u8fc7 ImageCache \u7684 100MB \u9ed8\u8ba4\u4e0a\u9650&#xff0c;\u800c cacheWidth \u5bf9\u8fd9\u4e9b\u56fe\u7247\u5b8c\u5168\u6ca1\u6709\u8d77\u5230\u9650\u5236\u4f5c\u7528\u3002<\/p>\n<p>\u8fd9\u4e2a\u6a21\u5f0f\u7684\u4fee\u590d\u65b9\u5411\u4e0d\u662f\u201c\u7ed9 cacheWidth \u6362\u4e00\u4e2a\u503c\u201d&#xff08;\u5b83\u5bf9\u52a8\u753b\u683c\u5f0f\u65e0\u6548&#xff09;&#xff0c;\u800c\u662f&#xff1a;\u5728\u670d\u52a1\u7aef\u63d0\u4f9b\u5df2\u7ecf\u7f29\u5c0f\u5c3a\u5bf8\u7684\u8d34\u7eb8\u7f29\u7565\u56fe&#xff0c;\u8ba9\u5ba2\u6237\u7aef\u89e3\u7801\u7684\u6e90\u5c3a\u5bf8\u672c\u8eab\u5c31\u63a5\u8fd1\u663e\u793a\u5c3a\u5bf8&#xff1b;\u6216\u8005\u5728\u5ba2\u6237\u7aef\u5bf9\u52a8\u753b\u56fe\u7247\u4f7f\u7528\u4e13\u95e8\u7684\u3001\u652f\u6301\u5c3a\u5bf8\u7ea6\u675f\u7684\u89e3\u7801\u8def\u5f84&#xff08;\u5982\u679c\u5f15\u64ce\u7248\u672c\u652f\u6301&#xff09;&#xff0c;\u5e76\u5bf9\u4e0d\u53ef\u7ea6\u675f\u7684\u52a8\u753b\u8d44\u6e90\u91c7\u53d6\u66f4\u4e25\u683c\u7684\u6570\u91cf\u63a7\u5236&#xff08;\u51cf\u5c11\u540c\u65f6\u53ef\u89c1\u7684\u52a8\u753b\u6570\u91cf\u3001\u964d\u4f4e cacheExtent\u3001\u907f\u514d\u5bf9\u52a8\u753b\u56fe\u7247\u4f7f\u7528 precacheImage&#xff09;\u3002<\/p>\n<h4>\u6a21\u5f0f\u4e09&#xff1a;precacheImage \u7684\u201c\u597d\u5fc3\u529e\u574f\u4e8b\u201d\u2014\u2014\u9884\u52a0\u8f7d\u628a\u5927\u56fe\u9489\u5728\u5185\u5b58\u4e2d<\/h4>\n<p>\u4e00\u4e2a\u5f00\u53d1\u8005\u4e3a\u4e86\u6d88\u9664\u9875\u9762\u5207\u6362\u65f6\u7684\u56fe\u7247\u95ea\u70c1&#xff0c;\u5728 didChangeDependencies \u4e2d\u5bf9\u5373\u5c06\u5c55\u793a\u7684\u4e00\u7ec4\u9ad8\u6e05\u5546\u54c1\u56fe\u8c03\u7528\u4e86 precacheImage\u3002precacheImage \u7684\u6587\u6863\u786e\u8ba4\u4e86\u5b83\u7684\u7528\u9014&#xff1a;\u201c\u9884\u53d6\u4e00\u5f20\u56fe\u7247\u5230\u56fe\u7247\u7f13\u5b58\u4e2d\u3002\u8fd4\u56de\u7684 Future \u5728 ImageProvider \u4ea7\u751f\u7684\u7b2c\u4e00\u5f20\u56fe\u7247\u53ef\u7528\u6216\u52a0\u8f7d\u5931\u8d25\u65f6\u5b8c\u6210\u201d\u3002\u4f46\u6587\u6863\u7d27\u63a5\u7740\u7684\u8b66\u544a\u88ab\u5ffd\u7565\u4e86&#xff1a;\u201c\u56fe\u7247\u5c06\u4fdd\u6301\u5728\u5185\u5b58\u4e2d\u81f3\u5c11\u76f4\u5230\u8c03\u7528\u8005\u4ece\u6d41\u4e2d\u79fb\u9664\u76d1\u542c\u8005&#xff0c;\u5373\u4f7f\u5b83\u672c\u6765\u4e0d\u9002\u5408\u7f13\u5b58\u3002\u8c03\u7528\u8005\u5e94\u8c28\u614e\u5c06\u5927\u56fe\u6216\u5927\u91cf\u56fe\u7247\u9489\u5728\u5185\u5b58\u4e2d&#xff0c;\u56e0\u4e3a\u8fd9\u53ef\u80fd\u5bfc\u81f4 OOM\u201d\u3002<\/p>\n<p>\u5982\u679c\u8fd9\u7ec4\u5546\u54c1\u56fe\u662f 2000\u00d72000 \u7684\u9ad8\u6e05\u56fe&#xff0c;\u6bcf\u5f20\u89e3\u7801\u7ea6 16MB&#xff0c;\u9884\u52a0\u8f7d 10 \u5f20\u5c31\u662f 160MB&#xff0c;\u5df2\u7ecf\u8d85\u8fc7\u4e86 ImageCache \u7684\u9ed8\u8ba4 100MB \u4e0a\u9650\u3002\u7531\u4e8e precacheImage \u5728 Future \u5b8c\u6210\u4e4b\u524d\u4f1a\u4fdd\u6301\u4e00\u4e2a\u76d1\u542c\u8005&#xff0c;\u8fd9\u4e9b\u56fe\u7247\u5728\u9884\u52a0\u8f7d\u9636\u6bb5\u662f live \u7684&#xff0c;LRU \u65e0\u6cd5\u9a71\u9010\u5b83\u4eec\u3002\u5982\u679c\u9884\u52a0\u8f7d\u7684\u56fe\u7247\u6570\u91cf\u7ee7\u7eed\u589e\u957f&#xff0c;\u6216\u8005\u7528\u6237\u5728\u9884\u52a0\u8f7d\u5b8c\u6210\u4e4b\u524d\u5c31\u79bb\u5f00\u4e86\u9875\u9762&#xff0c;\u5185\u5b58\u5cf0\u503c\u4f1a\u663e\u8457\u8d85\u8fc7\u201c\u6b63\u5e38\u4f7f\u7528\u201d\u65f6\u7684\u6c34\u5e73\u3002precacheImage \u7684\u6b63\u786e\u4f7f\u7528\u8fb9\u754c\u662f&#xff1a;\u53ea\u5bf9\u5173\u952e\u7684\u5c0f\u5c3a\u5bf8\u56fe\u7247&#xff08;\u4f8b\u5982\u542f\u52a8\u5c4f logo\u3001\u5c11\u91cf\u9996\u5c4f\u56fe\u6807&#xff09;\u4f7f\u7528&#xff0c;\u5e76\u4e14\u914d\u5408 cacheWidth\/cacheHeight \u9650\u5236\u89e3\u7801\u5c3a\u5bf8&#xff1b;\u4e0d\u8981\u5bf9\u9ad8\u6e05\u5927\u56fe\u6216\u5927\u91cf\u56fe\u7247\u6279\u91cf\u8c03\u7528\u5b83\u3002<\/p>\n<h4>\u6a21\u5f0f\u56db&#xff1a;ImageCache \u7684\u201c\u9a71\u9010\u6296\u52a8\u201d\u2014\u2014\u5927\u56fe\u65e0\u6cd5\u8fdb\u5165\u7f13\u5b58&#xff0c;\u6bcf\u6b21\u6eda\u52a8\u90fd\u91cd\u65b0\u89e3\u7801<\/h4>\n<p>putIfAbsent \u7684\u6587\u6863\u6709\u4e00\u6761\u5bb9\u6613\u88ab\u5ffd\u7565\u7684\u89c4\u5219&#xff1a;\u201c\u5927\u4e8e maximumSizeBytes \u7684\u56fe\u7247\u4e0d\u4f1a\u88ab\u7f13\u5b58&#xff0c;\u4e5f\u4e0d\u4f1a\u5bfc\u81f4\u7f13\u5b58\u4e2d\u7684\u5176\u4ed6\u56fe\u7247\u88ab\u9a71\u9010\u201d\u3002\u5982\u679c\u4e00\u5f20\u56fe\u7247\u7684\u89e3\u7801\u540e\u5b57\u8282\u6570\u8d85\u8fc7 100MB&#xff08;\u4f8b\u5982\u4e00\u5f20 6000\u00d76000 \u7684\u56fe\u7247&#xff0c;\u89e3\u7801\u540e\u7ea6 137MB&#xff09;&#xff0c;\u5b83\u6c38\u8fdc\u4e0d\u4f1a\u8fdb\u5165 ImageCache\u3002\u6bcf\u6b21\u5b83\u51fa\u73b0\u5728\u89c6\u53e3\u4e2d&#xff0c;\u90fd\u9700\u8981\u91cd\u65b0\u4ece\u7f51\u7edc\u6216\u78c1\u76d8\u52a0\u8f7d\u3001\u91cd\u65b0\u89e3\u7801&#xff1b;\u6bcf\u6b21\u5b83\u79bb\u5f00\u89c6\u53e3&#xff0c;\u5185\u5b58\u88ab\u91ca\u653e\u3002\u5728\u5feb\u901f\u6eda\u52a8\u4e2d&#xff0c;\u8fd9\u4f1a\u8868\u73b0\u4e3a\u9891\u7e41\u7684 CPU \u5cf0\u503c\u548c\u5185\u5b58\u7684\u952f\u9f7f\u72b6\u6ce2\u52a8&#xff0c;\u800c\u4e0d\u662f\u7a33\u5b9a\u589e\u957f\u3002\u5982\u679c\u591a\u5f20\u8fd9\u6837\u7684\u56fe\u7247\u540c\u65f6\u53ef\u89c1&#xff0c;\u5b83\u4eec\u90fd\u662f live \u7684&#xff0c;\u5408\u8ba1\u5185\u5b58\u53ef\u80fd\u76f4\u63a5\u89e6\u53d1 OOM&#xff0c;\u800c ImageCache \u7684 100MB \u4e0a\u9650\u5bf9\u8fd9\u4e9b\u56fe\u7247\u4ece\u672a\u751f\u6548\u3002<\/p>\n<p>Flutter \u5728 1.17 \u4e2d\u5bf9\u6b64\u505a\u4e86\u4e00\u4e2a\u91cd\u8981\u7684\u53d8\u66f4&#xff1a;\u201cImageCache \u7684 maxByteSize \u4e0d\u518d\u81ea\u52a8\u589e\u5927\u4ee5\u5bb9\u7eb3\u5927\u56fe\u201d\u3002\u5728\u6b64\u4e4b\u524d&#xff0c;\u201c\u5f53\u52a0\u8f7d\u5b57\u8282\u6570\u5927\u4e8e ImageCache \u7684 maxByteSize \u7684\u56fe\u7247\u65f6&#xff0c;Flutter \u4f1a\u6c38\u4e45\u589e\u5927 maxByteSize \u7684\u503c\u6765\u5bb9\u7eb3\u5b83\u4eec\u201d&#xff0c;\u8fd9\u201c\u6709\u65f6\u5bfc\u81f4 maxByteSize \u81a8\u80c0&#xff0c;\u4f7f\u5185\u5b58\u53d7\u9650\u7684\u7cfb\u7edf\u66f4\u96be\u5de5\u4f5c\u201d\u3002\u53d8\u66f4\u540e\u7684\u903b\u8f91\u662f&#xff1a;\u5927\u56fe\u5982\u679c\u65e0\u6cd5\u653e\u5165\u7f13\u5b58&#xff0c;\u5c31\u4e0d\u7f13\u5b58&#xff0c;\u800c\u4e0d\u662f\u8ba9\u7f13\u5b58\u4e3a\u4e86\u5bb9\u7eb3\u5b83\u800c\u81a8\u80c0\u3002\u8fd9\u4e2a\u8bbe\u8ba1\u7684\u610f\u56fe\u662f\u4fdd\u62a4\u5185\u5b58&#xff0c;\u4f46\u5b83\u5bf9\u5927\u56fe\u7684\u76f4\u63a5\u540e\u679c\u5c31\u662f\u6a21\u5f0f\u56db\u63cf\u8ff0\u7684\u201c\u6bcf\u6b21\u91cd\u65b0\u89e3\u7801\u201d\u3002<\/p>\n<p>\u8fd9\u4e2a\u6a21\u5f0f\u7684\u4fee\u590d\u53ea\u6709\u4e00\u6761\u6839\u672c\u8def\u5f84&#xff1a;\u7f29\u5c0f\u89e3\u7801\u5c3a\u5bf8&#xff0c;\u8ba9\u56fe\u7247\u80fd\u591f\u8212\u9002\u5730\u653e\u5165\u7f13\u5b58\u3002cacheWidth\/cacheHeight \u6216 ResizeImage \u5728\u8fd9\u91cc\u4e0d\u662f\u201c\u53ef\u9009\u4f18\u5316\u201d&#xff0c;\u800c\u662f\u8ba9\u7f13\u5b58\u673a\u5236\u80fd\u591f\u6b63\u5e38\u5de5\u4f5c\u7684\u524d\u63d0\u3002\u5982\u679c\u6e90\u56fe\u786e\u5b9e\u9700\u8981\u4ee5\u5168\u5206\u8fa8\u7387\u5c55\u793a&#xff08;\u4f8b\u5982\u4e00\u4e2a\u53ef\u7f29\u653e\u67e5\u770b\u7684\u56fe\u7247\u67e5\u770b\u5668&#xff09;&#xff0c;\u90a3\u4e48\u5e94\u8be5\u63a5\u53d7\u201c\u8fd9\u5f20\u56fe\u7247\u4e0d\u8fdb\u5165\u7f13\u5b58\u201d\u7684\u4e8b\u5b9e&#xff0c;\u5e76\u4e3a\u5b83\u8bbe\u8ba1\u72ec\u7acb\u7684\u751f\u547d\u5468\u671f\u7ba1\u7406&#xff08;\u5728\u9000\u51fa\u67e5\u770b\u5668\u65f6\u663e\u5f0f evict&#xff09;&#xff0c;\u800c\u4e0d\u662f\u4f9d\u8d56 ImageCache \u7684\u81ea\u52a8\u884c\u4e3a\u3002<\/p>\n<h3>\u56db\u3001\u7cfb\u7edf\u6027\u6392\u67e5\u65b9\u6cd5\u8bba<\/h3>\n<h4>\u7b2c\u4e00\u6b65&#xff1a;\u5148\u8ba1\u7b97\u201c\u7406\u8bba\u89e3\u7801\u5185\u5b58\u201d&#xff0c;\u800c\u4e0d\u662f\u731c\u6d4b<\/h4>\n<p>\u5728\u6253\u5f00 DevTools \u4e4b\u524d&#xff0c;\u5148\u5bf9\u6000\u7591\u7684\u56fe\u7247\u505a\u4e00\u6b21\u7b97\u672f\u3002\u5bf9\u6bcf\u4e00\u5f20\u56fe\u7247&#xff0c;\u627e\u5230\u5b83\u7684\u6e90\u50cf\u7d20\u5c3a\u5bf8&#xff08;\u4e0d\u662f\u6587\u4ef6\u5927\u5c0f&#xff0c;\u4e0d\u662f\u5e03\u5c40\u5c3a\u5bf8&#xff09;&#xff0c;\u7136\u540e\u8ba1\u7b97 \u5bbd\u5ea6 \u00d7 \u9ad8\u5ea6 \u00d7 4 \u5b57\u8282\u3002\u4e00\u5f20 4000\u00d73000 \u7684\u56fe\u7247\u662f 48MB&#xff1b;\u4e00\u5f20 1920\u00d71080 \u7684\u56fe\u7247\u662f 8.3MB&#xff1b;\u4e00\u5f20 500\u00d7500 \u7684\u56fe\u7247\u662f 1MB\u3002\u628a\u8fd9\u4e2a\u6570\u5b57\u4e58\u4ee5\u201c\u540c\u65f6\u53ef\u89c1\u7684\u56fe\u7247\u6570\u91cf &#043; cacheExtent \u9884\u52a0\u8f7d\u7684\u6570\u91cf &#043; \u53ef\u80fd\u88ab precacheImage \u9489\u4f4f\u7684\u6570\u91cf\u201d\u3002\u5982\u679c\u4e58\u79ef\u63a5\u8fd1\u6216\u8d85\u8fc7\u8bbe\u5907\u53ef\u7528\u5185\u5b58\u7684\u5408\u7406\u9608\u503c&#xff08;\u5728\u4f4e\u7aef Android \u8bbe\u5907\u4e0a&#xff0c;\u4e00\u4e2a Flutter \u5e94\u7528\u7684\u56fe\u7247\u5185\u5b58\u9884\u7b97\u901a\u5e38\u5728 100\u2013200MB \u91cf\u7ea7&#xff09;&#xff0c;OOM \u7684\u98ce\u9669\u5c31\u662f\u53ef\u8ba1\u7b97\u7684&#xff0c;\u800c\u4e0d\u662f\u201c\u5076\u53d1\u201d\u7684\u3002<\/p>\n<p>flutter \u793e\u533a\u7684\u4e00\u4e9b\u5de5\u5177&#xff08;\u5982 buoy \u7684 estDecodedBytes&#xff09;\u63d0\u4f9b\u4e86 RGBA8888 \u89e3\u7801\u5185\u5b58\u7684\u4f30\u7b97&#xff0c;\u5176\u6587\u6863\u660e\u786e\u8bf4\u660e\u8fd9\u662f\u201c\u89e3\u7801\u4f4d\u56fe\u5185\u5b58\u201d&#xff0c;\u4e0d\u5305\u542b\u5168\u5c40\u56fe\u7247\u7f13\u5b58\u3001\u7f16\u7801\u5b57\u8282\u548c GPU \u5f00\u9500\u3002\u8fd9\u4e2a\u4f30\u7b97\u662f\u4e00\u4e2a\u6709\u7528\u7684\u4e0b\u754c&#xff0c;\u771f\u5b9e\u5cf0\u503c\u4f1a\u66f4\u9ad8\u3002<\/p>\n<h4>\u7b2c\u4e8c\u6b65&#xff1a;\u5728 DevTools \u7684 Memory \u89c6\u56fe\u4e2d\u533a\u5206\u201c\u56fe\u7247\u5185\u5b58\u201d\u4e0e\u201c\u5176\u4ed6\u5185\u5b58\u201d<\/h4>\n<p>DevTools \u7684 Memory \u89c6\u56fe\u53ef\u4ee5\u6309\u7c7b\u578b\u8fc7\u6ee4&#xff0c;\u4f46\u56fe\u7247\u5185\u5b58\u7684\u5f52\u56e0\u9700\u8981\u4e00\u4e9b\u6280\u5de7\u3002\u4e00\u4e2a\u5b9e\u7528\u7684\u65b9\u6cd5\u662f&#xff1a;\u5728 Profile \u6a21\u5f0f\u4e0b\u8fd0\u884c&#xff0c;\u6eda\u52a8\u5230\u6000\u7591\u7684\u9875\u9762&#xff0c;\u8bb0\u5f55\u5185\u5b58\u5feb\u7167&#xff1b;\u7136\u540e\u6eda\u52a8\u79bb\u5f00\u8be5\u9875\u9762&#xff0c;\u89e6\u53d1 GC&#xff0c;\u518d\u8bb0\u5f55\u4e00\u6b21\u3002\u5982\u679c\u5185\u5b58\u6ca1\u6709\u663e\u8457\u4e0b\u964d&#xff0c;\u8bf4\u660e\u56fe\u7247\u4ecd\u7136\u88ab live \u5f15\u7528\u6216\u7f13\u5b58\u6301\u6709\u3002\u7ed3\u5408 ImageCache \u7684\u72b6\u6001&#xff08;imageCache.currentSizeBytes\u3001imageCache.liveImageCount&#xff09;&#xff0c;\u53ef\u4ee5\u533a\u5206\u201c\u7f13\u5b58\u4e2d\u7684\u56fe\u7247\u201d\u548c\u201clive \u7684\u56fe\u7247\u201d&#xff1a;liveImageCount \u9ad8\u800c currentSizeBytes \u4f4e&#xff0c;\u610f\u5473\u7740\u5927\u91cf\u56fe\u7247\u6b63\u5728\u88ab\u76d1\u542c\u6216\u9489\u4f4f&#xff0c;\u4f46\u672a\u8fdb\u5165 LRU \u7ba1\u7406\u3002<\/p>\n<p>ImageCache \u7684 clear() \u548c clearLiveImages() \u53ef\u4ee5\u5728\u8c03\u8bd5\u4e2d\u4f5c\u4e3a\u8bca\u65ad\u624b\u6bb5&#xff1a;\u5982\u679c\u8c03\u7528 clear() \u540e\u5185\u5b58\u4e0b\u964d&#xff0c;\u8bf4\u660e\u95ee\u9898\u5728\u7f13\u5b58\u4e2d\u7684\u975e live \u6761\u76ee&#xff1b;\u5982\u679c\u53ea\u6709\u8c03\u7528 clearLiveImages() \u540e\u624d\u4e0b\u964d&#xff0c;\u8bf4\u660e\u6709\u56fe\u7247\u88ab precacheImage \u6216 ImageStreamCompleterHandle \u9489\u4f4f&#xff0c;\u9700\u8981\u68c0\u67e5\u9884\u52a0\u8f7d\u548c\u624b\u52a8\u6301\u6709\u7684\u5f15\u7528\u3002<\/p>\n<h4>\u7b2c\u4e09\u6b65&#xff1a;\u68c0\u67e5\u6bcf\u4e00\u5f20 Image \u7684 cacheWidth\/cacheHeight \u662f\u5426\u4e0e\u5e03\u5c40\u5c3a\u5bf8\u548c DPR \u5339\u914d<\/h4>\n<p>\u5bf9\u4ee3\u7801\u5e93\u4e2d\u7684\u6bcf\u4e00\u5904 Image&#xff08;network\u3001asset\u3001file\u3001memory&#xff09;&#xff0c;\u68c0\u67e5\u5b83\u662f\u5426\u8bbe\u7f6e\u4e86 cacheWidth\/cacheHeight\u3002\u5982\u679c\u8bbe\u7f6e\u4e86&#xff0c;\u68c0\u67e5\u5b83\u7684\u503c\u662f\u5426\u7b49\u4e8e\u201c\u5e03\u5c40\u903b\u8f91\u5c3a\u5bf8 \u00d7 devicePixelRatio\u201d\u3002\u4e00\u4e2a\u5e38\u89c1\u7684\u9519\u8bef\u662f\u53ea\u8bbe\u7f6e\u4e86 width\/height&#xff08;\u5e03\u5c40&#xff09;&#xff0c;\u800c\u6ca1\u6709\u8bbe\u7f6e cacheWidth\/cacheHeight&#xff08;\u89e3\u7801&#xff09;&#xff1b;\u53e6\u4e00\u4e2a\u5e38\u89c1\u9519\u8bef\u662f cacheWidth \u7684\u503c\u8fdc\u5927\u4e8e\u5e03\u5c40\u5c3a\u5bf8 \u00d7 DPR&#xff08;\u4f8b\u5982\u5728 48 \u903b\u8f91\u50cf\u7d20\u7684\u5934\u50cf\u4e0a\u8bbe\u7f6e cacheWidth: 500&#xff09;&#xff0c;\u8fd9\u867d\u7136\u6bd4\u4e0d\u8bbe\u597d&#xff0c;\u4f46\u4ecd\u7136\u6d6a\u8d39\u4e86\u5185\u5b58\u3002\u5bf9\u4e8e\u6ca1\u6709\u8bbe\u7f6e cacheWidth\/cacheHeight \u7684 Image&#xff0c;\u95ee&#xff1a;\u8fd9\u5f20\u56fe\u7247\u7684\u6e90\u5c3a\u5bf8\u662f\u5426\u53ef\u80fd\u8fdc\u5927\u4e8e\u663e\u793a\u5c3a\u5bf8&#xff1f; \u5982\u679c\u7b54\u6848\u662f\u201c\u53ef\u80fd\u201d\u6216\u201c\u4e0d\u77e5\u9053\u201d&#xff0c;\u5b83\u5c31\u662f\u4e00\u4e2a\u9700\u8981\u4fee\u590d\u7684\u5019\u9009\u3002<\/p>\n<h4>\u7b2c\u56db\u6b65&#xff1a;\u8bc6\u522b\u52a8\u753b\u56fe\u7247\u5e76\u786e\u8ba4\u5c3a\u5bf8\u53c2\u6570\u662f\u5426\u6709\u6548<\/h4>\n<p>\u5bf9\u6bcf\u4e00\u5f20 Image&#xff0c;\u786e\u8ba4\u6e90\u683c\u5f0f\u662f\u5426\u4e3a GIF\u3001WebP \u6216 APNG\u3002\u5982\u679c\u662f&#xff0c;cacheWidth\/cacheHeight \u548c ResizeImage \u5728\u8fd9\u4e9b\u683c\u5f0f\u4e0a\u4e0d\u751f\u6548&#xff08;\u6839\u636e\u5f53\u524d\u5f15\u64ce\u7684\u5b9e\u73b0&#xff09;\u3002\u6392\u67e5\u65f6\u9700\u8981\u68c0\u67e5&#xff1a;\u8fd9\u4e9b\u52a8\u753b\u56fe\u7247\u7684\u6e90\u5c3a\u5bf8\u662f\u5426\u63a5\u8fd1\u663e\u793a\u5c3a\u5bf8&#xff1f; \u5982\u679c\u6e90\u5c3a\u5bf8\u8fdc\u5927\u4e8e\u663e\u793a\u5c3a\u5bf8&#xff0c;\u4e14\u65e0\u6cd5\u5728\u5ba2\u6237\u7aef\u901a\u8fc7\u89e3\u7801\u53c2\u6570\u7ea6\u675f&#xff0c;\u90a3\u4e48\u670d\u52a1\u7aef\u63d0\u4f9b\u7f29\u5c0f\u5c3a\u5bf8\u7684\u7f29\u7565\u56fe\u662f\u552f\u4e00\u7684\u6839\u672c\u89e3\u51b3\u65b9\u6848\u3002\u6b64\u5916&#xff0c;\u68c0\u67e5\u52a8\u753b\u56fe\u7247\u7684\u6570\u91cf\u548c cacheExtent&#xff1a;\u5728\u52a8\u753b\u8d34\u7eb8\u7f51\u683c\u4e2d&#xff0c;\u51cf\u5c11\u9884\u52a0\u8f7d\u8303\u56f4\u3001\u907f\u514d\u6279\u91cf precacheImage&#xff0c;\u53ef\u4ee5\u663e\u8457\u964d\u4f4e\u5cf0\u503c\u5185\u5b58\u3002<\/p>\n<h4>\u7b2c\u4e94\u6b65&#xff1a;\u533a\u5206\u201c\u6cc4\u6f0f\u201d\u4e0e\u201c\u7f13\u5b58\u201d\u4e0e\u201clive \u9489\u4f4f\u201d<\/h4>\n<p>\u56fe\u7247\u5185\u5b58\u201c\u4e0d\u91ca\u653e\u201d\u53ef\u80fd\u6709\u4e09\u79cd\u4e0d\u540c\u7684\u539f\u56e0&#xff0c;\u4fee\u590d\u65b9\u5411\u5b8c\u5168\u4e0d\u540c\u3002\u7f13\u5b58&#xff1a;\u56fe\u7247\u5728 ImageCache \u7684 LRU \u4e2d&#xff0c;\u7b49\u5f85\u88ab\u9a71\u9010\u6216\u590d\u7528&#xff1b;\u8fd9\u662f\u6b63\u5e38\u884c\u4e3a&#xff0c;\u5185\u5b58\u4f1a\u968f\u6eda\u52a8\u548c\u7f13\u5b58\u538b\u529b\u6ce2\u52a8&#xff0c;\u6700\u7ec8\u53d7 maximumSizeBytes \u7ea6\u675f\u3002live \u9489\u4f4f&#xff1a;\u56fe\u7247\u88ab precacheImage\u3001ImageStreamCompleterHandle \u6216\u4e00\u4e2a\u672a\u79fb\u9664\u7684\u76d1\u542c\u8005\u6301\u6709&#xff1b;\u8fd9\u662f\u771f\u6b63\u7684\u201c\u4e0d\u91ca\u653e\u201d&#xff0c;\u9700\u8981\u68c0\u67e5\u9884\u52a0\u8f7d\u548c\u624b\u52a8\u76d1\u542c\u7684\u751f\u547d\u5468\u671f\u3002Widget \u6cc4\u6f0f&#xff1a;Image Widget \u672c\u8eab\u88ab\u4e00\u4e2a\u672a\u91ca\u653e\u7684 State \u6216\u5168\u5c40\u5f15\u7528\u6301\u6709&#xff0c;\u5bfc\u81f4\u5b83\u7684\u76d1\u542c\u8005\u6c38\u8fdc\u5b58\u5728&#xff1b;\u8fd9\u9700\u8981\u7528 DevTools \u7684 Allocation Tracker \u6216 leak_tracker \u6765\u5b9a\u4f4d\u3002\u4e09\u8005\u7684\u6392\u67e5\u8def\u5f84\u4e0d\u540c&#xff1a;\u7f13\u5b58\u7528 ImageCache \u72b6\u6001\u68c0\u67e5&#xff0c;live \u9489\u4f4f\u7528 clearLiveImages \u8bca\u65ad&#xff0c;Widget \u6cc4\u6f0f\u7528\u5f15\u7528\u94fe\u5206\u6790\u3002<\/p>\n<h3>\u4e94\u3001\u4fee\u590d\u65b9\u6848&#xff1a;\u6309\u201c\u89e3\u7801\u5c3a\u5bf8\u201d\u548c\u201c\u5b58\u6d3b\u6570\u91cf\u201d\u4e24\u4e2a\u7ef4\u5ea6\u5206\u5c42<\/h3>\n<p>\u4fee\u590d\u65b9\u6848\u6309\u201c\u89e3\u7801\u5c3a\u5bf8\u201d\u548c\u201c\u5b58\u6d3b\u6570\u91cf\u201d\u4e24\u4e2a\u7ef4\u5ea6\u5206\u5c42&#xff0c;\u51b3\u7b56\u6d41\u7a0b\u5982\u4e0b&#xff1a;<\/p>\n<p>  #mermaid-svg-oIPM1uC0bousjbU9{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-oIPM1uC0bousjbU9 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-oIPM1uC0bousjbU9 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-oIPM1uC0bousjbU9 .error-icon{fill:#552222;}#mermaid-svg-oIPM1uC0bousjbU9 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-oIPM1uC0bousjbU9 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-oIPM1uC0bousjbU9 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-oIPM1uC0bousjbU9 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-oIPM1uC0bousjbU9 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-oIPM1uC0bousjbU9 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-oIPM1uC0bousjbU9 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-oIPM1uC0bousjbU9 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-oIPM1uC0bousjbU9 .marker.cross{stroke:#333333;}#mermaid-svg-oIPM1uC0bousjbU9 svg{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-oIPM1uC0bousjbU9 p{margin:0;}#mermaid-svg-oIPM1uC0bousjbU9 .label{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;color:#333;}#mermaid-svg-oIPM1uC0bousjbU9 .cluster-label text{fill:#333;}#mermaid-svg-oIPM1uC0bousjbU9 .cluster-label span{color:#333;}#mermaid-svg-oIPM1uC0bousjbU9 .cluster-label span p{background-color:transparent;}#mermaid-svg-oIPM1uC0bousjbU9 .label text,#mermaid-svg-oIPM1uC0bousjbU9 span{fill:#333;color:#333;}#mermaid-svg-oIPM1uC0bousjbU9 .node rect,#mermaid-svg-oIPM1uC0bousjbU9 .node circle,#mermaid-svg-oIPM1uC0bousjbU9 .node ellipse,#mermaid-svg-oIPM1uC0bousjbU9 .node polygon,#mermaid-svg-oIPM1uC0bousjbU9 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-oIPM1uC0bousjbU9 .rough-node .label text,#mermaid-svg-oIPM1uC0bousjbU9 .node .label text,#mermaid-svg-oIPM1uC0bousjbU9 .image-shape .label,#mermaid-svg-oIPM1uC0bousjbU9 .icon-shape .label{text-anchor:middle;}#mermaid-svg-oIPM1uC0bousjbU9 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-oIPM1uC0bousjbU9 .rough-node .label,#mermaid-svg-oIPM1uC0bousjbU9 .node .label,#mermaid-svg-oIPM1uC0bousjbU9 .image-shape .label,#mermaid-svg-oIPM1uC0bousjbU9 .icon-shape .label{text-align:center;}#mermaid-svg-oIPM1uC0bousjbU9 .node.clickable{cursor:pointer;}#mermaid-svg-oIPM1uC0bousjbU9 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-oIPM1uC0bousjbU9 .arrowheadPath{fill:#333333;}#mermaid-svg-oIPM1uC0bousjbU9 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-oIPM1uC0bousjbU9 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-oIPM1uC0bousjbU9 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-oIPM1uC0bousjbU9 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-oIPM1uC0bousjbU9 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-oIPM1uC0bousjbU9 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-oIPM1uC0bousjbU9 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-oIPM1uC0bousjbU9 .cluster text{fill:#333;}#mermaid-svg-oIPM1uC0bousjbU9 .cluster span{color:#333;}#mermaid-svg-oIPM1uC0bousjbU9 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-oIPM1uC0bousjbU9 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-oIPM1uC0bousjbU9 rect.text{fill:none;stroke-width:0;}#mermaid-svg-oIPM1uC0bousjbU9 .icon-shape,#mermaid-svg-oIPM1uC0bousjbU9 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-oIPM1uC0bousjbU9 .icon-shape p,#mermaid-svg-oIPM1uC0bousjbU9 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-oIPM1uC0bousjbU9 .icon-shape .label rect,#mermaid-svg-oIPM1uC0bousjbU9 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-oIPM1uC0bousjbU9 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-oIPM1uC0bousjbU9 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-oIPM1uC0bousjbU9 :root{&#8211;mermaid-font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;}<\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u662f<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u5426&#xff08;\u52a8\u753b&#xff09;<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u662f<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u5426&#xff08;ImageProvider&#xff09;<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u662f<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u5426<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u662f<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u5426<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u9047\u5230\u56fe\u7247\u5185\u5b58\u95ee\u9898<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u56fe\u7247\u662f\u9759\u6001\u683c\u5f0f&#xff1f;JPEG\/PNG\/BMP<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u662f\u5426\u76f4\u63a5\u4f7f\u7528Image \u6784\u9020\u51fd\u6570&#xff1f;<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u7b2c\u4e94\u5c42&#xff1a;\u6e90\u5c3a\u5bf8\u7ea6\u675f\u670d\u52a1\u7aef\u7f29\u7565\u56fe &#043; \u6570\u91cf\u63a7\u5236<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u7b2c\u4e00\u5c42&#xff1a;cacheWidth\/cacheHeight\u89e3\u7801\u5c3a\u5bf8 &#061; \u5e03\u5c40 \u00d7 DPR<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u7b2c\u4e8c\u5c42&#xff1a;ResizeImage \u5305\u88f9\u6ce8\u610f key \u7a33\u5b9a\u6027<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u662f\u5426\u5728\u957f\u5217\u8868\u4e2d&#xff1f;<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u7b2c\u4e09\u5c42&#xff1a;\u63a7\u5236 cacheExtent \u548c keepAlive<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u662f\u5426\u9700\u8981\u9884\u52a0\u8f7d&#xff1f;<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u7b2c\u56db\u5c42&#xff1a;precacheImage \u7eaa\u5f8b\u4ec5\u9650\u5173\u952e\u5c0f\u56fe \u2264 2-3 \u5f20<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u7b2c\u516d\u5c42&#xff1a;\u5fc5\u8981\u65f6\u8c03\u6574 ImageCache \u9884\u7b97\u4f46\u4e0d\u8981\u5f53\u4f5c\u4fee\u590d<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u9a8c\u8bc1&#xff1a;\u4f4e\u7aef\u771f\u673a &#043; Profile \u6a21\u5f0f<\/p>\n<p><\/span><\/p>\n<p>\u5206\u5c42\u539f\u5219&#xff1a; \u5148\u9650\u5236\u89e3\u7801\u5c3a\u5bf8&#xff08;\u7b2c\u4e00\u3001\u4e8c\u3001\u4e94\u5c42&#xff09;&#xff0c;\u518d\u63a7\u5236\u5b58\u6d3b\u6570\u91cf&#xff08;\u7b2c\u4e09\u3001\u56db\u5c42&#xff09;&#xff0c;\u6700\u540e\u624d\u8003\u8651\u8c03\u6574\u7f13\u5b58\u9884\u7b97&#xff08;\u7b2c\u516d\u5c42&#xff09;\u3002<\/p>\n<h4>\u7b2c\u4e00\u5c42&#xff1a;\u5bf9\u9759\u6001\u56fe\u7247&#xff0c;\u7528 cacheWidth\/cacheHeight \u5c06\u89e3\u7801\u5c3a\u5bf8\u9650\u5236\u5230\u663e\u793a\u5c3a\u5bf8<\/h4>\n<p>\u8fd9\u662f\u6536\u76ca\u6700\u76f4\u63a5\u3001\u9002\u7528\u9762\u6700\u5e7f\u7684\u4fee\u590d\u3002\u5bf9\u6bcf\u4e00\u5f20\u6e90\u5c3a\u5bf8\u53ef\u80fd\u5927\u4e8e\u663e\u793a\u5c3a\u5bf8\u7684\u9759\u6001\u56fe\u7247&#xff08;JPEG\u3001PNG\u3001BMP&#xff09;&#xff0c;\u5728 Image.network\/Image.asset\/Image.file \u4e0a\u6dfb\u52a0 cacheWidth \u548c cacheHeight&#xff0c;\u503c\u4e3a\u201c\u5e03\u5c40\u903b\u8f91\u5c3a\u5bf8 \u00d7 devicePixelRatio\u201d\u3002\u5982\u679c\u53ea\u5173\u5fc3\u4e00\u4e2a\u7ef4\u5ea6&#xff08;\u4f8b\u5982\u5bbd\u5ea6\u53d7\u9650\u3001\u9ad8\u5ea6\u6309\u6bd4\u4f8b&#xff09;&#xff0c;\u53ef\u4ee5\u53ea\u6307\u5b9a cacheWidth&#xff0c;\u5f15\u64ce\u4f1a\u6309\u539f\u59cb\u5bbd\u9ad8\u6bd4\u7f29\u653e\u53e6\u4e00\u4e2a\u7ef4\u5ea6\u3002<\/p>\n<p>\u6362\u7b97\u516c\u5f0f\u662f&#xff1a;<\/p>\n<p><span class=\"token keyword\">final<\/span> dpr <span class=\"token operator\">&#061;<\/span> <span class=\"token class-name\">MediaQuery<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">devicePixelRatioOf<\/span><span class=\"token punctuation\">(<\/span>context<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token class-name\">Image<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">network<\/span><span class=\"token punctuation\">(<\/span><br \/>\n  url<span class=\"token punctuation\">,<\/span><br \/>\n  width<span class=\"token punctuation\">:<\/span> <span class=\"token number\">200<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token comment\">\/\/ \u5e03\u5c40&#xff1a;\u903b\u8f91\u50cf\u7d20<\/span><br \/>\n  cacheWidth<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token number\">200<\/span> <span class=\"token operator\">*<\/span> dpr<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">round<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token comment\">\/\/ \u89e3\u7801&#xff1a;\u7269\u7406\u50cf\u7d20<\/span><br \/>\n  fit<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">BoxFit<\/span><span class=\"token punctuation\">.<\/span>cover<span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><\/p>\n<p>\u4e00\u4e2a\u9700\u8981\u6ce8\u610f\u7684\u8fb9\u754c\u662f allowUpscaling&#xff1a;instantiateImageCodecFromBuffer \u7684\u6587\u6863\u8bf4\u660e&#xff0c;\u9ed8\u8ba4\u60c5\u51b5\u4e0b cacheWidth\/cacheHeight \u201c\u88ab\u94b3\u5236\u5230\u539f\u59cb\u56fe\u7247\u7684\u56fa\u6709\u5bbd\u5ea6\u548c\u9ad8\u5ea6\u201d&#xff0c;\u4ee5\u907f\u514d\u201c\u4e0d\u5fc5\u8981\u7684\u5185\u5b58\u4f7f\u7528\u201d&#xff1b;\u4e5f\u5c31\u662f\u8bf4&#xff0c;\u5982\u679c\u4f20\u5165\u7684 cacheWidth \u5927\u4e8e\u6e90\u56fe\u5bbd\u5ea6&#xff0c;\u89e3\u7801\u5c3a\u5bf8\u4e0d\u4f1a\u8d85\u8fc7\u6e90\u56fe&#xff0c;\u4e0d\u4f1a\u4ea7\u751f\u653e\u5927\u540e\u7684\u6a21\u7cca\u3002\u5982\u679c\u786e\u5b9e\u9700\u8981\u653e\u5927\u663e\u793a&#xff0c;\u5e94\u8be5\u201c\u7f29\u653e\u56fe\u7247\u7ed8\u5236\u5230\u7684\u753b\u5e03\u201d&#xff0c;\u800c\u4e0d\u662f\u4f9d\u8d56\u89e3\u7801\u653e\u5927\u3002<\/p>\n<h4>\u7b2c\u4e8c\u5c42&#xff1a;\u5bf9 ImageProvider \u7ec4\u5408\u573a\u666f&#xff0c;\u7528 ResizeImage \u5305\u88f9<\/h4>\n<p>\u5f53\u56fe\u7247\u4e0d\u662f\u76f4\u63a5\u901a\u8fc7 Image \u6784\u9020\u51fd\u6570\u52a0\u8f7d&#xff0c;\u800c\u662f\u4f5c\u4e3a ImageProvider \u4f20\u9012&#xff08;\u4f8b\u5982 DecorationImage\u3001FadeInImage\u3001CachedNetworkImage \u7684 imageProvider&#xff09;&#xff0c;ResizeImage \u662f\u7b49\u6548\u7684\u5de5\u5177\u3002\u4e00\u4e2a\u56fe\u7247\u7f13\u5b58\u5305\u7684\u6587\u6863\u5efa\u8bae&#xff1a;\u201c\u4e3a\u4e86\u4ee5\u66f4\u5c0f\u7684\u5c3a\u5bf8\u89e3\u7801&#xff08;\u63a8\u8350\u7528\u4e8e\u7f29\u7565\u56fe&#xff09;&#xff0c;\u5c06\u5176\u5305\u88f9\u5728 ResizeImage \u4e2d\u201d\u3002ResizeImage(NetworkImage(url), width: targetWidth, height: targetHeight) \u7684 width\/height \u662f\u89e3\u7801\u5c3a\u5bf8&#xff08;\u7269\u7406\u50cf\u7d20&#xff09; &#xff0c;\u4e0e cacheWidth\/cacheHeight \u7684\u8bed\u4e49\u4e00\u81f4\u3002<\/p>\n<p>ResizeImage \u6709\u4e00\u4e2a\u9700\u8981\u7559\u610f\u7684\u9677\u9631&#xff1a;\u5982\u679c\u5b83\u7684 width\/height \u6765\u81ea\u4e00\u4e2a\u4f1a\u5728\u5e03\u5c40\u4e2d\u53d8\u5316\u7684\u7ea6\u675f&#xff08;\u4f8b\u5982\u6bcf\u4e00\u5e27\u90fd\u4e0d\u540c\u7684 constraints.maxWidth&#xff09;&#xff0c;\u6bcf\u6b21\u5c3a\u5bf8\u53d8\u5316\u90fd\u4f1a\u4ea7\u751f\u4e00\u4e2a\u65b0\u7684 ImageProvider key&#xff0c;\u5bfc\u81f4\u91cd\u65b0\u89e3\u7801\u3002\u4e00\u7bc7\u56fe\u7247\u7ba1\u7ebf\u6587\u7ae0\u5bf9\u6b64\u7684\u8868\u8ff0\u662f&#xff1a;\u201cResizeImage \u7684\u5c3a\u5bf8\u6765\u81ea\u4e00\u4e2a\u6309\u50cf\u7d20\u53d8\u5316\u7684\u5e03\u5c40\u65f6&#xff0c;key \u4f1a\u53d8\u5316&#xff0c;\u6240\u4ee5\u5b83\u4f1a\u91cd\u65b0\u89e3\u7801\u201d&#xff1b;\u4fee\u590d\u65b9\u5f0f\u662f\u201c\u5c06 ResizeImage \u7684\u5c3a\u5bf8\u820d\u5165\u5230\u4e00\u4e2a\u7a33\u5b9a\u7684\u6876&#xff0c;\u800c\u4e0d\u662f\u4f20\u9012\u539f\u59cb\u7684\u5e03\u5c40\u7ea6\u675f\u201d\u3002\u8fd9\u610f\u5473\u7740 ResizeImage \u7684\u5c3a\u5bf8\u5e94\u8be5\u6765\u81ea\u7a33\u5b9a\u7684\u8bbe\u8ba1\u503c\u6216\u65ad\u70b9&#xff0c;\u800c\u4e0d\u662f\u6bcf\u4e00\u5e27\u91cd\u65b0\u8ba1\u7b97\u7684\u50cf\u7d20\u503c\u3002<\/p>\n<h4>\u7b2c\u4e09\u5c42&#xff1a;\u5bf9 ListView\/GridView \u4e2d\u7684\u56fe\u7247&#xff0c;\u63a7\u5236 cacheExtent \u548c keepAlive<\/h4>\n<p>ListView.builder \u7684 cacheExtent \u63a7\u5236\u89c6\u53e3\u4e4b\u5916\u9884\u52a0\u8f7d\u548c\u4fdd\u7559\u7684\u533a\u57df\u5927\u5c0f\u3002\u9ed8\u8ba4\u503c\u5728\u56fe\u7247\u5bc6\u96c6\u7684\u5217\u8868\u4e2d\u53ef\u80fd\u5bfc\u81f4\u8fc7\u591a\u7684\u56fe\u7247\u540c\u65f6\u5b58\u6d3b&#xff1b;\u5c06 cacheExtent \u8bbe\u4e3a\u4e00\u4e2a\u9002\u5ea6\u7684\u503c&#xff08;\u4f8b\u5982\u53ef\u89c1\u533a\u57df\u9ad8\u5ea6\u7684 1\u20131.5 \u500d&#xff09;&#xff0c;\u53ef\u4ee5\u51cf\u5c11\u201c\u5373\u5c06\u8fdb\u5165\u89c6\u53e3\u4f46\u5c1a\u672a\u53ef\u89c1\u201d\u7684\u56fe\u7247\u5360\u7528\u7684\u5185\u5b58\u3002\u5982\u679c\u5217\u8868\u9879\u5305\u542b\u7684\u662f\u5927\u56fe\u6216\u52a8\u753b\u56fe\u7247&#xff0c;\u8f83\u5c0f\u7684 cacheExtent \u53ef\u4ee5\u663e\u8457\u964d\u4f4e\u5cf0\u503c\u5185\u5b58&#xff0c;\u4ee3\u4ef7\u662f\u5feb\u901f\u6ed1\u52a8\u65f6\u53ef\u80fd\u51fa\u73b0\u77ed\u6682\u7684\u767d\u5c4f\u3002<\/p>\n<p>Image \u7684 keepAlive \u5c5e\u6027\u201c\u51b3\u5b9a\u6e32\u67d3\u7684\u56fe\u7247\u662f\u5426\u5e94\u8be5\u5728\u4f8b\u5982\u6eda\u51fa ListView \u89c6\u56fe\u540e\u4ecd\u7136\u88ab\u4fdd\u7559\u201d\u3002\u5bf9\u4e8e\u5927\u591a\u6570\u56fe\u7247\u5217\u8868&#xff0c;keepAlive \u5e94\u8be5\u4fdd\u6301\u4e3a false&#xff08;\u9ed8\u8ba4\u503c&#xff09;&#xff0c;\u8ba9\u6eda\u51fa\u89c6\u53e3\u7684\u56fe\u7247\u8fdb\u5165\u6b63\u5e38\u7684\u7f13\u5b58\u548c\u9a71\u9010\u6d41\u7a0b\u3002\u53ea\u6709\u5f53\u56fe\u7247\u662f\u201c\u5c0f\u5c3a\u5bf8\u7684\u3001\u9891\u7e41\u6eda\u56de\u89c6\u53e3\u7684\u3001\u91cd\u65b0\u89e3\u7801\u6210\u672c\u660e\u663e\u9ad8\u4e8e\u5185\u5b58\u6210\u672c\u201d\u65f6&#xff08;\u4f8b\u5982\u4e00\u4e2a\u8868\u60c5\u9009\u62e9\u9762\u677f\u4e2d\u7684\u5c0f\u56fe\u6807&#xff09;&#xff0c;\u624d\u8003\u8651\u5c06 keepAlive \u8bbe\u4e3a true \u5e76\u914d\u5408 cacheWidth \u4e25\u683c\u9650\u5236\u89e3\u7801\u5c3a\u5bf8\u3002<\/p>\n<h4>\u7b2c\u56db\u5c42&#xff1a;\u5bf9 precacheImage \u5efa\u7acb\u201c\u4ec5\u9650\u5173\u952e\u5c0f\u56fe\u201d\u7684\u7eaa\u5f8b<\/h4>\n<p>precacheImage \u7684\u5408\u7406\u573a\u666f\u662f&#xff1a;\u4e00\u5f20\u786e\u5b9a\u4f1a\u5728\u4e0b\u4e00\u9875\u7acb\u5373\u663e\u793a\u3001\u5c3a\u5bf8\u53d7\u9650\u3001\u6570\u91cf\u5f88\u5c11\u7684\u56fe\u7247&#xff08;\u4f8b\u5982\u542f\u52a8\u5c4f\u8fc7\u6e21\u5230\u9996\u9875\u7684 hero \u56fe\u3001\u4e00\u4e2a PageView \u7684\u7b2c\u4e00\u5f20\u56fe&#xff09;\u3002\u4f7f\u7528\u65f6\u7684\u68c0\u67e5\u6e05\u5355\u662f&#xff1a;\u8fd9\u5f20\u56fe\u7247\u662f\u5426\u8bbe\u7f6e\u4e86 cacheWidth\/cacheHeight&#xff1f;\u9884\u52a0\u8f7d\u7684\u6570\u91cf\u662f\u5426\u4e0d\u8d85\u8fc7 2\u20133 \u5f20&#xff1f;\u9884\u52a0\u8f7d\u7684\u65f6\u673a\u662f\u5426\u5728\u56fe\u7247\u786e\u5b9e\u5373\u5c06\u88ab\u4f7f\u7528\u4e4b\u524d&#xff0c;\u800c\u4e0d\u662f\u201c\u63d0\u524d\u628a\u6240\u6709\u53ef\u80fd\u7528\u5230\u7684\u56fe\u7247\u90fd\u52a0\u8f7d\u4e86\u201d&#xff1f;\u5982\u679c\u4e00\u4e2a\u9875\u9762\u9700\u8981\u9884\u52a0\u8f7d\u7684\u56fe\u7247\u8d85\u8fc7 3 \u5f20&#xff0c;\u6216\u8005\u56fe\u7247\u7684\u6e90\u5c3a\u5bf8\u5f88\u5927&#xff0c;precacheImage \u7684\u6536\u76ca&#xff08;\u51cf\u5c11\u52a0\u8f7d\u95ea\u70c1&#xff09;\u5f88\u53ef\u80fd\u5c0f\u4e8e\u5b83\u7684\u5185\u5b58\u4ee3\u4ef7&#xff08;\u5c06\u56fe\u7247\u9489\u5728\u5185\u5b58\u4e2d&#xff0c;\u7ed5\u8fc7 LRU&#xff09;\u3002<\/p>\n<h4>\u7b2c\u4e94\u5c42&#xff1a;\u5bf9\u52a8\u753b\u56fe\u7247&#xff0c;\u4ece\u201c\u89e3\u7801\u5c3a\u5bf8\u7ea6\u675f\u201d\u8f6c\u5411\u201c\u6e90\u5c3a\u5bf8\u7ea6\u675f\u201d<\/h4>\n<p>\u7531\u4e8e cacheWidth\/cacheHeight \u548c ResizeImage \u5bf9\u52a8\u753b GIF\/WebP\/APNG \u5f53\u524d\u4e0d\u751f\u6548&#xff08;\u5f15\u64ce PR \u7684\u660e\u786e\u8868\u8ff0&#xff09;&#xff0c;\u5ba2\u6237\u7aef\u4fa7\u7684\u4fee\u590d\u4e0d\u80fd\u4f9d\u8d56\u8fd9\u4e9b\u53c2\u6570\u3002\u53ef\u884c\u7684\u65b9\u5411\u662f&#xff1a;\u5728\u670d\u52a1\u7aef\u6216\u6784\u5efa\u65f6\u751f\u6210\u5c3a\u5bf8\u66f4\u5c0f\u7684\u52a8\u753b\u7f29\u7565\u56fe&#xff0c;\u8ba9\u5ba2\u6237\u7aef\u89e3\u7801\u7684\u6e90\u5c3a\u5bf8\u672c\u8eab\u5c31\u63a5\u8fd1\u663e\u793a\u5c3a\u5bf8&#xff1b;\u5982\u679c\u65e0\u6cd5\u63a7\u5236\u6e90&#xff0c;\u51cf\u5c11\u540c\u65f6\u53ef\u89c1\u7684\u52a8\u753b\u56fe\u7247\u6570\u91cf&#xff08;\u901a\u8fc7\u5e03\u5c40\u9650\u5236\u6216\u5206\u9875&#xff09;&#xff0c;\u5e76\u907f\u514d\u5bf9\u52a8\u753b\u56fe\u7247\u4f7f\u7528 precacheImage\u3002\u5728 GridView \u4e2d\u5c55\u793a\u52a8\u753b\u8d34\u7eb8\u65f6&#xff0c;cacheExtent \u5e94\u8be5\u8bbe\u7f6e\u5f97\u6bd4\u9759\u6001\u56fe\u7247\u5217\u8868\u66f4\u5c0f&#xff0c;\u56e0\u4e3a\u6bcf\u4e00\u5f20\u52a8\u753b\u56fe\u7247\u7684\u5185\u5b58\u6210\u672c\u5305\u542b\u5355\u5e27\u50cf\u7d20\u548c\u5e27\u7f13\u5b58\u4e24\u5c42\u3002<\/p>\n<h4>\u7b2c\u516d\u5c42&#xff1a;\u5fc5\u8981\u65f6\u8c03\u6574 ImageCache \u7684\u9884\u7b97&#xff0c;\u4f46\u4e0d\u8981\u628a\u8c03\u5927\u5f53\u4f5c\u4fee\u590d<\/h4>\n<p>ImageCache \u7684\u9ed8\u8ba4\u4e0a\u9650\u662f 1000 \u5f20\u548c 100MB\u3002\u5728\u4f4e\u7aef\u8bbe\u5907\u4e0a&#xff0c;100MB \u7684\u56fe\u7247\u7f13\u5b58\u53ef\u80fd\u5df2\u7ecf\u8fc7\u5927&#xff1b;\u53ef\u4ee5\u9002\u5f53\u8c03\u5c0f maximumSizeBytes&#xff0c;\u8ba9 LRU \u66f4\u65e9\u9a71\u9010&#xff0c;\u964d\u4f4e\u5cf0\u503c\u5185\u5b58&#xff08;\u4ee3\u4ef7\u662f\u6eda\u52a8\u65f6\u66f4\u9891\u7e41\u5730\u91cd\u65b0\u89e3\u7801&#xff09;\u3002\u5728\u9ad8\u7aef\u8bbe\u5907\u6216\u56fe\u7247\u5bc6\u96c6\u7684\u4e13\u7528\u9875\u9762&#xff0c;\u53ef\u4ee5\u9002\u5ea6\u8c03\u5927&#xff0c;\u4f46\u8fd9\u5fc5\u987b\u662f\u201c\u5728\u89e3\u7801\u5c3a\u5bf8\u5df2\u7ecf\u53d7\u9650\u3001\u5b58\u6d3b\u6570\u91cf\u5df2\u7ecf\u63a7\u5236\u201d\u4e4b\u540e\u7684\u8c03\u6574&#xff0c;\u800c\u4e0d\u662f\u7528\u66f4\u5927\u7684\u7f13\u5b58\u53bb\u5bb9\u7eb3\u672a\u7f29\u5c0f\u7684\u56fe\u7247\u3002Flutter \u7684 breaking change \u660e\u786e\u53cd\u5bf9\u201c\u4e3a\u4e86\u5bb9\u7eb3\u5927\u56fe\u800c\u589e\u5927 maxByteSize\u201d\u7684\u505a\u6cd5&#xff1a;\u201c\u4e0d\u518d\u81ea\u52a8\u589e\u5927 ImageCache \u7684 maxByteSize \u6765\u5bb9\u7eb3\u5927\u56fe\u201d&#xff1b;\u8fc1\u79fb\u6307\u5357\u7684\u65b9\u5411\u662f\u201c\u8c03\u6574\u56fe\u7247\u52a0\u8f7d\u903b\u8f91&#xff0c;\u786e\u4fdd\u56fe\u7247\u80fd\u5408\u9002\u5730\u653e\u5165\u4f60\u9009\u62e9\u7684 maxByteSize\u201d&#xff0c;\u800c\u4e0d\u662f\u53cd\u8fc7\u6765\u8ba9\u7f13\u5b58\u9002\u5e94\u5927\u56fe\u3002<\/p>\n<h3>\u516d\u3001\u9884\u9632\u4f53\u7cfb&#xff1a;\u8ba9\u201c\u89e3\u7801\u5c3a\u5bf8\u201d\u6210\u4e3a\u56fe\u7247\u52a0\u8f7d\u7684\u9ed8\u8ba4\u5ba1\u67e5\u9879<\/h3>\n<h4>\u539f\u5219\u4e00&#xff1a;\u6bcf\u4e00\u5f20 Image \u90fd\u5fc5\u987b\u56de\u7b54\u201c\u89e3\u7801\u5c3a\u5bf8\u662f\u591a\u5c11\u201d<\/h4>\n<p>\u5728\u56e2\u961f\u89c4\u8303\u4e2d&#xff0c;\u5c06 cacheWidth\/cacheHeight&#xff08;\u6216 ResizeImage \u7684 width\/height&#xff09;\u4f5c\u4e3a\u56fe\u7247\u52a0\u8f7d\u7684\u9ed8\u8ba4\u914d\u7f6e&#xff0c;\u800c\u4e0d\u662f\u201c\u7b49\u5230 OOM \u624d\u52a0\u7684\u4f18\u5316\u201d\u3002\u4efb\u4f55\u65b0\u589e\u7684 Image.network\/Image.asset\/Image.file&#xff0c;\u5728 code review \u4e2d\u90fd\u9700\u8981\u56de\u7b54&#xff1a;\u8fd9\u5f20\u56fe\u7247\u7684\u6e90\u5c3a\u5bf8\u53ef\u80fd\u6709\u591a\u5927&#xff1f;\u663e\u793a\u5c3a\u5bf8\u662f\u591a\u5c11&#xff1f;\u89e3\u7801\u5c3a\u5bf8\u662f\u5426\u88ab\u9650\u5236\u5230\u4e86\u663e\u793a\u5c3a\u5bf8 \u00d7 DPR&#xff1f; \u5982\u679c\u6e90\u5c3a\u5bf8\u4e0d\u786e\u5b9a&#xff08;\u4f8b\u5982\u7528\u6237\u4e0a\u4f20\u7684\u5934\u50cf\u3001\u7b2c\u4e09\u65b9 URL&#xff09;&#xff0c;\u9ed8\u8ba4\u5fc5\u987b\u8bbe\u7f6e\u89e3\u7801\u5c3a\u5bf8\u9650\u5236\u3002PreferImageSizeConstraintsRule \u8fd9\u7c7b lint \u7684\u8b66\u544a\u4fe1\u606f\u6b63\u662f\u8fd9\u4e2a\u539f\u5219\u7684\u81ea\u52a8\u5316\u7248\u672c&#xff1a;\u201cWarns when Image lacks cacheWidth\/cacheHeight for memory optimization. Images decoded at full resolution consume excessive memory\u201d\u3002<\/p>\n<h4>\u539f\u5219\u4e8c&#xff1a;\u533a\u5206\u201c\u5e03\u5c40\u5c3a\u5bf8\u201d\u548c\u201c\u89e3\u7801\u5c3a\u5bf8\u201d&#xff0c;\u5e76\u786e\u4fdd\u6362\u7b97\u6b63\u786e<\/h4>\n<p>width\/height \u662f\u903b\u8f91\u50cf\u7d20\u7684\u5e03\u5c40\u5c3a\u5bf8&#xff0c;cacheWidth\/cacheHeight \u662f\u7269\u7406\u50cf\u7d20\u7684\u89e3\u7801\u5c3a\u5bf8\u3002\u5728\u56e2\u961f\u6587\u6863\u4e2d\u660e\u786e\u8fd9\u4e2a\u6362\u7b97\u5173\u7cfb&#xff1a;\u89e3\u7801\u5c3a\u5bf8 &#061; \u5e03\u5c40\u903b\u8f91\u5c3a\u5bf8 \u00d7 devicePixelRatio\u3002\u5bf9\u6bcf\u4e00\u4e2a\u8bbe\u7f6e\u4e86 cacheWidth \u7684 Image&#xff0c;\u68c0\u67e5\u5b83\u7684\u503c\u662f\u5426\u57fa\u4e8e\u5e03\u5c40\u5c3a\u5bf8\u548c DPR \u8ba1\u7b97&#xff0c;\u800c\u4e0d\u662f\u57fa\u4e8e\u6e90\u56fe\u5c3a\u5bf8\u6216\u4e00\u4e2a\u51ed\u76f4\u89c9\u586b\u5199\u7684\u6570\u5b57\u3002\u4e00\u4e2a\u5e38\u89c1\u7684\u9519\u8bef\u6a21\u5f0f\u662f\u201c\u53ea\u5728 Image \u4e0a\u8bbe\u7f6e\u4e86 width: 200&#xff0c;\u7136\u540e\u4ee5\u4e3a\u5185\u5b58\u5c31\u662f 200\u00d7\u9ad8\u5ea6\u201d\u2014\u2014\u5e03\u5c40\u5c3a\u5bf8\u4e0d\u6539\u53d8\u89e3\u7801\u884c\u4e3a\u3002<\/p>\n<h4>\u539f\u5219\u4e09&#xff1a;\u5bf9\u52a8\u753b\u56fe\u7247\u5efa\u7acb\u72ec\u7acb\u7684\u8d44\u6e90\u89c4\u8303<\/h4>\n<p>\u7531\u4e8e\u52a8\u753b\u56fe\u7247\u7684\u5c3a\u5bf8\u53c2\u6570\u5f53\u524d\u4e0d\u751f\u6548&#xff0c;\u5bf9 GIF\/WebP\/APNG \u7684\u8d44\u6e90\u7ba1\u7406\u4e0d\u80fd\u6cbf\u7528\u9759\u6001\u56fe\u7247\u7684\u201c\u52a0 cacheWidth\u201d\u7b56\u7565\u3002\u56e2\u961f\u89c4\u8303\u5e94\u8be5\u8981\u6c42&#xff1a;\u52a8\u753b\u8d44\u6e90\u5728\u5165\u5e93\u6216\u670d\u52a1\u7aef\u5904\u7406\u65f6\u5c31\u88ab\u9650\u5236\u5230\u63a5\u8fd1\u663e\u793a\u5c3a\u5bf8&#xff0c;\u800c\u4e0d\u662f\u4f9d\u8d56\u5ba2\u6237\u7aef\u89e3\u7801\u7f29\u5c0f&#xff1b;\u52a8\u753b\u56fe\u7247\u7684\u5217\u8868\u4f7f\u7528\u66f4\u5c0f\u7684 cacheExtent&#xff1b;\u7981\u6b62\u5bf9\u52a8\u753b\u56fe\u7247\u6279\u91cf precacheImage\u3002\u5728\u8d44\u6e90\u5ba1\u67e5\u4e2d&#xff0c;\u52a8\u753b\u56fe\u7247\u7684\u201c\u6e90\u5c3a\u5bf8\u201d\u548c\u201c\u540c\u65f6\u53ef\u89c1\u6570\u91cf\u201d\u662f\u4e24\u4e2a\u9700\u8981\u663e\u5f0f\u786e\u8ba4\u7684\u6307\u6807\u3002<\/p>\n<h4>\u539f\u5219\u56db&#xff1a;\u628a precacheImage \u5f53\u4f5c\u201c\u7a00\u7f3a\u8d44\u6e90\u201d\u800c\u4e0d\u662f\u201c\u901a\u7528\u4f18\u5316\u201d<\/h4>\n<p>precacheImage \u7684\u6587\u6863\u8b66\u544a\u201c\u8c03\u7528\u8005\u5e94\u8c28\u614e\u5c06\u5927\u56fe\u6216\u5927\u91cf\u56fe\u7247\u9489\u5728\u5185\u5b58\u4e2d\u201d\u3002\u5728\u56e2\u961f\u89c4\u8303\u4e2d&#xff0c;\u5c06 precacheImage \u7684\u4f7f\u7528\u9650\u5236\u5728\u201c\u5173\u952e\u7684\u5c0f\u5c3a\u5bf8\u56fe\u7247\u3001\u6570\u91cf\u4e0d\u8d85\u8fc7 2\u20133 \u5f20\u3001\u5e76\u4e14\u5df2\u8bbe\u7f6e\u89e3\u7801\u5c3a\u5bf8\u9650\u5236\u201d\u7684\u573a\u666f\u4e2d\u3002\u4efb\u4f55\u65b0\u589e\u7684 precacheImage \u8c03\u7528\u90fd\u9700\u8981\u8bf4\u660e&#xff1a;\u8fd9\u5f20\u56fe\u7247\u4e3a\u4ec0\u4e48\u4e0d\u80fd\u88ab\u6b63\u5e38\u7684\u6309\u9700\u52a0\u8f7d\u8986\u76d6&#xff1f;\u9884\u52a0\u8f7d\u7684\u5185\u5b58\u4ee3\u4ef7\u662f\u5426\u5df2\u7ecf\u88ab\u8ba1\u7b97\u8fc7&#xff1f;<\/p>\n<h4>\u539f\u5219\u4e94&#xff1a;\u5728 CI \u6216\u6d4b\u8bd5\u4e2d\u76d1\u63a7\u56fe\u7247\u89e3\u7801\u5185\u5b58\u7684\u201c\u7406\u8bba\u5cf0\u503c\u201d<\/h4>\n<p>\u4e00\u4e2a\u53ef\u4ee5\u5728 Widget \u6d4b\u8bd5\u6216\u96c6\u6210\u6d4b\u8bd5\u4e2d\u6267\u884c\u7684\u68c0\u67e5\u662f&#xff1a;\u5bf9\u5173\u952e\u56fe\u7247\u9875\u9762&#xff0c;\u6536\u96c6\u6240\u6709\u53ef\u89c1\u56fe\u7247\u7684\u6e90\u5c3a\u5bf8&#xff08;\u6216\u4ece\u8d44\u6e90\u6e05\u5355\u4e2d\u8bfb\u53d6&#xff09;&#xff0c;\u8ba1\u7b97\u89e3\u7801\u5185\u5b58\u7684\u7406\u8bba\u603b\u548c&#xff0c;\u5e76\u4e0e\u4e00\u4e2a\u9884\u7b97\u9608\u503c\u6bd4\u8f83\u3002\u5982\u679c\u7406\u8bba\u5cf0\u503c\u8d85\u8fc7\u9608\u503c&#xff0c;\u6d4b\u8bd5\u5931\u8d25\u6216\u53d1\u51fa\u8b66\u544a\u3002\u8fd9\u4e2a\u68c0\u67e5\u4e0d\u9700\u8981\u771f\u6b63\u89e6\u53d1 OOM&#xff0c;\u5b83\u57fa\u4e8e\u201c\u89e3\u7801\u5c3a\u5bf8 \u00d7 \u5b58\u6d3b\u6570\u91cf\u201d\u7684\u7b97\u672f&#xff0c;\u53ef\u4ee5\u5728\u4ee3\u7801\u5408\u5e76\u4e4b\u524d\u6355\u83b7\u201c\u53c8\u5f15\u5165\u4e86\u4e00\u5f20 4000\u00d73000 \u7684\u672a\u9650\u5236\u56fe\u7247\u201d\u8fd9\u6837\u7684\u56de\u5f52\u3002<\/p>\n<h4>\u539f\u5219\u516d&#xff1a;\u5728\u771f\u673a\u3001\u4f4e\u7aef\u8bbe\u5907\u548c Profile \u6a21\u5f0f\u4e0b\u9a8c\u8bc1<\/h4>\n<p>\u56fe\u7247\u5185\u5b58\u95ee\u9898\u5728 Debug \u6a21\u5f0f\u3001\u6a21\u62df\u5668\u548c\u9ad8\u5185\u5b58\u8bbe\u5907\u4e0a\u5f80\u5f80\u4e0d\u53ef\u89c1\u3002Debug \u6a21\u5f0f\u7684\u6027\u80fd\u7279\u5f81\u4e0e Release \u4e0d\u540c&#xff0c;\u6a21\u62df\u5668\u7684\u5185\u5b58\u9650\u5236\u4e0e\u771f\u673a\u4e0d\u540c&#xff0c;\u9ad8\u7aef\u8bbe\u5907\u7684\u5927\u5185\u5b58\u4f1a\u63a9\u76d6\u5cf0\u503c\u3002\u9a8c\u6536\u5e94\u8be5\u5728\u81f3\u5c11\u4e00\u53f0\u4f4e\u7aef Android \u771f\u673a\u4e0a\u3001Profile \u6a21\u5f0f\u4e0b\u8fdb\u884c&#xff0c;\u89c2\u5bdf\u6eda\u52a8\u548c\u9875\u9762\u5207\u6362\u65f6\u7684\u5185\u5b58\u66f2\u7ebf\u3002\u4f4e\u7aef\u8bbe\u5907\u662f OOM \u6700\u5148\u66b4\u9732\u7684\u5730\u65b9&#xff0c;\u4e5f\u662f\u201c\u89e3\u7801\u5c3a\u5bf8\u672a\u53d7\u9650\u201d\u548c\u201clive \u56fe\u7247\u8fc7\u591a\u201d\u8fd9\u4e24\u4e2a\u6839\u56e0\u6700\u5bb9\u6613\u540c\u65f6\u53d1\u4f5c\u7684\u5730\u65b9\u3002<\/p>\n<h3>\u4e03\u3001\u8bfe\u540e\u4e60\u9898&#xff08;15\u9053&#xff09;<\/h3>\n<h4>\u4e60\u98981&#xff08;\u5355\u9009&#xff09;<\/h4>\n<p>\u4e00\u5f20 4000\u00d73000 \u7684 JPEG \u5728 Flutter \u4e2d\u9ed8\u8ba4\u89e3\u7801\u540e&#xff0c;\u5360\u7528\u7684\u8fd1\u4f3c\u5185\u5b58\u662f&#xff1a;<\/p>\n<p>A. \u7ea6 2MB&#xff0c;\u4e0e\u78c1\u76d8\u6587\u4ef6\u5927\u5c0f\u76f8\u540c B. \u7ea6 12MB&#xff0c;\u7b49\u4e8e\u5bbd\u5ea6 \u00d7 \u9ad8\u5ea6 \u00d7 1 \u5b57\u8282 C. \u7ea6 48MB&#xff0c;\u7b49\u4e8e\u5bbd\u5ea6 \u00d7 \u9ad8\u5ea6 \u00d7 4 \u5b57\u8282 D. \u7ea6 4000KB&#xff0c;\u7b49\u4e8e\u5bbd\u5ea6 \u00d7 \u9ad8\u5ea6 \/ 3000<\/p>\n<p>\u53c2\u8003\u7b54\u6848&#xff1a;C<\/p>\n<p>\u89e3\u8bfb&#xff1a; Flutter \u5c06\u56fe\u7247\u4ee5\u672a\u538b\u7f29\u5f62\u5f0f\u5b58\u50a8\u5728\u5185\u5b58\u4e2d\u4ee5\u4fbf\u6e32\u67d3&#xff0c;\u6bcf\u4e2a\u50cf\u7d20\u5360 4 \u5b57\u8282&#xff08;RGBA&#xff09;\u30024000 \u00d7 3000 \u00d7 4 &#061; 48,000,000 \u5b57\u8282 \u2248 48MB\u3002\u78c1\u76d8\u4e0a\u7684\u6587\u4ef6\u5927\u5c0f&#xff08;\u7ea6 2MB&#xff09;\u662f\u538b\u7f29\u540e\u7684\u5b57\u8282&#xff0c;\u4e0e\u89e3\u7801\u540e\u7684\u50cf\u7d20\u77e9\u9635\u6ca1\u6709\u76f4\u63a5\u6bd4\u4f8b\u5173\u7cfb\u3002\u8fd9\u6b63\u662f\u201c\u6587\u4ef6\u5927\u5c0f\u4e0e\u5185\u5b58\u5360\u7528\u8131\u94a9\u201d\u7684\u6838\u5fc3\u3002<\/p>\n<h4>\u4e60\u98982&#xff08;\u5224\u65ad&#xff09;<\/h4>\n<p>\u5728 Image.network(url, width: 48, height: 48) \u4e2d&#xff0c;width \u548c height \u53c2\u6570\u4f1a\u9650\u5236\u56fe\u7247\u7684\u89e3\u7801\u5c3a\u5bf8&#xff0c;\u56e0\u6b64\u5185\u5b58\u5360\u7528\u5f88\u5c0f\u3002<\/p>\n<p>\u53c2\u8003\u7b54\u6848&#xff1a;\u9519\u8bef<\/p>\n<p>\u89e3\u8bfb&#xff1a; width \u548c height \u5f71\u54cd\u7684\u662f Paint \u9636\u6bb5\u7684\u5e03\u5c40\u548c\u7ed8\u5236\u5c3a\u5bf8&#xff0c;\u89e3\u7801\u4ecd\u7136\u6309\u56fe\u7247\u7684\u539f\u59cb\u5c3a\u5bf8\u8fdb\u884c\u3002\u5982\u679c\u6e90\u56fe\u662f 4000\u00d73000&#xff0c;\u5373\u4f7f\u663e\u793a\u4e3a 48\u00d748&#xff0c;\u5185\u5b58\u4e2d\u4ecd\u7136\u4f1a\u5206\u914d\u7ea6 48MB \u7684\u50cf\u7d20\u6570\u636e\u3002\u8981\u9650\u5236\u89e3\u7801\u5c3a\u5bf8&#xff0c;\u5fc5\u987b\u4f7f\u7528 cacheWidth\/cacheHeight&#xff08;\u7269\u7406\u50cf\u7d20&#xff09;\u6216 ResizeImage\u3002<\/p>\n<h4>\u4e60\u98983&#xff08;\u591a\u9009&#xff09;<\/h4>\n<p>cacheWidth \u548c cacheHeight \u53c2\u6570\u7684\u8bed\u4e49\u5305\u62ec&#xff1a;<\/p>\n<p>A. \u5b83\u4eec\u6307\u793a\u5f15\u64ce\u5728\u89e3\u7801\u65f6\u5c06\u56fe\u7247\u89e3\u7801\u5230\u6307\u5b9a\u5c3a\u5bf8 B. \u5b83\u4eec\u4f7f\u7528\u903b\u8f91\u50cf\u7d20\u4f5c\u4e3a\u5355\u4f4d&#xff0c;\u4e0e width\/height \u76f8\u540c C. \u5982\u679c\u53ea\u6307\u5b9a\u5176\u4e2d\u4e00\u4e2a&#xff0c;\u53e6\u4e00\u4e2a\u7ef4\u5ea6\u4f1a\u6309\u539f\u59cb\u5bbd\u9ad8\u6bd4\u7f29\u653e D. \u5f53\u4e24\u8005\u90fd\u7701\u7565\u65f6&#xff0c;\u56fe\u7247\u6309\u539f\u751f\u5206\u8fa8\u7387\u89e3\u7801<\/p>\n<p>\u53c2\u8003\u7b54\u6848&#xff1a;A\u3001C\u3001D<\/p>\n<p>\u89e3\u8bfb&#xff1a; A \u662f\u57fa\u672c\u8bed\u4e49\u3002C \u548c D \u6765\u81ea instantiateImageCodecFromBuffer \u7684\u6587\u6863&#xff1a;\u201c\u5f53\u53ea\u6307\u5b9a\u5176\u4e2d\u4e00\u4e2a\u65f6&#xff0c;\u7701\u7565\u7684\u7ef4\u5ea6\u5c06\u6309\u539f\u59cb\u5bbd\u9ad8\u6bd4\u7f29\u653e&#xff1b;\u5f53\u4e24\u8005\u90fd\u7701\u7565\u65f6&#xff0c;\u56fe\u7247\u5c06\u6309\u5176\u539f\u751f\u5206\u8fa8\u7387\u89e3\u7801\u201d\u3002B \u662f\u9519\u8bef\u7684&#xff1a;cacheWidth\/cacheHeight \u662f\u7269\u7406\u50cf\u7d20&#xff08;\u89e3\u7801\u5c3a\u5bf8&#xff09;&#xff0c;\u800c width\/height \u662f\u903b\u8f91\u50cf\u7d20&#xff08;\u5e03\u5c40\u5c3a\u5bf8&#xff09;\u3002\u628a\u903b\u8f91\u50cf\u7d20\u76f4\u63a5\u4f20\u7ed9 cacheWidth&#xff0c;\u5728 2x\/3x \u5c4f\u5e55\u4e0a\u4f1a\u5bfc\u81f4\u6a21\u7cca\u3002<\/p>\n<h4>\u4e60\u98984&#xff08;\u573a\u666f\u5206\u6790&#xff09;<\/h4>\n<p>\u4e00\u4e2a 48\u00d748 \u903b\u8f91\u50cf\u7d20\u7684\u5934\u50cf&#xff0c;\u6e90\u56fe\u662f 4000\u00d73000&#xff0c;\u8bbe\u5907 devicePixelRatio \u4e3a 3\u3002\u8bf7\u8ba1\u7b97&#xff1a;\u4e0d\u8bbe\u7f6e cacheWidth \u65f6\u7684\u89e3\u7801\u5185\u5b58&#xff0c;\u4ee5\u53ca\u8bbe\u7f6e\u6b63\u786e\u7684 cacheWidth \u540e\u7684\u89e3\u7801\u5185\u5b58\u3002\u5e76\u8bf4\u660e\u8fd9\u4e2a\u6848\u4f8b\u7684\u4fee\u590d\u539f\u5219\u3002<\/p>\n<p>\u53c2\u8003\u7b54\u6848&#xff1a; \u4e0d\u8bbe\u7f6e cacheWidth \u65f6&#xff0c;\u89e3\u7801\u5185\u5b58\u4e3a 4000 \u00d7 3000 \u00d7 4 \u2248 48MB\u3002\u6b63\u786e\u7684 cacheWidth &#061; 48 \u00d7 3 &#061; 144 \u7269\u7406\u50cf\u7d20&#xff0c;\u89e3\u7801\u5185\u5b58\u4e3a 144 \u00d7 144 \u00d7 4 \u2248 83KB\u3002\u4fee\u590d\u539f\u5219\u662f\u201c\u89e3\u7801\u5c3a\u5bf8\u5e94\u63a5\u8fd1\u663e\u793a\u5c3a\u5bf8\u7684\u7269\u7406\u50cf\u7d20\u503c&#xff0c;\u800c\u4e0d\u662f\u6e90\u56fe\u5c3a\u5bf8\u6216\u5e03\u5c40\u903b\u8f91\u5c3a\u5bf8\u201d\u3002\u8fd9\u4e2a\u6848\u4f8b\u5c55\u793a\u4e86\u5e03\u5c40\u5c3a\u5bf8&#xff08;48 \u903b\u8f91\u50cf\u7d20&#xff09;\u4e0e\u89e3\u7801\u5c3a\u5bf8&#xff08;144 \u7269\u7406\u50cf\u7d20&#xff09;\u7684\u6362\u7b97\u5173\u7cfb&#xff1b;\u5982\u679c\u9519\u8bef\u5730\u8bbe\u7f6e cacheWidth: 48&#xff0c;\u5728 DPR 3 \u7684\u5c4f\u5e55\u4e0a\u56fe\u7247\u4f1a\u6a21\u7cca&#xff1b;\u5982\u679c\u8bbe\u7f6e cacheWidth: 4000&#xff0c;\u5219\u5b8c\u5168\u6ca1\u6709\u9650\u5236\u5185\u5b58\u3002<\/p>\n<h4>\u4e60\u98985&#xff08;\u5355\u9009&#xff09;<\/h4>\n<p>ImageCache \u7684\u9ed8\u8ba4 maximumSizeBytes \u662f&#xff1a;<\/p>\n<p>A. 10MB B. 50MB C. 100MB D. 500MB<\/p>\n<p>\u53c2\u8003\u7b54\u6848&#xff1a;C<\/p>\n<p>\u89e3\u8bfb&#xff1a; ImageCache \u7684\u7c7b\u6587\u6863\u660e\u786e\u5199\u9053&#xff1a;\u201cImplements a least-recently-used cache of up to 1000 images, and up to 100 MB\u201d\u3002\u8fd9\u4e2a 100MB \u662f\u201c\u7f13\u5b58\u4e2d\u7684\u56fe\u7247\u201d\u7684\u5b57\u8282\u4e0a\u9650&#xff0c;\u5b83\u4e0d\u7ea6\u675f live \u56fe\u7247&#xff08;\u6b63\u5728\u88ab\u76d1\u542c\u6216\u88ab precacheImage \u9489\u4f4f\u7684\u56fe\u7247&#xff09;\u3002\u7406\u89e3\u8fd9\u4e00\u70b9\u662f\u6392\u67e5\u201c\u7f13\u5b58\u6ca1\u8d85\u4f46\u5185\u5b58\u8d85\u4e86\u201d\u7684\u5173\u952e\u3002<\/p>\n<h4>\u4e60\u98986&#xff08;\u591a\u9009&#xff09;<\/h4>\n<p>\u5173\u4e8e ImageCache \u7684 live \u5f15\u7528&#xff0c;\u4ee5\u4e0b\u8bf4\u6cd5\u6b63\u786e\u7684\u662f&#xff1a;<\/p>\n<p>A. \u4e00\u5f20\u56fe\u7247\u5728\u81f3\u5c11\u6709\u4e00\u4e2a\u76d1\u542c\u8005\u65f6\u88ab\u8ba4\u4e3a\u662f live \u7684 B. live \u56fe\u7247\u4e0d\u53d7 maximumSizeBytes \u7684\u9a71\u9010\u7ea6\u675f C. precacheImage \u4f1a\u5728 Future \u5b8c\u6210\u524d\u4fdd\u6301\u76d1\u542c\u8005&#xff0c;\u5c06\u56fe\u7247\u9489\u5728\u5185\u5b58\u4e2d D. clear() \u65b9\u6cd5\u4f1a\u540c\u65f6\u6e05\u9664 live \u5f15\u7528<\/p>\n<p>\u53c2\u8003\u7b54\u6848&#xff1a;A\u3001B\u3001C<\/p>\n<p>\u89e3\u8bfb&#xff1a; A \u6765\u81ea ImageCache \u6587\u6863\u5bf9 live \u7684\u5b9a\u4e49&#xff1a;\u201cAn image is considered live if its ImageStreamCompleter\u2019s listener count has never dropped to zero after adding at least one listener\u201d\u3002B \u662f\u6b63\u786e\u7684&#xff1a;LRU \u7684\u5b57\u8282\u4e0a\u9650\u7ba1\u7684\u662f\u7f13\u5b58\u6761\u76ee&#xff0c;live \u56fe\u7247\u53ef\u4ee5\u7ed5\u8fc7\u5b83&#xff1b;precacheImage \u7684\u8b66\u544a\u201c\u5373\u4f7f\u5b83\u672c\u6765\u4e0d\u9002\u5408\u7f13\u5b58\u201d\u6b63\u662f\u8fd9\u4e2a\u673a\u5236\u7684\u8868\u73b0\u3002C \u662f\u6b63\u786e\u7684&#xff1a;precacheImage \u5728 Future \u5b8c\u6210\u4e4b\u524d\u4f1a\u4fdd\u6301\u76d1\u542c\u8005\u3002D \u662f\u9519\u8bef\u7684&#xff1a;clear() \u9a71\u9010\u7684\u662f pending \u548c keepAlive \u6761\u76ee&#xff1b;\u8981\u6e05\u9664 live \u5f15\u7528&#xff0c;\u9700\u8981\u4f7f\u7528 clearLiveImages()\u3002<\/p>\n<h4>\u4e60\u98987&#xff08;\u5224\u65ad&#xff09;<\/h4>\n<p>cacheWidth \u548c ResizeImage \u5bf9\u6240\u6709\u56fe\u7247\u683c\u5f0f\u90fd\u6709\u6548&#xff0c;\u5305\u62ec\u52a8\u753b GIF \u548c WebP\u3002<\/p>\n<p>\u53c2\u8003\u7b54\u6848&#xff1a;\u9519\u8bef<\/p>\n<p>\u89e3\u8bfb&#xff1a; \u5f15\u64ce\u7684 PR \u660e\u786e\u6307\u51fa&#xff1a;\u201ccacheWidth\/cacheHeight \u548c ResizeImage \u5bf9\u52a8\u753b GIF\u3001WebP \u548c APNG \u56fe\u7247\u6ca1\u6709\u6548\u679c&#xff0c;\u8fd9\u662f\u9ad8\u5185\u5b58\u5360\u7528\u7684\u4e00\u4e2a\u5e38\u89c1\u6765\u6e90&#xff08;\u4f8b\u5982\u52a8\u753b\u8d34\u7eb8\u7684\u7f51\u683c&#xff09;\u201d\u3002\u8fd9\u610f\u5473\u7740\u5728\u52a8\u753b\u56fe\u7247\u573a\u666f\u4e2d&#xff0c;\u5373\u4f7f\u4ee3\u7801\u4e2d\u5199\u4e86 cacheWidth&#xff0c;\u89e3\u7801\u4ecd\u7136\u6309\u539f\u59cb\u5c3a\u5bf8\u8fdb\u884c&#xff0c;\u5185\u5b58\u9650\u5236\u53c2\u6570\u662f\u9759\u9ed8\u5931\u6548\u7684\u3002\u4fee\u590d\u65b9\u5411\u4e0d\u662f\u5728\u5ba2\u6237\u7aef\u8c03\u6574\u53c2\u6570\u503c&#xff0c;\u800c\u662f\u4ece\u6e90\u5c3a\u5bf8&#xff08;\u670d\u52a1\u7aef\u7f29\u7565\u56fe&#xff09;\u548c\u6570\u91cf\u63a7\u5236\u5165\u624b\u3002<\/p>\n<h4>\u4e60\u98988&#xff08;\u573a\u666f\u5206\u6790&#xff09;<\/h4>\n<p>\u4e00\u4e2a ListView.builder \u6eda\u52a8\u6d4f\u89c8 200 \u5f20\u9ad8\u6e05\u56fe\u7247&#xff0c;\u6bcf\u5f20\u56fe\u7247\u6e90\u5c3a\u5bf8 2000\u00d72000&#xff08;\u89e3\u7801\u7ea6 16MB&#xff09;\u3002\u5f00\u53d1\u8005\u4f7f\u7528\u4e86 ListView.builder&#xff08;\u61d2\u52a0\u8f7d&#xff09;&#xff0c;\u4f46\u6eda\u52a8\u8fc7\u7a0b\u4e2d\u5185\u5b58\u6301\u7eed\u4e0a\u5347&#xff0c;\u6700\u7ec8 OOM\u3002\u8bf7\u89e3\u91ca\u4e3a\u4ec0\u4e48\u61d2\u52a0\u8f7d\u6ca1\u6709\u963b\u6b62 OOM&#xff0c;\u5e76\u7ed9\u51fa\u81f3\u5c11\u4e24\u4e2a\u4fee\u590d\u65b9\u5411\u3002<\/p>\n<p>\u53c2\u8003\u7b54\u6848&#xff1a; \u61d2\u52a0\u8f7d&#xff08;ListView.builder&#xff09;\u53ea\u4fdd\u8bc1\u5c4f\u5e55\u5916\u7684\u5217\u8868\u9879\u4e0d\u88ab\u6784\u5efa&#xff0c;\u5b83\u4e0d\u8d1f\u8d23\u6e05\u7406 ImageCache \u4e2d\u5df2\u7ecf\u89e3\u7801\u7684\u56fe\u7247\u3002\u5f53\u56fe\u7247\u8fdb\u5165\u89c6\u53e3\u65f6&#xff0c;\u5b83\u4eec\u88ab\u89e3\u7801\u5e76\u8fdb\u5165 ImageCache&#xff1b;\u5f53\u5217\u8868\u9879\u6eda\u51fa\u89c6\u53e3\u65f6&#xff0c;Widget \u88ab\u9500\u6bc1&#xff0c;\u4f46\u56fe\u7247\u4f5c\u4e3a\u975e live \u6761\u76ee\u7559\u5728\u7f13\u5b58\u4e2d&#xff0c;\u76f4\u5230 LRU \u8fbe\u5230 100MB \u4e0a\u9650\u624d\u5f00\u59cb\u9a71\u9010\u3002\u5728\u6eda\u52a8\u8fc7\u7a0b\u4e2d&#xff0c;\u7f13\u5b58\u4e0d\u65ad\u7d2f\u79ef&#xff0c;\u800c 200 \u5f20\u56fe\u7247\u7684\u7d2f\u8ba1\u89e3\u7801\u5185\u5b58&#xff08;\u7ea6 3.2GB&#xff09;\u8fdc\u8d85 100MB&#xff0c;OOM \u5728\u8fbe\u5230\u9a71\u9010\u5e73\u8861\u4e4b\u524d\u5c31\u4f1a\u53d1\u751f\u3002\u6b64\u5916&#xff0c;\u5982\u679c\u5355\u5f20\u56fe\u7247\u7684 16MB \u63a5\u8fd1\u4f46\u4e0d\u8d85\u8fc7\u4e0a\u9650&#xff0c;\u7f13\u5b58\u4f1a\u9891\u7e41\u6296\u52a8\u3002\u4fee\u590d\u65b9\u5411&#xff1a;\u5bf9\u6bcf\u5f20\u56fe\u7247\u4f7f\u7528 cacheWidth\/cacheHeight \u5c06\u89e3\u7801\u5c3a\u5bf8\u9650\u5236\u5230\u663e\u793a\u5c3a\u5bf8&#xff08;\u4f8b\u5982 400\u00d7400&#xff0c;\u89e3\u7801\u7ea6 640KB&#xff09;&#xff0c;\u4f7f 200 \u5f20\u56fe\u7247\u7684\u603b\u89e3\u7801\u5185\u5b58\u53ef\u63a7&#xff1b;\u51cf\u5c0f cacheExtent \u4ee5\u964d\u4f4e\u9884\u52a0\u8f7d\u6570\u91cf&#xff1b;\u5982\u679c\u56fe\u7247\u786e\u5b9e\u9700\u8981\u8f83\u5927\u663e\u793a\u5c3a\u5bf8&#xff0c;\u8003\u8651\u964d\u4f4e ImageCache.maximumSizeBytes \u5e76\u63a5\u53d7\u66f4\u9891\u7e41\u7684\u91cd\u65b0\u89e3\u7801&#xff0c;\u6216\u8005\u4f7f\u7528\u5206\u9875\/\u6309\u9700\u52a0\u8f7d\u907f\u514d\u4e00\u6b21\u6027\u52a0\u8f7d\u8fc7\u591a\u56fe\u7247\u3002<\/p>\n<h4>\u4e60\u98989&#xff08;\u5355\u9009&#xff09;<\/h4>\n<p>precacheImage \u7684\u4e3b\u8981\u5185\u5b58\u98ce\u9669\u662f&#xff1a;<\/p>\n<p>A. \u5b83\u4f1a\u5728\u78c1\u76d8\u4e0a\u7f13\u5b58\u56fe\u7247&#xff0c;\u5360\u7528\u5b58\u50a8\u7a7a\u95f4 B. \u5b83\u4f1a\u5728 Future \u5b8c\u6210\u524d\u4fdd\u6301\u76d1\u542c\u8005&#xff0c;\u5c06\u56fe\u7247\u9489\u5728\u5185\u5b58\u4e2d&#xff0c;\u53ef\u80fd\u7ed5\u8fc7 LRU \u7684\u9a71\u9010 C. \u5b83\u4f1a\u5f3a\u5236\u6240\u6709\u56fe\u7247\u4ee5\u539f\u59cb\u5c3a\u5bf8\u89e3\u7801 D. \u5b83\u4f1a\u7981\u7528 ImageCache \u7684 LRU \u673a\u5236<\/p>\n<p>\u53c2\u8003\u7b54\u6848&#xff1a;B<\/p>\n<p>\u89e3\u8bfb&#xff1a; precacheImage \u7684\u6587\u6863\u660e\u786e\u8b66\u544a&#xff1a;\u201cThe image will remain pinned in memory at least until the caller removes its listener from the stream, even if it would not otherwise fit into the cache. Callers should be cautious about pinning large images or a large number of images in memory, as this can result in running out of memory\u201d\u3002A \u9519\u8bef&#xff1a;precacheImage \u9884\u53d6\u7684\u662f\u5185\u5b58\u7f13\u5b58&#xff0c;\u4e0d\u662f\u78c1\u76d8\u7f13\u5b58\u3002C \u4e0d\u51c6\u786e&#xff1a;precacheImage \u53ef\u4ee5\u901a\u8fc7 ResizeImage \u7b49 provider \u9650\u5236\u89e3\u7801\u5c3a\u5bf8&#xff0c;\u4f46\u5b83\u672c\u8eab\u4e0d\u5f3a\u5236\u539f\u59cb\u5c3a\u5bf8\u3002D \u9519\u8bef&#xff1a;\u5b83\u4e0d\u201c\u7981\u7528\u201dLRU&#xff0c;\u4f46 live \u5f15\u7528\u53ef\u4ee5\u7ed5\u8fc7 LRU \u7684\u9a71\u9010\u3002<\/p>\n<h4>\u4e60\u989810&#xff08;\u591a\u9009&#xff09;<\/h4>\n<p>\u4ee5\u4e0b\u54ea\u4e9b\u63aa\u65bd\u53ef\u4ee5\u6709\u6548\u964d\u4f4e ListView \u4e2d\u56fe\u7247\u7684\u5cf0\u503c\u5185\u5b58&#xff1f;<\/p>\n<p>A. \u4e3a\u6bcf\u5f20\u56fe\u7247\u8bbe\u7f6e\u57fa\u4e8e\u663e\u793a\u5c3a\u5bf8\u548c DPR \u7684 cacheWidth\/cacheHeight B. \u51cf\u5c0f cacheExtent&#xff0c;\u964d\u4f4e\u9884\u52a0\u8f7d\u7684\u56fe\u7247\u6570\u91cf C. \u5bf9\u56fe\u7247\u8bbe\u7f6e keepAlive: true&#xff0c;\u786e\u4fdd\u56fe\u7247\u4e0d\u4f1a\u91cd\u65b0\u89e3\u7801 D. \u907f\u514d\u5bf9\u5217\u8868\u4e2d\u7684\u5927\u56fe\u6279\u91cf\u8c03\u7528 precacheImage<\/p>\n<p>\u53c2\u8003\u7b54\u6848&#xff1a;A\u3001B\u3001D<\/p>\n<p>\u89e3\u8bfb&#xff1a; A \u662f\u6839\u672c\u6027\u7684&#xff1a;\u9650\u5236\u89e3\u7801\u5c3a\u5bf8\u76f4\u63a5\u964d\u4f4e\u6bcf\u5f20\u56fe\u7247\u7684\u5185\u5b58\u6210\u672c\u3002B \u662f\u6b63\u786e\u7684&#xff1a;\u66f4\u5c0f\u7684 cacheExtent \u610f\u5473\u7740\u66f4\u5c11\u7684\u56fe\u7247\u540c\u65f6\u5904\u4e8e\u201c\u5df2\u6784\u5efa\/\u5df2\u89e3\u7801\u201d\u72b6\u6001\u3002D \u662f\u6b63\u786e\u7684&#xff1a;precacheImage \u4f1a\u5c06\u56fe\u7247\u9489\u4f4f&#xff0c;\u589e\u52a0 live \u56fe\u7247\u6570\u91cf&#xff0c;\u5728\u5217\u8868\u4e2d\u5e94\u5f53\u907f\u514d\u3002C \u662f\u9519\u8bef\u7684&#xff1a;keepAlive: true \u4f1a\u8ba9\u56fe\u7247\u5728\u6eda\u51fa\u89c6\u53e3\u540e\u4ecd\u7136\u88ab\u4fdd\u7559&#xff0c;\u589e\u52a0\u5185\u5b58\u5360\u7528&#xff0c;\u4e0e\u201c\u964d\u4f4e\u5cf0\u503c\u5185\u5b58\u201d\u7684\u76ee\u6807\u76f8\u53cd&#xff1b;\u53ea\u6709\u5728\u201c\u5c0f\u5c3a\u5bf8\u3001\u9891\u7e41\u6eda\u56de\u3001\u91cd\u65b0\u89e3\u7801\u6210\u672c\u9ad8\u201d\u7684\u7279\u5b9a\u573a\u666f\u4e2d\u624d\u8003\u8651\u4f7f\u7528\u3002<\/p>\n<h4>\u4e60\u989811&#xff08;\u7b80\u7b54&#xff09;<\/h4>\n<p>\u8bf7\u89e3\u91ca\u201c\u6587\u4ef6\u5927\u5c0f\u201d\u548c\u201c\u89e3\u7801\u5185\u5b58\u201d\u4e3a\u4ec0\u4e48\u6ca1\u6709\u76f4\u63a5\u5173\u7cfb&#xff0c;\u5e76\u7ed9\u51fa\u4e00\u4e2a\u5177\u4f53\u7684\u6570\u5b57\u4f8b\u5b50\u3002<\/p>\n<p>\u53c2\u8003\u7b54\u6848&#xff1a; \u6587\u4ef6\u5927\u5c0f\u662f\u56fe\u7247\u7ecf\u8fc7\u538b\u7f29&#xff08;JPEG\u3001PNG\u3001WebP \u7b49\u683c\u5f0f&#xff09;\u540e\u7684\u5b57\u8282\u6570&#xff0c;\u5b83\u53d6\u51b3\u4e8e\u538b\u7f29\u7b97\u6cd5\u548c\u56fe\u7247\u5185\u5bb9\u7684\u590d\u6742\u5ea6\u3002\u89e3\u7801\u5185\u5b58\u662f\u56fe\u7247\u88ab\u5c55\u5f00\u4e3a\u50cf\u7d20\u77e9\u9635\u540e\u7684\u5b57\u8282\u6570&#xff0c;\u5b83\u53d6\u51b3\u4e8e\u50cf\u7d20\u7ef4\u5ea6&#xff08;\u5bbd\u5ea6 \u00d7 \u9ad8\u5ea6&#xff09;\u548c\u6bcf\u50cf\u7d20\u7684\u5b57\u8282\u6570&#xff08;Flutter \u4e2d\u4e3a 4 \u5b57\u8282&#xff0c;RGBA&#xff09;\u3002\u4e00\u5f20 4000\u00d73000 \u7684 JPEG \u5728\u78c1\u76d8\u4e0a\u53ef\u80fd\u53ea\u6709\u7ea6 2MB&#xff08;\u9ad8\u538b\u7f29\u7387&#xff09;&#xff0c;\u4f46\u89e3\u7801\u540e\u5360\u7528 4000 \u00d7 3000 \u00d7 4 \u2248 48MB\u3002\u4e00\u5f20\u7eaf\u8272\u7684 4000\u00d73000 PNG \u5728\u78c1\u76d8\u4e0a\u53ef\u80fd\u53ea\u6709\u51e0\u5341 KB&#xff0c;\u89e3\u7801\u540e\u4ecd\u7136\u662f 48MB\u3002\u6587\u4ef6\u5927\u5c0f\u548c\u89e3\u7801\u5185\u5b58\u4e4b\u95f4\u6ca1\u6709\u56fa\u5b9a\u7684\u6362\u7b97\u5173\u7cfb&#xff1b;\u51b3\u5b9a\u5185\u5b58\u7684\u662f\u89e3\u7801\u5c3a\u5bf8&#xff0c;\u800c\u4e0d\u662f\u6587\u4ef6\u5927\u5c0f\u3002<\/p>\n<h4>\u4e60\u989812&#xff08;\u573a\u666f\u8bbe\u8ba1&#xff09;<\/h4>\n<p>\u4e00\u4e2a\u56fe\u7247\u67e5\u770b\u5668\u9875\u9762\u5141\u8bb8\u7528\u6237\u5de6\u53f3\u6ed1\u52a8\u67e5\u770b\u9ad8\u6e05\u56fe\u7247&#xff0c;\u6bcf\u5f20\u56fe\u7247\u6e90\u5c3a\u5bf8 3000\u00d73000&#xff08;\u89e3\u7801\u7ea6 36MB&#xff09;&#xff0c;\u5e76\u4e14\u4f7f\u7528 PageView \u540c\u65f6\u4fdd\u7559\u76f8\u90bb\u9875\u9762\u7684\u56fe\u7247\u3002\u5f53\u524d\u9875\u52a0\u4e0a\u524d\u540e\u5404\u4e00\u9875&#xff0c;\u540c\u65f6\u6709 3 \u5f20\u56fe\u7247 live&#xff0c;\u5408\u8ba1\u7ea6 108MB&#xff0c;\u8d85\u8fc7\u4e86 ImageCache \u7684 100MB \u9ed8\u8ba4\u4e0a\u9650&#xff0c;\u4f46\u4ecd\u7136\u53d1\u751f OOM\u3002\u8bf7\u5206\u6790\u539f\u56e0\u5e76\u8bbe\u8ba1\u4fee\u590d\u65b9\u6848\u3002<\/p>\n<p>\u53c2\u8003\u7b54\u6848&#xff1a; \u539f\u56e0&#xff1a;PageView \u9ed8\u8ba4\u4f1a\u4fdd\u7559\u76f8\u90bb\u9875\u9762&#xff08;\u53d6\u51b3\u4e8e allowImplicitScrolling \u548c PageView \u7684\u7f13\u5b58\u884c\u4e3a&#xff09;&#xff0c;\u4f7f 3 \u5f20\u56fe\u7247\u540c\u65f6\u5904\u4e8e live \u72b6\u6001\u3002ImageCache \u7684 100MB \u4e0a\u9650\u53ea\u7ea6\u675f\u7f13\u5b58\u4e2d\u7684\u975e live \u6761\u76ee&#xff1b;3 \u5f20 live \u56fe\u7247\u5408\u8ba1 108MB&#xff0c;\u4e0d\u53d7 LRU \u9a71\u9010&#xff0c;\u56e0\u6b64\u53ef\u4ee5\u5408\u6cd5\u5730\u8d85\u8fc7\u4e0a\u9650\u5e76\u89e6\u53d1 OOM\u3002\u6b64\u5916&#xff0c;\u6bcf\u5f20\u56fe\u7247\u7684 36MB \u867d\u7136\u5c0f\u4e8e 100MB&#xff0c;\u4f46\u5982\u679c ImageCache \u4e2d\u8fd8\u6709\u5176\u4ed6\u7f13\u5b58\u56fe\u7247&#xff0c;\u603b\u5185\u5b58\u4f1a\u66f4\u9ad8\u3002\u4fee\u590d\u65b9\u6848&#xff1a;\u4e3a\u67e5\u770b\u5668\u4e2d\u7684\u56fe\u7247\u8bbe\u7f6e cacheWidth\/cacheHeight&#xff0c;\u4f7f\u89e3\u7801\u5c3a\u5bf8\u63a5\u8fd1\u5c4f\u5e55\u7269\u7406\u5c3a\u5bf8&#xff08;\u4f8b\u5982 1080\u00d72400 \u7684\u5c4f\u5e55&#xff0c;\u89e3\u7801\u7ea6 10MB\/\u5f20&#xff09;&#xff0c;\u5c06 3 \u5f20 live \u56fe\u7247\u7684\u603b\u5185\u5b58\u964d\u5230 30MB \u5de6\u53f3&#xff1b;\u5982\u679c\u7528\u6237\u9700\u8981\u7f29\u653e\u67e5\u770b\u5168\u5206\u8fa8\u7387\u7ec6\u8282&#xff0c;\u53ef\u4ee5\u5728\u7f29\u653e\u65f6\u6309\u9700\u52a0\u8f7d\u66f4\u9ad8\u5206\u8fa8\u7387\u7684\u7248\u672c&#xff0c;\u800c\u4e0d\u662f\u5728\u6ed1\u52a8\u9636\u6bb5\u5c31\u89e3\u7801\u5168\u5c3a\u5bf8&#xff1b;\u51cf\u5c11 PageView \u7684\u9884\u4fdd\u7559\u9875\u6570&#xff08;\u5982\u679c\u4e1a\u52a1\u5141\u8bb8&#xff09;&#xff1b;\u5728\u9875\u9762\u9000\u51fa\u65f6\u5bf9\u67e5\u770b\u5668\u4f7f\u7528\u7684\u56fe\u7247\u8c03\u7528 evict&#xff0c;\u663e\u5f0f\u91ca\u653e\u3002<\/p>\n<h4>\u4e60\u989813&#xff08;\u5224\u65ad&#xff09;<\/h4>\n<p>\u589e\u5927 ImageCache.maximumSizeBytes \u662f\u89e3\u51b3\u5927\u56fe OOM \u7684\u63a8\u8350\u9996\u9009\u65b9\u6848\u3002<\/p>\n<p>\u53c2\u8003\u7b54\u6848&#xff1a;\u9519\u8bef<\/p>\n<p>\u89e3\u8bfb&#xff1a; Flutter \u7684 breaking change \u660e\u786e\u53cd\u5bf9\u8fd9\u4e00\u505a\u6cd5&#xff1a;\u201c\u4e0d\u518d\u81ea\u52a8\u589e\u5927 ImageCache \u7684 maxByteSize \u6765\u5bb9\u7eb3\u5927\u56fe\u201d&#xff0c;\u56e0\u4e3a\u201c\u8fd9\u6709\u65f6\u5bfc\u81f4 maxByteSize \u81a8\u80c0&#xff0c;\u4f7f\u5185\u5b58\u53d7\u9650\u7684\u7cfb\u7edf\u66f4\u96be\u5de5\u4f5c\u201d\u3002\u8fc1\u79fb\u6307\u5357\u7684\u65b9\u5411\u662f\u201c\u8c03\u6574\u56fe\u7247\u52a0\u8f7d\u903b\u8f91&#xff0c;\u786e\u4fdd\u56fe\u7247\u80fd\u5408\u9002\u5730\u653e\u5165\u4f60\u9009\u62e9\u7684 maxByteSize\u201d&#xff0c;\u800c\u4e0d\u662f\u8ba9\u7f13\u5b58\u9002\u5e94\u5927\u56fe\u3002\u589e\u5927\u7f13\u5b58\u4e0a\u9650\u4f1a\u5ef6\u8fdf OOM \u7684\u53d1\u751f&#xff0c;\u4f46\u4e0d\u4f1a\u964d\u4f4e\u6bcf\u5f20\u56fe\u7247\u7684\u5185\u5b58\u6210\u672c&#xff1b;\u5728\u4f4e\u7aef\u8bbe\u5907\u4e0a&#xff0c;\u66f4\u5927\u7684\u7f13\u5b58\u53cd\u800c\u4f1a\u6324\u538b\u5176\u4ed6\u5185\u5b58\u9700\u6c42\u3002\u6b63\u786e\u7684\u9996\u9009\u662f\u9650\u5236\u89e3\u7801\u5c3a\u5bf8&#xff0c;\u8ba9\u56fe\u7247\u5728\u8f83\u5c0f\u7684\u5185\u5b58\u5360\u7528\u4e0b\u80fd\u591f\u8212\u9002\u5730\u8fdb\u5165\u7f13\u5b58\u3002<\/p>\n<h4>\u4e60\u989814&#xff08;\u7b80\u7b54&#xff09;<\/h4>\n<p>\u8bf7\u6bd4\u8f83 Image \u7684 width\/height\u3001cacheWidth\/cacheHeight \u548c ResizeImage \u4e09\u8005\u5728\u56fe\u7247\u5185\u5b58\u7ba1\u7406\u4e2d\u7684\u89d2\u8272\u5dee\u5f02\u3002<\/p>\n<p>\u53c2\u8003\u7b54\u6848&#xff1a; width\/height &#xff1a;\u5e03\u5c40\u5c5e\u6027&#xff0c;\u4f7f\u7528\u903b\u8f91\u50cf\u7d20&#xff0c;\u5f71\u54cd\u56fe\u7247\u5728\u5c4f\u5e55\u4e0a\u7684\u7ed8\u5236\u5c3a\u5bf8\u548c\u6240\u5360\u7684\u5e03\u5c40\u7a7a\u95f4\u3002\u5b83\u4eec\u4e0d\u6539\u53d8\u89e3\u7801\u5c3a\u5bf8&#xff0c;\u56e0\u6b64\u4e0d\u76f4\u63a5\u964d\u4f4e\u5185\u5b58\u3002cacheWidth\/cacheHeight &#xff1a;\u89e3\u7801\u5c5e\u6027&#xff0c;\u4f7f\u7528\u7269\u7406\u50cf\u7d20&#xff0c;\u6307\u793a\u5f15\u64ce\u5728\u89e3\u7801\u65f6\u5c06\u56fe\u7247\u7f29\u5c0f\u5230\u6307\u5b9a\u5c3a\u5bf8\u3002\u5b83\u4eec\u76f4\u63a5\u964d\u4f4e ImageCache \u7684\u5185\u5b58\u5360\u7528\u548c\u89e3\u7801\u540e\u7684\u50cf\u7d20\u6570\u636e\u91cf\u3002ResizeImage &#xff1a;ImageProvider \u5c42\u9762\u7684\u5305\u88c5\u5668&#xff0c;\u4e0e cacheWidth\/cacheHeight \u662f\u540c\u4e00\u89e3\u7801\u673a\u5236&#xff0c;\u9002\u7528\u4e8e\u9700\u8981\u4f20\u9012 ImageProvider \u800c\u4e0d\u662f\u76f4\u63a5\u6784\u9020 Image \u7684\u573a\u666f&#xff08;\u5982 DecorationImage\u3001FadeInImage&#xff09;\u3002\u4e09\u8005\u7684\u5173\u7cfb\u662f&#xff1a;width\/height \u7ba1\u201c\u753b\u591a\u5927\u201d&#xff0c;cacheWidth\/cacheHeight \u548c ResizeImage \u7ba1\u201c\u89e3\u7801\u591a\u5927\u201d&#xff1b;\u5185\u5b58\u7531\u540e\u8005\u51b3\u5b9a&#xff0c;\u89c6\u89c9\u5c3a\u5bf8\u7531\u524d\u8005\u51b3\u5b9a\u3002\u4e00\u4e2a\u5e38\u89c1\u7684\u9519\u8bef\u662f\u53ea\u8bbe\u7f6e\u524d\u8005\u800c\u5ffd\u7565\u540e\u8005&#xff0c;\u5bfc\u81f4\u201c\u753b\u5f97\u5c0f\u4f46\u5185\u5b58\u5927\u201d\u3002<\/p>\n<h4>\u4e60\u989815&#xff08;\u7b80\u7b54&#xff09;<\/h4>\n<p>\u8bf7\u8bbe\u8ba1\u4e00\u4e2a\u6392\u67e5 Flutter \u56fe\u7247 OOM \u7684\u6b65\u9aa4\u5e8f\u5217&#xff0c;\u8981\u6c42\u8986\u76d6\u201c\u8ba1\u7b97\u7406\u8bba\u5185\u5b58\u201d\u201c\u533a\u5206\u7f13\u5b58\u4e0e live\u201d\u201c\u68c0\u67e5\u52a8\u753b\u683c\u5f0f\u201d\u548c\u201c\u9a8c\u8bc1\u4fee\u590d\u201d\u56db\u4e2a\u73af\u8282\u3002<\/p>\n<p>\u53c2\u8003\u7b54\u6848&#xff1a; \u7b2c\u4e00\u6b65&#xff0c;\u8ba1\u7b97\u7406\u8bba\u5185\u5b58&#xff1a; \u5bf9\u6000\u7591\u9875\u9762\u4e2d\u7684\u6bcf\u4e00\u5f20\u56fe\u7247&#xff0c;\u627e\u5230\u6e90\u50cf\u7d20\u5c3a\u5bf8&#xff0c;\u8ba1\u7b97 \u5bbd\u5ea6 \u00d7 \u9ad8\u5ea6 \u00d7 4 \u5b57\u8282&#xff1b;\u4e58\u4ee5\u201c\u540c\u65f6\u53ef\u89c1\u6570\u91cf &#043; cacheExtent \u9884\u52a0\u8f7d\u6570\u91cf &#043; \u53ef\u80fd\u88ab precacheImage \u9489\u4f4f\u7684\u6570\u91cf\u201d\u3002\u5982\u679c\u603b\u548c\u63a5\u8fd1\u6216\u8d85\u8fc7\u8bbe\u5907\u56fe\u7247\u5185\u5b58\u9884\u7b97&#xff0c;OOM \u7684\u98ce\u9669\u662f\u53ef\u8ba1\u7b97\u7684\u3002\u7b2c\u4e8c\u6b65&#xff0c;\u533a\u5206\u7f13\u5b58\u4e0e live&#xff1a; \u5728 DevTools Memory \u89c6\u56fe\u4e2d\u8bb0\u5f55\u6eda\u52a8\u524d\u540e\u7684\u5185\u5b58\u5feb\u7167&#xff1b;\u68c0\u67e5 imageCache.currentSizeBytes&#xff08;\u7f13\u5b58\u5b57\u8282\u6570&#xff09;\u548c imageCache.liveImageCount&#xff08;live \u56fe\u7247\u6570&#xff09;\u3002\u5982\u679c liveImageCount \u9ad8&#xff0c;\u68c0\u67e5 precacheImage \u8c03\u7528\u548c\u624b\u52a8 ImageStreamCompleterHandle&#xff1b;\u5982\u679c currentSizeBytes \u63a5\u8fd1 100MB&#xff0c;\u8bf4\u660e\u7f13\u5b58\u5df2\u6ee1&#xff0c;\u9700\u8981\u7f29\u5c0f\u89e3\u7801\u5c3a\u5bf8\u6216\u51cf\u5c0f cacheExtent\u3002\u7b2c\u4e09\u6b65&#xff0c;\u68c0\u67e5\u52a8\u753b\u683c\u5f0f&#xff1a; \u786e\u8ba4\u56fe\u7247\u662f\u5426\u4e3a GIF\/WebP\/APNG\u3002\u5982\u679c\u662f&#xff0c;cacheWidth\/cacheHeight \u548c ResizeImage \u4e0d\u751f\u6548&#xff1b;\u68c0\u67e5\u6e90\u5c3a\u5bf8\u662f\u5426\u63a5\u8fd1\u663e\u793a\u5c3a\u5bf8&#xff0c;\u5982\u679c\u8fdc\u5927\u4e8e&#xff0c;\u9700\u8981\u670d\u52a1\u7aef\u7f29\u7565\u56fe\u6216\u51cf\u5c11\u540c\u65f6\u53ef\u89c1\u6570\u91cf\u3002\u7b2c\u56db\u6b65&#xff0c;\u9a8c\u8bc1\u4fee\u590d&#xff1a; \u5728\u4f4e\u7aef Android \u771f\u673a\u4e0a\u3001Profile \u6a21\u5f0f\u4e0b&#xff0c;\u6eda\u52a8\u9875\u9762\u5e76\u89c2\u5bdf\u5185\u5b58\u66f2\u7ebf\u3002\u4fee\u590d\u540e&#xff0c;\u7406\u8bba\u89e3\u7801\u5185\u5b58\u5e94\u663e\u8457\u4e0b\u964d&#xff08;\u901a\u8fc7 cacheWidth\/cacheHeight \u6216 ResizeImage&#xff09;&#xff0c;liveImageCount \u5e94\u5728\u9884\u671f\u8303\u56f4\u5185&#xff08;\u6ca1\u6709\u88ab\u610f\u5916\u9489\u4f4f\u7684\u56fe\u7247&#xff09;&#xff0c;\u5185\u5b58\u66f2\u7ebf\u5728\u6eda\u52a8\u540e\u5e94\u80fd\u591f\u56de\u843d\u5230\u4e00\u4e2a\u7a33\u5b9a\u6c34\u5e73&#xff0c;\u800c\u4e0d\u662f\u6301\u7eed\u4e0a\u5347\u3002<\/p>\n<h3>\u516b\u3001\u672c\u8282\u8bfe\u77e5\u8bc6\u8981\u70b9\u603b\u7ed3<\/h3>\n<li>\n<p>\u56fe\u7247\u5185\u5b58\u7531\u89e3\u7801\u5c3a\u5bf8\u51b3\u5b9a&#xff0c;\u4e0d\u7531\u6587\u4ef6\u5927\u5c0f\u51b3\u5b9a\u3002\u4e00\u5f20 2MB \u7684 JPEG \u89e3\u7801\u540e\u53ef\u80fd\u5360\u7528 48MB\u3002Flutter \u4ee5\u672a\u538b\u7f29\u5f62\u5f0f\u5b58\u50a8\u56fe\u7247\u4ee5\u4fbf\u6e32\u67d3&#xff0c;\u6bcf\u4e2a\u50cf\u7d20\u5360 4 \u5b57\u8282&#xff08;RGBA&#xff09;&#xff1b;\u5bbd\u5ea6 \u00d7 \u9ad8\u5ea6 \u00d7 4 \u662f\u4f30\u7b97\u89e3\u7801\u5185\u5b58\u7684\u8d77\u70b9\u3002<\/p>\n<\/li>\n<li>\n<p>width\/height \u662f\u5e03\u5c40\u5c3a\u5bf8&#xff0c;cacheWidth\/cacheHeight \u662f\u89e3\u7801\u5c3a\u5bf8\u3002\u524d\u8005\u4f7f\u7528\u903b\u8f91\u50cf\u7d20&#xff0c;\u4e0d\u6539\u53d8\u89e3\u7801\u884c\u4e3a&#xff1b;\u540e\u8005\u4f7f\u7528\u7269\u7406\u50cf\u7d20&#xff0c;\u76f4\u63a5\u51b3\u5b9a\u89e3\u7801\u540e\u7684\u50cf\u7d20\u77e9\u9635\u5927\u5c0f\u3002\u6b63\u786e\u7684\u6362\u7b97\u662f cacheWidth &#061; \u5e03\u5c40\u903b\u8f91\u5bbd\u5ea6 \u00d7 devicePixelRatio&#xff1b;\u53ea\u8bbe\u7f6e width\/height \u4e0d\u4f1a\u964d\u4f4e\u5185\u5b58\u3002<\/p>\n<\/li>\n<li>\n<p>ImageCache \u7684 LRU \u53ea\u7ea6\u675f\u201c\u7f13\u5b58\u201d&#xff0c;\u4e0d\u7ea6\u675f\u201clive\u201d \u3002\u9ed8\u8ba4\u4e0a\u9650\u662f 1000 \u5f20\u548c 100MB&#xff0c;\u4f46\u6b63\u5728\u88ab\u76d1\u542c\u3001\u88ab precacheImage \u9489\u4f4f\u6216\u88ab ImageStreamCompleterHandle \u6301\u6709\u7684\u56fe\u7247\u662f live \u7684&#xff0c;\u53ef\u4ee5\u5408\u6cd5\u5730\u7ed5\u8fc7\u5b57\u8282\u4e0a\u9650\u3002clear() \u6e05\u9664\u7f13\u5b58\u6761\u76ee&#xff0c;clearLiveImages() \u624d\u6e05\u9664 live \u5f15\u7528\u3002<\/p>\n<\/li>\n<li>\n<p>precacheImage \u662f\u4e00\u628a\u53cc\u5203\u5251\u3002\u5b83\u51cf\u5c11\u52a0\u8f7d\u95ea\u70c1&#xff0c;\u4f46\u4f1a\u5728 Future \u5b8c\u6210\u524d\u4fdd\u6301\u76d1\u542c\u8005&#xff0c;\u5c06\u56fe\u7247\u9489\u5728\u5185\u5b58\u4e2d&#xff0c;\u5373\u4f7f\u56fe\u7247\u4e0d\u9002\u5408\u7f13\u5b58\u3002\u53ea\u5e94\u5bf9\u5c11\u91cf\u5173\u952e\u5c0f\u56fe\u4f7f\u7528&#xff0c;\u5e76\u914d\u5408 cacheWidth\/cacheHeight&#xff1b;\u4e0d\u8981\u5bf9\u9ad8\u6e05\u5927\u56fe\u6216\u5927\u91cf\u56fe\u7247\u6279\u91cf\u9884\u52a0\u8f7d\u3002<\/p>\n<\/li>\n<li>\n<p>ListView.builder \u7684\u61d2\u6784\u5efa\u4e0d\u7b49\u4e8e\u56fe\u7247\u5185\u5b58\u91ca\u653e\u3002\u5217\u8868\u9879\u88ab\u9500\u6bc1\u65f6&#xff0c;\u56fe\u7247\u4ece live \u53d8\u4e3a\u975e live \u5e76\u8fdb\u5165 ImageCache \u7684 LRU&#xff1b;\u5728\u6eda\u52a8\u8fc7\u7a0b\u4e2d&#xff0c;\u7f13\u5b58\u4f1a\u6301\u7eed\u7d2f\u79ef\u76f4\u5230\u8fbe\u5230 100MB \u4e0a\u9650\u3002cacheExtent \u63a7\u5236\u9884\u52a0\u8f7d\u6570\u91cf&#xff0c;keepAlive \u4f1a\u963b\u6b62\u56fe\u7247\u5728\u6eda\u51fa\u89c6\u53e3\u540e\u88ab\u91ca\u653e&#xff0c;\u4e24\u8005\u90fd\u9700\u8981\u6839\u636e\u56fe\u7247\u5c3a\u5bf8\u548c\u5217\u8868\u7528\u9014\u5ba1\u614e\u914d\u7f6e\u3002<\/p>\n<\/li>\n<li>\n<p>\u52a8\u753b GIF\/WebP\/APNG \u662f cacheWidth\/ResizeImage \u7684\u9759\u9ed8\u5931\u6548\u533a\u3002\u8fd9\u4e9b\u683c\u5f0f\u7684\u89e3\u7801\u5c3a\u5bf8\u53c2\u6570\u5f53\u524d\u4e0d\u751f\u6548&#xff0c;\u52a8\u753b\u8d34\u7eb8\u7f51\u683c\u662f OOM \u7684\u5e38\u89c1\u6765\u6e90\u3002\u4fee\u590d\u65b9\u5411\u662f\u670d\u52a1\u7aef\u7f29\u5c0f\u6e90\u5c3a\u5bf8\u3001\u51cf\u5c11\u540c\u65f6\u53ef\u89c1\u7684\u52a8\u753b\u6570\u91cf\u3001\u907f\u514d\u5bf9\u52a8\u753b\u56fe\u7247 precacheImage&#xff0c;\u800c\u4e0d\u662f\u5728\u5ba2\u6237\u7aef\u7ee7\u7eed\u8c03\u6574\u65e0\u6548\u7684\u53c2\u6570\u3002<\/p>\n<\/li>\n<li>\n<p>\u5927\u4e8e maximumSizeBytes \u7684\u56fe\u7247\u4e0d\u4f1a\u88ab\u7f13\u5b58&#xff0c;\u6bcf\u6b21\u8fdb\u5165\u89c6\u53e3\u90fd\u9700\u8981\u91cd\u65b0\u89e3\u7801&#xff0c;\u9020\u6210\u5185\u5b58\u952f\u9f7f\u548c CPU \u6296\u52a8\u3002Flutter \u5df2\u4e0d\u518d\u81ea\u52a8\u589e\u5927\u7f13\u5b58\u4e0a\u9650\u6765\u5bb9\u7eb3\u5927\u56fe&#xff1b;\u6b63\u786e\u7684\u65b9\u5411\u662f\u7f29\u5c0f\u89e3\u7801\u5c3a\u5bf8&#xff0c;\u8ba9\u56fe\u7247\u80fd\u591f\u8212\u9002\u5730\u653e\u5165\u7f13\u5b58&#xff0c;\u800c\u4e0d\u662f\u8ba9\u7f13\u5b58\u81a8\u80c0\u3002<\/p>\n<\/li>\n<li>\n<p>\u6392\u67e5\u7684\u987a\u5e8f\u662f\u201c\u5148\u7b97&#xff0c;\u518d\u770b&#xff0c;\u540e\u6539\u201d &#xff1a;\u5148\u8ba1\u7b97\u7406\u8bba\u89e3\u7801\u5185\u5b58\u548c\u5b58\u6d3b\u6570\u91cf&#xff0c;\u5224\u65ad\u98ce\u9669\u662f\u5426\u53ef\u8ba1\u7b97&#xff1b;\u5728 DevTools \u4e2d\u533a\u5206\u7f13\u5b58\u3001live \u9489\u4f4f\u548c Widget \u6cc4\u6f0f&#xff1b;\u68c0\u67e5\u52a8\u753b\u683c\u5f0f\u662f\u5426\u8ba9\u5c3a\u5bf8\u53c2\u6570\u5931\u6548&#xff1b;\u6700\u540e\u5728\u4f4e\u7aef\u771f\u673a\u3001Profile \u6a21\u5f0f\u4e0b\u9a8c\u8bc1\u4fee\u590d\u3002\u9884\u9632\u7684\u6838\u5fc3\u662f\u8ba9\u6bcf\u4e00\u5f20 Image \u90fd\u56de\u7b54\u201c\u89e3\u7801\u5c3a\u5bf8\u662f\u591a\u5c11\u201d&#xff0c;\u5e76\u628a cacheWidth\/cacheHeight \u4f5c\u4e3a\u9ed8\u8ba4\u5ba1\u67e5\u9879\u3002<\/p>\n<\/li>\n<h3>\u4e5d\u3001\u4e0b\u8282\u8bfe\u9884\u544a<\/h3>\n<p>\u7b2c13\u8bfe&#xff1a;TextStyle \u91cd\u590d\u521b\u5efa\u5751&#xff5c;\u6837\u5f0f\u53cd\u590d\u5b9e\u4f8b\u5316&#xff0c;\u4e0d\u5fc5\u8981\u91cd\u7ed8\u9690\u60a3<\/p>\n<p>\u4e0b\u4e00\u8bfe\u5c06\u4ece\u201c\u56fe\u7247\u7684\u50cf\u7d20\u5185\u5b58\u201d\u8f6c\u5411\u201c\u6587\u672c\u7684\u6837\u5f0f\u5bf9\u8c61\u201d&#xff1a;TextStyle \u5728 Flutter \u4e2d\u662f\u4e00\u4e2a\u4e0d\u53ef\u53d8\u7684\u914d\u7f6e\u5bf9\u8c61&#xff0c;\u4f46\u5b83\u7684\u76f8\u7b49\u6027\u6bd4\u8f83\u3001\u7ee7\u627f\u5408\u5e76\u548c\u91cd\u590d\u521b\u5efa\u4f1a\u5728\u6bcf\u4e00\u5e27\u7684\u6587\u672c\u5e03\u5c40\u548c\u7ed8\u5236\u4e2d\u4ea7\u751f\u9690\u6027\u6210\u672c\u3002\u4f60\u5c06\u770b\u5230&#xff1a;\u4e3a\u4ec0\u4e48\u5728 build \u4e2d\u6bcf\u6b21\u521b\u5efa TextStyle(fontSize: 16, color: Colors.black) \u4e0d\u4e00\u5b9a\u5bfc\u81f4\u91cd\u7ed8\u3001\u4f46\u5728\u67d0\u4e9b\u6761\u4ef6\u4e0b\u4f1a\u963b\u6b62 RichText \u7684 RenderParagraph \u590d\u7528\u5e03\u5c40\u7ed3\u679c&#xff1b;DefaultTextStyle \u548c Theme.of(context).textTheme \u5982\u4f55\u901a\u8fc7 InheritedWidget \u63d0\u4f9b\u7a33\u5b9a\u7684\u6837\u5f0f\u5f15\u7528&#xff1b;TextStyle.merge \u548c copyWith \u5728\u4ec0\u4e48\u60c5\u51b5\u4e0b\u4f1a\u4ea7\u751f\u201c\u76f8\u7b49\u4f46\u4e0d\u76f8\u540c\u201d\u7684\u5bf9\u8c61&#xff1b;\u4ee5\u53ca\u5982\u4f55\u533a\u5206\u201c\u6837\u5f0f\u5bf9\u8c61\u88ab\u91cd\u65b0\u521b\u5efa\u201d\u548c\u201c\u6587\u672c\u5e03\u5c40\u88ab\u91cd\u65b0\u8ba1\u7b97\u201d\u3002\u56fe\u7247\u5185\u5b58\u5751\u662f\u201c\u89e3\u7801\u5c3a\u5bf8\u4e0e\u663e\u793a\u5c3a\u5bf8\u5931\u914d\u201d&#xff0c;TextStyle \u91cd\u590d\u521b\u5efa\u662f\u201c\u6837\u5f0f\u5bf9\u8c61\u7684\u8eab\u4efd\u4e0e\u5185\u5bb9\u5931\u914d\u201d\u2014\u2014\u4e24\u8005\u90fd\u6307\u5411\u540c\u4e00\u4e2a\u8ba4\u77e5&#xff1a;Flutter \u7684\u8fd0\u884c\u65f6\u6210\u672c\u7531\u5bf9\u8c61\u7684\u5b9e\u9645\u4f7f\u7528\u65b9\u5f0f\u51b3\u5b9a&#xff0c;\u800c\u4e0d\u662f\u7531\u4ee3\u7801\u7684\u89c6\u89c9\u7b80\u6d01\u6027\u51b3\u5b9a\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6458\u8981&#xff1a;\u672c\u6587\u805a\u7126 Flutter \u56fe\u7247\u5185\u5b58\u95ee\u9898&#xff0c;\u6307\u51fa\u56fe\u7247\u5185\u5b58\u7531\u300c\u89e3\u7801\u5c3a\u5bf8 \u00d7 \u5b58\u6d3b\u6570\u91cf\u300d\u51b3\u5b9a&#xff0c;\u800c\u975e\u78c1\u76d8\u6587\u4ef6\u5927\u5c0f\u2014\u2014\u4e00\u5f20 2MB \u7684 JPEG \u89e3\u7801\u540e\u53ef\u80fd\u5360\u7528 48MB\u3002\u6587\u7ae0\u5148\u5256\u6790\u56db\u79cd\u201c\u65e0\u7ea6\u675f\u89e3\u7801\u201d\u59ff\u6001&#xff08;\u6587\u4ef6\u5927\u5c0f\u4e0e\u89e3\u7801\u5185\u5b58\u8131\u94a9\u3001cacheWidth\/cacheHeight \u7684\u7269\u7406\u50cf\u7d20\u9677\u9631\u3001ImageCache \u7684 live \u4f8b\u5916\u3001\u52a8\u753b\u56fe\u7247\u5c3a\u5bf8\u53c2\u6570\u5931\u6548&#xff09;&#xff0c;\u518d\u4ece\u89e3\u7801\u653e\u5927\u3001\u53c2\u6570\u4f5c\u7528\u70b9\u3001LRU \u8fb9\u754c\u3001\u61d2\u6784<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[6323,84,2878,1680,4052],"topic":[],"class_list":["post-120775","post","type-post","status-publish","format-standard","hentry","category-server","tag-dart","tag-android","tag-flutter","tag-ios","tag-4052"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u3010Flutter\u8e29\u5751\u6392\u96f7\u3011\u7b2c12\u8bfe\uff1a\u56fe\u7247\u5185\u5b58\u5751\uff5c\u5927\u56fe\u65e0\u7ea6\u675f\u52a0\u8f7d\uff0cOOM\u5185\u5b58\u6ea2\u51fa\u6392\u67e5\u4fee\u590d - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/120775.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u3010Flutter\u8e29\u5751\u6392\u96f7\u3011\u7b2c12\u8bfe\uff1a\u56fe\u7247\u5185\u5b58\u5751\uff5c\u5927\u56fe\u65e0\u7ea6\u675f\u52a0\u8f7d\uff0cOOM\u5185\u5b58\u6ea2\u51fa\u6392\u67e5\u4fee\u590d - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"\u6458\u8981&#xff1a;\u672c\u6587\u805a\u7126 Flutter \u56fe\u7247\u5185\u5b58\u95ee\u9898&#xff0c;\u6307\u51fa\u56fe\u7247\u5185\u5b58\u7531\u300c\u89e3\u7801\u5c3a\u5bf8 \u00d7 \u5b58\u6d3b\u6570\u91cf\u300d\u51b3\u5b9a&#xff0c;\u800c\u975e\u78c1\u76d8\u6587\u4ef6\u5927\u5c0f\u2014\u2014\u4e00\u5f20 2MB \u7684 JPEG \u89e3\u7801\u540e\u53ef\u80fd\u5360\u7528 48MB\u3002\u6587\u7ae0\u5148\u5256\u6790\u56db\u79cd\u201c\u65e0\u7ea6\u675f\u89e3\u7801\u201d\u59ff\u6001&#xff08;\u6587\u4ef6\u5927\u5c0f\u4e0e\u89e3\u7801\u5185\u5b58\u8131\u94a9\u3001cacheWidth\/cacheHeight \u7684\u7269\u7406\u50cf\u7d20\u9677\u9631\u3001ImageCache \u7684 live \u4f8b\u5916\u3001\u52a8\u753b\u56fe\u7247\u5c3a\u5bf8\u53c2\u6570\u5931\u6548&#xff09;&#xff0c;\u518d\u4ece\u89e3\u7801\u653e\u5927\u3001\u53c2\u6570\u4f5c\u7528\u70b9\u3001LRU \u8fb9\u754c\u3001\u61d2\u6784\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/120775.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-11-01T02:48:37+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"23 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/120775.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/120775.html\",\"name\":\"\u3010Flutter\u8e29\u5751\u6392\u96f7\u3011\u7b2c12\u8bfe\uff1a\u56fe\u7247\u5185\u5b58\u5751\uff5c\u5927\u56fe\u65e0\u7ea6\u675f\u52a0\u8f7d\uff0cOOM\u5185\u5b58\u6ea2\u51fa\u6392\u67e5\u4fee\u590d - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-11-01T02:48:37+00:00\",\"dateModified\":\"2026-11-01T02:48:37+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/120775.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/120775.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/120775.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u3010Flutter\u8e29\u5751\u6392\u96f7\u3011\u7b2c12\u8bfe\uff1a\u56fe\u7247\u5185\u5b58\u5751\uff5c\u5927\u56fe\u65e0\u7ea6\u675f\u52a0\u8f7d\uff0cOOM\u5185\u5b58\u6ea2\u51fa\u6392\u67e5\u4fee\u590d\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u3010Flutter\u8e29\u5751\u6392\u96f7\u3011\u7b2c12\u8bfe\uff1a\u56fe\u7247\u5185\u5b58\u5751\uff5c\u5927\u56fe\u65e0\u7ea6\u675f\u52a0\u8f7d\uff0cOOM\u5185\u5b58\u6ea2\u51fa\u6392\u67e5\u4fee\u590d - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/120775.html","og_locale":"zh_CN","og_type":"article","og_title":"\u3010Flutter\u8e29\u5751\u6392\u96f7\u3011\u7b2c12\u8bfe\uff1a\u56fe\u7247\u5185\u5b58\u5751\uff5c\u5927\u56fe\u65e0\u7ea6\u675f\u52a0\u8f7d\uff0cOOM\u5185\u5b58\u6ea2\u51fa\u6392\u67e5\u4fee\u590d - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"\u6458\u8981&#xff1a;\u672c\u6587\u805a\u7126 Flutter \u56fe\u7247\u5185\u5b58\u95ee\u9898&#xff0c;\u6307\u51fa\u56fe\u7247\u5185\u5b58\u7531\u300c\u89e3\u7801\u5c3a\u5bf8 \u00d7 \u5b58\u6d3b\u6570\u91cf\u300d\u51b3\u5b9a&#xff0c;\u800c\u975e\u78c1\u76d8\u6587\u4ef6\u5927\u5c0f\u2014\u2014\u4e00\u5f20 2MB \u7684 JPEG \u89e3\u7801\u540e\u53ef\u80fd\u5360\u7528 48MB\u3002\u6587\u7ae0\u5148\u5256\u6790\u56db\u79cd\u201c\u65e0\u7ea6\u675f\u89e3\u7801\u201d\u59ff\u6001&#xff08;\u6587\u4ef6\u5927\u5c0f\u4e0e\u89e3\u7801\u5185\u5b58\u8131\u94a9\u3001cacheWidth\/cacheHeight \u7684\u7269\u7406\u50cf\u7d20\u9677\u9631\u3001ImageCache \u7684 live \u4f8b\u5916\u3001\u52a8\u753b\u56fe\u7247\u5c3a\u5bf8\u53c2\u6570\u5931\u6548&#xff09;&#xff0c;\u518d\u4ece\u89e3\u7801\u653e\u5927\u3001\u53c2\u6570\u4f5c\u7528\u70b9\u3001LRU \u8fb9\u754c\u3001\u61d2\u6784","og_url":"https:\/\/www.wsisp.com\/helps\/120775.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-11-01T02:48:37+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"23 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/120775.html","url":"https:\/\/www.wsisp.com\/helps\/120775.html","name":"\u3010Flutter\u8e29\u5751\u6392\u96f7\u3011\u7b2c12\u8bfe\uff1a\u56fe\u7247\u5185\u5b58\u5751\uff5c\u5927\u56fe\u65e0\u7ea6\u675f\u52a0\u8f7d\uff0cOOM\u5185\u5b58\u6ea2\u51fa\u6392\u67e5\u4fee\u590d - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-11-01T02:48:37+00:00","dateModified":"2026-11-01T02:48:37+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/120775.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/120775.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/120775.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"\u3010Flutter\u8e29\u5751\u6392\u96f7\u3011\u7b2c12\u8bfe\uff1a\u56fe\u7247\u5185\u5b58\u5751\uff5c\u5927\u56fe\u65e0\u7ea6\u675f\u52a0\u8f7d\uff0cOOM\u5185\u5b58\u6ea2\u51fa\u6392\u67e5\u4fee\u590d"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/120775","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=120775"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/120775\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=120775"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=120775"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=120775"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=120775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}