streams-demo-streaming-element-backpressure-isvalid.html (1849B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Streaming element with backpressure demo</title> 4 5 <script src="transforms/transform-stream-polyfill.js"></script> 6 <script src="transforms/text-encode-transform.js"></script> 7 <script src="tags/streaming-element-backpressure.js"></script> 8 <script src="resources/highlight.pack.js"></script> 9 <script src="resources/web-animations.min.js"></script> 10 <script src="tags/view-source.js"></script> 11 12 <link rel=stylesheet href="resources/common.css"> 13 <link rel=stylesheet href="resources/jank-meter.css"> 14 <link rel=stylesheet href="resources/commits.css"> 15 16 <h1>Streaming element with backpressure demo</h1> 17 <a id=back-to-index href=index.html>Back to demo index</a> 18 <view-source></view-source> 19 20 <div id=buttons> 21 <button id="load">Load HTML stream, applying backpressure</button> 22 <button id="reset">Reset</button> 23 </div> 24 25 <div id=jank-meter>JANK METER</div> 26 27 <streaming-element-backpressure id=target></streaming-element-backpressure> 28 29 <script> 30 'use strict'; 31 const loadButton = document.querySelector('#load'); 32 const resetButton = document.querySelector('#reset'); 33 const targetDiv = document.querySelector('#target'); 34 35 loadButton.onclick = async () => { 36 loadButton.disabled = true; 37 fetchDirectlyIntoDOM(); 38 }; 39 40 // BEGIN SOURCE TO VIEW 41 async function fetchDirectlyIntoDOM() { 42 const response = await fetch('data/commits.include', 43 { 44 mode: 'same-origin', 45 headers: { 46 'Cache-Control': 'no-cache, no-store' 47 } 48 }); 49 50 await response.body 51 .pipeThrough(new TextDecoder()) 52 .pipeTo(targetDiv.writable); 53 } 54 // END SOURCE TO VIEW 55 56 resetButton.onclick = () => { 57 targetDiv.reset(); 58 loadButton.disabled = false; 59 }; 60 </script>