浏览器里这几个原生 API，很多需求其实不用引库

遇到需求先找库，基本是前端的本能反应。但这两年浏览器补的 API 不少，有些场景原生就能干，引个库反而多几十 KB。下面这几个是实际用下来觉得"早知道就不用装了"的。

BroadcastChannel：同页面之间传话

同一个网站开了好几个标签页，一个页面改了数据，其他页面想跟着更新，以前要么靠 storage 事件绕一圈，要么自己写轮询。

const ch = new BroadcastChannel('app-sync');
ch.postMessage({ type: 'logout' });
ch.onmessage = (e) => {
  if (e.data.type === 'logout') location.reload();
};

两端都建同名频道就能互相发消息，代码比监听 storage 事件直白。注意它只在同源页面之间生效，关掉页面记得 ch.close()。

navigator.share：调起系统分享

移动端要分享链接，自己写分享面板得适配一堆渠道。系统自带分享的话，一行就够：

if (navigator.share) {
  await navigator.share({ title: '标题', url: location.href });
}

不支持的浏览器直接不显示按钮就行，不用做完整降级面板。它必须在用户操作（点击）里触发，不能在页面加载时直接调。

popover 属性：原生浮层

做下拉菜单、气泡提示，以前得自己算定位、处理点击外部关闭、管层级。现在 HTML 加了 popover：

<button popovertarget="tip">说明</button>
<div id="tip" popover>这段是提示内容</div>

定位、点外部关闭、置顶层级都由浏览器处理，不用一行 JS。样式可以自己改，默认行为已经够用。

Intl.Segmenter：按词切中文

中文没有空格，切词一直得靠分词库。浏览器内置的 Intl.Segmenter 能做基本的词粒度切分：

const seg = new Intl.Segmenter('zh-CN', { granularity: 'word' });
const words = [...seg.segment('我明天要去上海出差')].filter((s) => s.isWordLike);
// ['我', '明天', '要', '去', '上海', '出差']

准确率比不上专业分词库，但做关键词高亮、字数统计这类够用了，关键是零体积。

这几个都不是什么新东西，只是容易想不起来。写需求前先翻一眼能不能原生做，能省下不少打包体积。