Re: [w3c/ServiceWorker] cache.add will block the main thread, such as network bandwidth? (Issue #1650)

I have a very simple example here. [example](https://mamumu123.github.io/sw-test/)
First of all, I copied this repo（ https://github.com/mdn/sw-test ）, it was very smooth.
Next, I made some changes. I add  1000 pictures(or more) in 'cache.add',   When reloading, then i  found that the main thread is block.

![截屏2022-07-15 上午9 30 37](https://user-images.githubusercontent.com/19382362/179130931-ddb3f433-3d18-4adf-aa57-f4a88d4d2cd1.png)


```js
+const lotList = [];
+for (let index = 1; index < 1000; index++) {
+  lotList.push(`/sw-test/gallery/${index}.jpg`);
+}
+
 const putInCache = async (request, response) => {
   const cache = await caches.open('v1');
   await cache.put(request, response);
@@ -69,6 +74,7 @@ self.addEventListener('install', (event) => {
       '/sw-test/gallery/bountyHunters.jpg',
       '/sw-test/gallery/myLittleVader.jpg',
       '/sw-test/gallery/snowTroopers.jpg',
+      ...lotList,
     ])
   );
 });
```

step: 
step1： add 1000 image,
step2: tick ‘update on reload’
step3: reload
Then, the above problem will recur

-- 
Reply to this email directly or view it on GitHub:
https://github.com/w3c/ServiceWorker/issues/1650#issuecomment-1185088690

You are receiving this because you are subscribed to this thread.

Message ID: <w3c/ServiceWorker/issues/1650/1185088690@github.com>