一些你不知道的 web API

一些你不知道的 web APIBackground Tasks APIBackground Tasks API幕后任务协作调度 API (也叫幕后任务 API 或者简单称为 requestIdleCallback() API) 提供了由用户代理决定，在空闲时间自动执行队列任务的能力。Window.requestIdleCallback() 允许浏览器告诉您的代码可以安全使用多少时间而不会导致系统延

Z_ One Dream

305人浏览 · 2021-02-25 18:38:09

Z_ One Dream · 2021-02-25 18:38:09 发布

一些你不知道的 web API

Background Tasks API

幕后任务协作调度 API (也叫幕后任务 API 或者简单称为 requestIdleCallback() API) 提供了由用户代理决定，在空闲时间自动执行队列任务的能力。

Window.requestIdleCallback() 允许浏览器告诉您的代码可以安全使用多少时间而不会导致系统延迟，从而有助于确保浏览器的事件循环平稳运行。如果您保持在给定的范围内，您可以使用户体验更好

目前，timeRemaining() 有一个50 ms 的上限时间，但实际上你能用的时间比这个少，因为在复杂的页面中事件循环可能已经花费了其中的一部分，浏览器的扩展插件也需要处理时间，等等

接下来我们需要知道两个函数 window.requestIdleCallback 和 window.cancelIdleCallback

window.requestIdleCallback 会返回一个 id，可以通过 window.cancelIdleCallback 取消这个事件

  const taskList = [];
  function runTask(deadline) {
    while (deadline.didTimeout || deadline.timeRemaining() > 0 && taskList.length) {
      // do sometime
      taskList.pop()();
    }
  }
  window.requestIdleCallback(runTask, { timeout: 1000 })

我们创建了一个懒惰执行函数 requestIdleCallback(runTask, { timeout: 1000 })
它将在事件循环空闲时执行最多 50ms。
但是如果一直没有空闲导致任务超时，那么我们将会在 1000 毫秒之后，让它强制执行。

在你需要的时候要用 timeout，但记得只在需要的时候才用。 使用 timeout可以保证你的代码按时执行，但是在剩余时间不足以强制执行你的代码的同时保证浏览器的性能表现的情况下，timeout就会造成延迟或者动画不流畅。

Broadcast Channel API

Broadcast Channel API 可以实现同源下浏览器不同窗口，Tab页，frame或者 iframe 下的浏览器上下文 (通常是同一个网站下不同的页面)之间的简单通讯。

  <!-- index_1.html -->
    <body>
      <button onclick="sendMsg()">send message</button>
      <script>
        const channel = new BroadcastChannel("test_channel");
        function sendMsg() {
          // 发送简单消息的示例
          channel.postMessage("Hello World!");
          // 断开频道连接
          channel.close();
        }
      </script>
    </body>

  <!-- index_2.html -->
    <body>
      <script>
        const channel = new BroadcastChannel("test_channel");
        channel.onmessage = function(data) {
          // 接收同源发送过来的消息
          console.log(data);
          // 断开频道连接
          channel.close();
        }
      </script>
    </body>

Fullscreen API

全屏 API 为使用用户的整个屏幕展现网络内容提供了一种简单的方式，并且在不需要时退出全屏模式。这种 API 让你可以简单地控制浏览器，使得一个元素与其子元素，如果存在的话，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用。

  <body>
    <div onclick="exit()" style="background: red; color: #fff;">send message</div>
    <button onclick="fullScreen()">click</button>
    <script>
      const button = document.querySelector('div');
      // 全屏成功
      button.onfullscreenchange = function(event) {
        console.log(event)
      }
      // 全屏失败
      button.onfullscreenerror = function(event) {
        console.log(event)
      }
      function fullScreen() {
        // document.fullscreenEnabled 是否可全屏
        if (!document.fullscreenEnabled) return
        button.requestFullscreen().then(data => {
          console.log('success')
        })
      }
      function exit() {
        document.exitFullscreen()
      }
    </script>
  </body>

HTML Drag and Drop API

HTML 拖放 Drag and Drop 接口使应用程序能够在浏览器中使用拖放功能。例如，用户可使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并释放鼠标按钮以放置这些元素。拖拽操作期间，会有一个可拖拽元素的半透明快照跟随着鼠标指针。

<body>
  <script>
    function dragstart_handler(ev) {
      ev.dataTransfer.setData("text/plain", '拖拽吧');
    }

    window.addEventListener('DOMContentLoaded', () => {
      const element = document.getElementById("p1");
      element.addEventListener("dragstart", dragstart_handler);
    });
  </script>

  <p id="p1" draggable="true">可拖拽的元素</p>
</body>

鼠标按住可拖拽元素，然后移动到导航栏放开，会发现内容被神奇得转移了过去

Performance API

Performance接口被认为是高采样率的，因为其精确度可达千分之一毫秒（受硬件或软件限制）。这些接口支持许多使用情形，包括计算帧速率（在动画中可能很重要）和基准测试（例如加载资源的时间）。

由于平台的系统时钟会受到各种时滞（例如NTP调整）的影响，该接口支持单调时钟，即一直增加的时钟。鉴于这个原因，Performance API定义了DOMHighResTimeStamp类型，而不是使用Date.now()接口。

IndexedDB

IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。

Intersection Observer API

Intersection Observer API提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。

在 DOM 中，所有区域均被 Intersection Observer API 当做一个矩形看待。如果元素是不规则的图形也将会被看成一个包含元素所有区域的最小矩形，相似的，如果元素发生的交集部分不是一个矩形，那么也会被看作是一个包含他所有交集区域的最小矩形。

Navigation Timing API

Navigation TimingAPI

Navigation Timing API 提供了可用于衡量一个网站性能的数据。与用于相同目的的其他基于JavaScript的机制不同，该API可以提供可以更有用和更准确的端到端延迟数据。

Page Visibility API

使用选项卡式浏览，任何给定网页都有可能在后台，因此对用户不可见。页面可见性 API提供了您可以观察的事件，以便了解文档何时可见或隐藏，以及查看页面当前可见性状态的功能。

使用情景

网站有图片轮播效果，只有在用户观看轮播的时候，才会自动展示下一张幻灯片。
显示信息仪表盘的应用程序不希望在页面不可见时轮询服务器进行更新。
页面想要检测是否正在渲染，以便可以准确的计算网页浏览量
当设备进入待机模式时，网站想要关闭设备声音（用户按下电源键关闭屏幕）

  function visibilitychange() {
    if (document.hidden) {
      // do something
    } else {
      // do something
    }
  }
  document.addEventListener('visibilitychange', visibilitychange, false)

假设我们做的是一个交易所项目，我们在页面隐藏的时候，应该只查询当前交易币对的价格，显示在 title 上，而其他的轮询 http 应当暂停。

Pointer Events

目前绝大多数的Web内容都假设用户的指针定点设备为鼠标。然而，近年来的新兴设备支持更多不同方式的指针定点输入，如各类触控笔和触摸屏幕等。这就有必要扩展现存的定点设备事件模型，以有效追踪各类指针事件。

Resize Observer API

Resize Observer API提供了一种高性能的机制，通过该机制，代码可以监视元素的大小更改，并且每次大小更改时都会向观察者传递通知。

  <body>
    <div style="background: red; width: 60%;">
      message
    </div>
    <script>
      const resizeObserver = new ResizeObserver(entries => {
        for (let entry of entries) {
          entry.target.style.fontSize = entry.contentBoxSize[0].inlineSize / 10 + 'px'
        }
      });
      resizeObserver.observe(document.querySelector('div'));
    </script>
  </body>

URL API

URL API是一个URL标准的组件，它定义了有效的Uniform Resource Locator和访问、操作URL的API。URL标准还定义了像域名、主机和IP地址等概念，并尝试以标准的方式去描述用于以键/值对的形式提交web表单内容的遗留application/x-www-form-urlencoded MIME type 。

Notifications API

Notifications API 允许网页控制向最终用户显示系统通知 —这些都在顶级浏览上下文视口之外，因此即使用户已经切换标签页或移动到不同的应用程序，也可以显示。该API被设计成与不同平台上的现有通知系统兼容。

Web Workers API

通过使用Web Workers，Web应用程序可以在独立于主线程的后台线程中，运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务，从而允许主线程（通常是UI线程）不会因此被阻塞/放慢。

  // main.js
  const worker = new Worker('./index.js');
  worker.postMessage("message")

  // index.js
  console.log(self);
  self.addEventListener('message', console.log)

注意：这里的 ./index.js 需要起服务引用
我们创建了一个 woker，并通过 postMessage 发送信息，index.js 通过 onmessage 函数监听
Worker 和 requestIdleCallback 还是有区别的，因为 Worker 是重新起了一个子进程！