MutationObserver

提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品,该功能是DOM3 Events规范的一部分。

Intersection Observer

异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。

  • 图片懒加载——当图片滚动到可见时才进行加载
  • 内容无限滚动——也就是用户滚动到接近内容底部时直接加载更多,而无需用户操作翻页,给用户一种网页可以无限滚动的错觉
  • 检测广告的曝光情况——为了计算广告收益,需要知道广告元素的曝光情况
  • 在用户看见某个区域时执行任务或播放动画

requestIdleCallback

将在浏览器的空闲时段内调用的函数排队。这使开发者能够在主事件循环上执行后台和低优先级工作,而不会影响延迟关键事件,如动画和输入响应

img 和 iframe 的loading属性

  • auto: Default lazy-loading behavior of the browser, which is the same as not including the attribute.
  • lazy: Defer loading of the resource until it reaches a calculated distance from the viewport.
  • eager: Load the resource immediately, regardless of where it's located on the page.

iframe 的srcdoc属性应用

Stack Overflow的讨论

link preload资源

<link rel="preload" href="https://xxx.com/iframe.html" as="document">

✅ abortController/cancelToken

  • fetch使用abortController
  • XHR使用xhr.abort() 取消

axios的实现

CancelToken

https://github.com/axios/axios/blob/820fe6e41a/lib/cancel/CancelToken.js

https://github.com/axios/axios/blob/9a78465a9268dcd360d7663de686709a68560d3d/lib/adapters/xhr.js

缓存

SSR 服务端渲染