Download of large files slow in Blink engine browsers (Chrome, Edge)

[stefanfis]

In my app I'm dealing with large data sets. I learned that with StreamSaver.js downloading is rather slow on Chrome compared to Safari. I've done some tests on macOS and Windows. The downloaded payload consists of 1 million lines, each 100 bytes long, resulting in a 100MB file.

macOS Big Sur (MacBook Air M1)
Chrome: 76s
Safari: 17s

Windows 10 (Ryzen 3600)
Chrome: 90s
Edge: 131s

On macOS I did also tests with 10MB files, where Chrome took about 8s and Safari downloaded instantly. All those download times were taken manually.

Trying to find out what takes that long, I measured the time between createWriteStream and stream closing as can be seen in this code:

    let startTime = new Date().getTime()
    let fileStream = streamSaver.createWriteStream('test.txt')
    let writer = fileStream.getWriter()
    for( let i = 0; i < payload.length; ++i ) {
        let output_row = payload[i]+"\n"
        writer.write(new TextEncoder().encode(output_row))
    };
    writer.close()
    let endTime = new Date().getTime()

The differences were modest, Safari needed about 1 second, Chrome about 2.

I even wrote my own simple implementation of a service worker downloader where the download isn't streamed. Chrome now downloads 100MB within less than a second.

Do you have any ideas why downloading takes so long, especially on Chrome?