K60至尊版狂暴引擎2.0加持：超177萬跑分斬獲性能第一
Redmi的后性能時代戰略發布會今天下午如期舉辦，在本次發布會上，Redmi公布了多項關于和聯發科的深度合作，以及新機K60 Ultra在軟件和硬件方面的特性，例如：“K60 至尊版，雙芯旗艦
TextDecoder[1] API 是一個用于將二進制數據（通常是 ArrayBuffer 或 TypedArray）解碼為字符串的 JavaScript API。它是 Web 平臺的一部分，主要用于處理文本編碼的解碼工作。比如，從服務器接收到的流式數據、文件數據等。
在處理 Web 應用中的二進制數據時，通常需要將這些數據轉換為可讀的字符串格式。TextDecoder 提供了一種高效且便捷的方法來實現這一點。
TextDecoder API 有以下特點：
下面我們將介紹 TextDecoder API 的四種使用場景：
// 創建一個包含 UTF-8 編碼文本的 Uint8Arrayconst uint8Array = new Uint8Array([72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]);// 創建一個 TextDecoder 實例，默認使用 UTF-8 編碼const decoder = new TextDecoder('utf-8');// 將 Uint8Array 解碼為字符串const decodedString = decoder.decode(uint8Array);console.log(decodedString); // 輸出 "Hello World"// 使用不同的編碼創建 TextDecoder 實例const utf16Decoder = new TextDecoder('utf-16');const iso88591Decoder = new TextDecoder('iso-8859-1');// 示例二進制數據const utf16Array = new Uint16Array([0x0048, 0x0065, 0x006C, 0x006C, 0x006F]);const iso88591Array = new Uint8Array([72, 101, 108, 108, 111]);// 解碼為字符串const utf16String = utf16Decoder.decode(utf16Array);const iso88591String = iso88591Decoder.decode(iso88591Array);console.log(utf16String); // 輸出 "Hello"console.log(iso88591String); // 輸出 "Hello"首先，我們先來看一下效果：
圖片
在以上的示例中，我們使用 Node.js 的 http 模塊，快速搭建一個本地 SSE[2]（Server-Sent Events）服務器。
server.js
const http = require("http");const PORT = 3000;const server = http.createServer((req, res) => { if (req.url === "/sse") { res.writeHead(200, { "Content-Type": "text/event-stream", "Cache-Control": "no-cache", Connection: "keep-alive", "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept", }); let id = 1; const interval = setInterval(() => { const data = { id: id, message: `This is message ${id}`, timestamp: +new Date(), }; res.write(`data: ${JSON.stringify(data)}/n/n`); // 停止條件 if (id == 5) { res.write("event: end/n"); res.write("data: End of stream/n/n"); clearInterval(interval); res.end(); } id++; }, 1000); req.on("close", () => { clearInterval(interval); }); } else { res.writeHead(404, { "Content-Type": "text/plain" }); res.end("404 Not Found"); }});server.listen(PORT, () => { console.log(`Server is running on http://localhost:${PORT}`);});需要注意的是，在 sse 接口中，我們設置 Content-Type 響應頭的類型為： "text/event-stream"，告訴客戶端我們返回的是流式數據。
index.html
??：訪問 index.html 網頁前，記得運行 node server.js 命令先啟動 SSE 服務器。
<!-- public/index.html --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SSE & TextDecoder</title></head><body> <h1>Decode Server-Sent Events JSON Stream Data</h1> <div id="messages"></div> <script src="client.js"></script></body></html>client.js
document.addEventListener("DOMContentLoaded", () => { const messagesDiv = document.querySelector("#messages"); const textDecoder = new TextDecoder("utf-8"); fetch("http://localhost:3000/sse").then((response) => { const reader = response.body.getReader(); return new ReadableStream({ start(controller) { function push() { reader.read().then(({ done, value }) => { if (done) { controller.close(); return; } const chunk = textDecoder.decode(value, { stream: true }); const lines = chunk.split("/n"); for (const line of lines) { if (line.startsWith("data: ")) { const json = line.slice(6); const data = JSON.parse(json); const p = document.createElement("p"); p.textContent = `ID: ${data.id}, Message: ${data.message}, Timestamp: ${data.timestamp}`; messagesDiv.appendChild(p); } else if (line.startsWith("event: end")) { const p = document.createElement("p"); p.textContent = "End of stream"; messagesDiv.appendChild(p); return; } } push(); }); } push(); }, }); });});SSE 事件流是一個簡單的文本數據流，文本是使用 UTF-8 格式的編碼。所以，在創建 textDecoder 對象時，我們需要設置它的編碼為 utf-8。有了 textDecoder 對象后，調用它提供的 decode 方法就可以進行解碼了。
當遇到傳輸大 JSON 數據的時候，如果使用傳統的方式，我們需要接收完整的 JSON 數據后，才能開始進行數據處理，這對用戶體驗會造成一定的影響。為了解決這個問題，我們可以使用一些現成的 JSON Stream 解析庫。比如，@streamparser/json[3]，該庫內部也使用了本文介紹的 TextDecoder API。
下面，我們先來看一下效果：
上圖中輸出的 JSON 數據來自以下的 large.json 文件。我們對該文件按照 0.5KB 的大小進行切割，然后每個 500ms 發送下一個數據塊。利用 @streamparser/json 這個庫，我們實現了解析 JSON 數據流（JSON Chunk）的功能。
large.json
[ {}, { "image": [ { "shape": "rect", "fill": "#333", "stroke": "#999", "x": 0.5e1, "y": 0.5, "z": 0.8, "w": 0.5e5, "u": 2e10, "foo": 2e1, "bar": 2, "width": 47, "height": 47 } ], "corners": { "1": true, "3": true, "7": true, "9": true } }, ...]json-server.js
const http = require("http");const { join } = require("path");const { readFileSync } = require("fs");const PORT = 3000;const largeJson = readFileSync(join(__dirname, "large.json")).toString();const server = http.createServer((req, res) => { if (req.url === "/stream-json") { res.writeHead(200, { "Content-Type": "application/json", "Cache-Control": "no-cache", Connection: "keep-alive", "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept", }); const CHUNK_SIZE = 512; // 每塊 0.5KB let position = 0; const interval = setInterval(() => { const chunk = largeJson.slice(position, position + CHUNK_SIZE); res.write(chunk); position += CHUNK_SIZE; if (position >= largeJson.length) { clearInterval(interval); res.end(); } }, 500); // 每 500ms 發送一塊數據 req.on("close", () => { clearInterval(interval); }); } else { res.writeHead(404, { "Content-Type": "text/plain" }); res.end("404 Not Found"); }});server.listen(PORT, () => { console.log(`Server is running on http://localhost:${PORT}`);});stream-json.html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Stream JSON</title> </head> <body> <h1>Stream JSON</h1> <div id="messages"></div> <script type="module"> import { JSONParser } from "https://cdn.jsdelivr.net/npm/@streamparser/json-whatwg@0.0.21/+esm"; const messagesDiv = document.querySelector("#messages"); document.addEventListener("DOMContentLoaded", async () => { const parser = new JSONParser(); const response = await fetch("http://localhost:3000/stream-json"); const reader = response.body.pipeThrough(parser).getReader(); while (true) { const { done, value: parsedElementInfo } = await reader.read(); if (done) break; const { value, key, parent, stack, partial } = parsedElementInfo; if (partial) { console.log(`Parsing value: ${value}... (still parsing)`); } else { const p = document.createElement("p"); p.textContent = `${JSON.stringify(value)}`; messagesDiv.appendChild(p); console.log(`Value parsed: ${JSON.stringify(value)}`); } } }); </script> </body></html>@streamparser/json 這個庫還有其他的用法，如果你感興趣的話，可以看一下它的使用文檔。
參考資料
[1]TextDecoder: https://developer.mozilla.org/zh-CN/docs/Web/API/TextDecoder
[2]SSE: https://developer.mozilla.org/zh-CN/docs/Web/API/Server-sent_events
[3]@streamparser/json: https://www.npmjs.com/package/@streamparser/json
本文鏈接：http://m.www897cc.com/showinfo-26-88708-0.html高效傳輸大的 JSON 數據，流式處理真香！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號