Web Streams API 是一種高效處理流式數(shù)據(jù)的標(biāo)準(zhǔn)接口，主要包括ReadableStream、WritableStream 和TransformStream 三種流類(lèi)型，適用於大文件上傳、實(shí)時(shí)音視頻處理等場(chǎng)景。其優(yōu)勢(shì)在於可分塊處理數(shù)據(jù)，減少內(nèi)存佔(zhàn)用並提升響應(yīng)速度。使用時(shí)通常結(jié)合Fetch API 或文件讀取實(shí)現(xiàn)流式操作，如邊下載邊解析JSON，或邊讀取邊上傳文件。實(shí)際應(yīng)用包括文件上傳優(yōu)化、數(shù)據(jù)解析提速和實(shí)時(shí)音視頻處理。注意事項(xiàng)包括檢查瀏覽器兼容性、完善錯(cuò)誤處理、合理控制背壓及及時(shí)關(guān)閉流以避免資源洩漏。

H5 的Web Streams API 是現(xiàn)代前端處理數(shù)據(jù)流的一種高效方式，尤其在處理大文件、實(shí)時(shí)傳輸或需要分塊處理的場(chǎng)景下表現(xiàn)突出。相比傳統(tǒng)的整體加載再處理的方式，使用流式處理可以更早地開(kāi)始處理數(shù)據(jù)，減少內(nèi)存佔(zhàn)用，提高應(yīng)用響應(yīng)速度。

什麼是Web Streams API？

Web Streams API 提供了一種標(biāo)準(zhǔn)的方式來(lái)處理流式數(shù)據(jù)。它主要包括三種類(lèi)型的流：

• ReadableStream ：可讀流，用於從某個(gè)源頭讀取數(shù)據(jù)。
• WritableStream ：可寫(xiě)流，用於將數(shù)據(jù)寫(xiě)入某個(gè)目標(biāo)。
• TransformStream ：轉(zhuǎn)換流，連接可讀和可寫(xiě)部分，可以在數(shù)據(jù)流動(dòng)過(guò)程中對(duì)其進(jìn)行轉(zhuǎn)換。

這些流支持異步操作，並允許你按需處理數(shù)據(jù)塊（chunks），而不是一次性加載全部?jī)?nèi)容。這在H5 應(yīng)用中特別有用，比如上傳大文件、實(shí)時(shí)視頻解碼、解析JSON 流等。

如何在H5 中使用流式處理？

在H5 頁(yè)面中使用Web Streams API，通常會(huì)結(jié)合Fetch API 或者本地文件讀取來(lái)實(shí)現(xiàn)流式數(shù)據(jù)處理。

使用fetch 獲取流式數(shù)據(jù)

fetch('https://example.com/large-data.json')
  .then(response => {
    const reader = response.body.getReader();

    return new ReadableStream({
      start(controller) {
        function push() {
          reader.read().then(({ done, value }) => {
            if (done) {
              controller.close();
              return;
            }
            controller.enqueue(value);
            push();
          });
        }
        push();
      }
    });
  })
  .then(stream => {
    // 可以對(duì)stream 進(jìn)行進(jìn)一步處理，比如通過(guò)TransformStream 解析JSON
  });

這種方式可以讓你一邊下載一邊處理數(shù)據(jù)，而不是等待整個(gè)文件下載完成後再開(kāi)始解析。

實(shí)際應(yīng)用場(chǎng)景有哪些？

文件上傳優(yōu)化

在上傳大文件時(shí)，使用WritableStream 可以邊讀取邊上傳，避免一次性將整個(gè)文件加載到內(nèi)存中。

 const writer = someWritableStream.getWriter();

fileInput.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();

  let position = 0;
  const chunkSize = 1024 * 1024; // 每次讀取1MB

  while (position < file.size) {
    reader.readAsArrayBuffer(file.slice(position, position chunkSize));
    await new Promise(r => reader.onload = r);
    await writer.write(reader.result);
    position = chunkSize;
  }

  writer.close();
});

數(shù)據(jù)解析提速

對(duì)於JSON 大文件，傳統(tǒng)做法是等到整個(gè)文件下載完再JSON.parse() ，但使用TransformStream 可以實(shí)現(xiàn)邊接收邊解析，提前獲取部分?jǐn)?shù)據(jù)展示。

實(shí)時(shí)音視頻處理

H5 配合WebRTC 或媒體錄製API 時(shí)，可以通過(guò)流式接口將音頻或視頻數(shù)據(jù)逐步處理、壓縮或上傳。

常見(jiàn)問(wèn)題與註意事項(xiàng)

• 瀏覽器兼容性：主流現(xiàn)代瀏覽器都已支持Web Streams API，但在使用前建議檢查是否兼容你的目標(biāo)環(huán)境。
• 錯(cuò)誤處理要完善：由於流是異步的，務(wù)必為每個(gè)環(huán)節(jié)添加.catch()或try/catch，防止靜默失敗。
• 背壓控制：當(dāng)生產(chǎn)速度遠(yuǎn)大於消費(fèi)速度時(shí)，可能會(huì)出現(xiàn)緩衝堆積，TransformStream 和WritableStream 支持自動(dòng)背壓控制機(jī)制，合理使用可以提升穩(wěn)定性。
• 流關(guān)閉時(shí)機(jī)：記得調(diào)用controller.close()或writer.close()來(lái)結(jié)束流，否則可能導(dǎo)致資源洩漏。

基本上就這些。 Web Streams API 雖然功能強(qiáng)大，但理解它的基本模型之後，使用起來(lái)並不復(fù)雜，只是很多細(xì)節(jié)容易忽略。

以上是H5 Web流api用於有效的數(shù)據(jù)處理的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！