Learning Weekly-2025-01-12

Monitor Request Progress

AJAX进度监控【渡一教育】_哔哩哔哩_bilibili

Monitor the progress of the request by listening to the progress event of xhr:

xhr.addEventListener('progress', (e)=>{
  console.log(e.loaded, e.total)
})

• e.loaded: The amount of data currently available.
• e.total: The total amount of data.

Monitor the progress of the fetch request:

const main = async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');

  const total = res.headers.get('content-length');
  let body = '';
  const decoder = new TextDecoder();
  let loaded = 0;

  const reader = res.body?.getReader();
  if (!reader) {
    return;
  }

  while (true) {
    const { done, value } = await reader.read();
    if (done) {
      break;
    }
    body += decoder.decode(value);
    loaded += value.length;
    console.log(`Loaded ${loaded} of ${total}`);
  }

  console.log(body);
};

Memory Leaks Caused by Free Node

游离节点造成的内存泄露【渡一教育】_哔哩哔哩_bilibili[Performance tab] nodes leaking on focus [41403456] - Chromium The last focused input node will not be GC. There maybe a big problem if this node is a complex rich-text editor. The resolution: when destroy this node, create and focus a new input element, and then destroy it.

Dynamic loading for supported image format

MDN logo

Lastest browser support the avif image that better than webp and png. However, considering some older browser still don't support it, dynamic loading is required.

Dynamic loading by <source>:

<picture>
  <source
    srcset="test.avif"
    type="image/avif"
    media="(min-width: 1000px)"
    width="1000"
    height="400" />
  <source
    srcset="test.webp"
    type="image/webp"
    media="(min-width: 1000px)"
    width="1000"
    height="400" />
  <img
    src="test.png"
    alt="当浏览器不支持来源时使用的图片"
    width="1000"
    height="400"  />
</picture>