# @4lolo/resize-observer-polyfill 中文文档

规范地址：https://npmcn.com/package/%404lolo/resize-observer-polyfill/

版本：1\.5\.2
npm 元数据更新时间：2022-04-04T10:47:15.465Z
中文译文更新时间：2026-11-05T18:30:56.328Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%404lolo/resize-observer-polyfill
原文对照：https://npmcn.com/package/%404lolo/resize-observer-polyfill/?lang=original
项目主页：https://github.com/que-etc/resize-observer-polyfill
源码仓库：https://github.com/que-etc/resize-observer-polyfill

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：147 kB，23 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2021-06-02T07:25:50.540Z
- 最新版本发布：2021-06-02T07:25:50.801Z
- 近 30 天下载量：66923（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 0 个）

## 中文简介

调整观察员 API 大小的多填充

## 安装

```sh
npm install @4lolo/resize-observer-polyfill
```

也可以使用：`pnpm add @4lolo/resize-observer-polyfill`、`yarn add @4lolo/resize-observer-polyfill`、`bun add @4lolo/resize-observer-polyfill`

## README

# 调整观察员的大小

[![Build Status](https://travis-ci.org/que-etc/resize-observer-polyfill.svg?branch=master)](https://travis-ci.org/que-etc/resize-observer-polyfill)

调整观察员 API 的多填充 .

执行以"变相观察员"为基础,如果第一个变相事件得不到支持,则使用"变相事件"作为倒计时,因此除非DOM改变,否则不会进行投票. 不修改观测到的元素。 处理 CSS 转换/动画,并可能观测动态 CSS 伪类引起的变化,例如: `:hover`。 。 。 .

跟着 [光谱](http://rawgit.com/WICG/ResizeObserver/master/index.html) 和本地执行。 尺寸是 _2.44 基贝_ 当精炼而精炼.

[现场演示](http://que-etc.github.io/resize-observer-polyfill) (IE10和下层有风格问题).

## 安装

国家预防机制:

```sh
npm install resize-observer-polyfill --save-dev
```

~从鲍尔:~ (将随着下一次主要发布而去除)

```sh
bower install resize-observer-polyfill --save-dev
```

## 浏览器支持

Polyfill在以下浏览器中进行了测试:

[![Build Status](https://saucelabs.com/browser-matrix/que-etc.svg)](https://saucelabs.com/beta/builds/303f5344a7214ba5b62bc7079a15d376)

**注:** Internet Explorer 8及其更早的版本不支持.

## 用法示例

建议用这个图书馆的形式 [填马](https://github.com/sindresorhus/ponyfill),它不会给地球物体带来变化.

```javascript
import ResizeObserver from 'resize-observer-polyfill';

const ro = new ResizeObserver((entries, observer) => {
    for (const entry of entries) {
        const {left, top, width, height} = entry.contentRect;

        console.log('Element:', entry.target);
        console.log(`Element's size: ${ width }px x ${ height }px`);
        console.log(`Element's paddings: ${ top }px ; ${ left }px`);
    }
});

ro.observe(document.body);
```

软件包的主要文件是 ES5 [UMD 图像](https://github.com/umdjs/umd) 捆绑,将和ES6模块版本互换,供那些了解该模块的捆绑者使用 [模块](https://github.com/rollup/rollup/wiki/pkg.module) 字段,例如用于 [滚动](https://github.com/rollup/rollup) 或网络包装 2+.

**说明**: 多填充的全局版本(`dist/ResizeObserver.global`)被贬值,将在下个大发行会被移除.

## 观察战略

如上所述,这一执行主要(但并不仅仅是)依靠 " 变异 " 观察员, " 变异 " 事件对 " IE9 " 和 " IE10 " 具有反作用.

换句话说,突变事件是一种倒行逆施的方法:它们可能不像它们所发出的那样丑陋,特别是当它们的电话被批量、被节制和没有必要分析变化时。 有鉴于此,他们不会中断浏览器的回流/再油漆循环(同为Mutation Observator),甚至可能超越Internet Explorer的MO执行,导致很少到没有性能退化. 在当代浏览器中(Chrome,Firefox等) 变异观察者减速 [套间](https://jsfiddle.net/que_etc/gaqLe8rn/) ,包括200个添加/删除元素、改变属性和修改文本数据的重复,修改比例低于1%。 Internet Explorer给出了不同的结果,MO将同一套套件减慢了2-3%,而突变事件显示差异为~0.6%.

至于其他方法的原因,即iframe/object和 `scroll` 排除了以下战略:

-   它们要求观测到的元素处于非统计位置.
-   无法直接应用到很多元素中: `<img>`, (中文(简体) ), `<input>`, (中文(简体) ), `<textarea>`, (中文(简体) ), `<canvas>`, (中文(简体) ), `<tr>`, (中文(简体) ), `<tbody>`, (中文(简体) ), `<thead>`, (中文(简体) ), `<table>`等 (中文(简体) ). 对于大多数你需要多留一个 `<div>` sVGGGraphicsElement的包装和几乎所有实例都将超出范围.
-   调整观察员光谱要求当一个非空可见元素被隐藏时,即当该元素或其母节点之一直接收到时,发送通知 `display: none` 状态。 当它被从DOM中移除或加入到DOM中时,情况也是如此. 无法仅仅通过使用以前的方法来处理这些案例,所以你仍然需要订阅DOM突变或者不断检查元素的状态.

虽然每一种方法都有自己的局限性, 但我认为在建造一个多功能填充物时 权衡这些局限性是太过分了.

## 限制

-   通知在实际变化发生后发送到~20ms.
-   由动态伪类引起的变化,例如:. `:hover` 财务报告和审定财务报表 `:focus`,没有跟踪。 作为工作,你可以增加一个短暂的过渡,从而引发 `transitionend` 当元素收到前类之一时([实例](https://jsfiddle.net/que_etc/7fudzqng/)) (中文(简体) ).
-   延迟的过渡只收到一份涉及某一要素最新维度的通知.

## 建筑和测试

以造多补. 在其中创建 UMD 捆绑 `dist` 文件夹 :

```sh
npm run build
```

要运行代码样式测试 :

```sh
npm run test:lint
```

运行单元测试 :

```sh
npm run test:spec
```

要在因果归属文件中不存在的浏览器中测试 :

```sh
npm run test:spec:custom
```

对本地执行的测试:

```sh
npm run test:spec:native
```

**注:** 在你援引之后 `spec:native` 财务报告和审定财务报表 `spec:custom` 命令头到 `http://localhost:9876/debug.html` 页 次.

## 常见问题

### @4lolo/resize-observer-polyfill 是什么？

调整观察员 API 大小的多填充

### 如何安装 @4lolo/resize-observer-polyfill？

在项目目录运行 npm install @4lolo/resize-observer-polyfill，或使用 pnpm add / yarn add / bun add。

### @4lolo/resize-observer-polyfill 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @4lolo/resize-observer-polyfill 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @4lolo/resize-observer-polyfill 可以商用吗？

@4lolo/resize-observer-polyfill 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @4lolo/resize-observer-polyfill 的下载量有多少？

根据 npm 官方下载统计，@4lolo/resize-observer-polyfill 在 2026/10/05 – 2026/11/03 这 30 天内被下载 66,923 次，日均约 2,231 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @4lolo/resize-observer-polyfill 还在维护吗？

最新版本 1\.5\.2 发布于 2021/06/02（5 年前）；至今共发布 1 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/06/02。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。