免费在 GitHub 公开中文介绍

import-on-visibility

检查长页面和仪表盘中屏幕外的高开销组件，将其改为接近可视区域时加载，并预留布局空间，平衡首次显示负担与滚动等待时间。

原文查看原文说明

Use when reviewing long pages, dashboards, or content feeds with expensive offscreen modules. Balance early enough loading for smooth scrolling against keeping the initial route light.

thedaviddias/Front-End-Checklist

AI 评分90分/ 100 查看安装方法

适用场景

延迟加载仪表盘底部图表
检查长落地页的加载方式
提前加载嵌入内容和相关商品
防止延迟显示引发布局偏移

中文介绍

功能

检查长页面中需要滚动才能看到的组件如何加载。查找首次显示时就已加载的图表、嵌入内容、评论、相关商品等，协助改为在接近可视区域时加载代码。使用 Intersection Observer 监测元素与可视区域的位置关系，调整首次显示的负担和滚动时的等待时间。

适用场景

适合信息密集的仪表盘或较长的落地页，尤其是页面底部功能也从一开始就加载的情况。还会解释按可见位置加载与由用户操作触发加载之间的区别，帮助理解这两种加载方式。

使用示例

“检查屏幕外的组件，列出可以改为接近可视区域时再加载的部分。”
“让底部图表延迟加载，并避免显示时出现布局偏移。”

注意事项

延迟加载的部分需要通过占位内容或容器预留空间。rootMargin 用于指定提前开始加载的距离，需要进行调整，使内容能在用户到达前准备好，同时避免与首次显示所需的处理过度争用资源。

本介绍由 AI（OpenAI Codex）根据公开的 SKILL.md 撰写。准确的规格请查看下方原文。

客观评估

AI 仅根据 SKILL.md 的内容，从 4 个方面进行了评估。星标数和热度不计入评估。

指令清晰度能否看出何时使用、做什么: A良好明确针对屏幕外的高开销组件，在其接近可视区域时加载。
步骤具体性步骤、输入输出和示例是否具体: B部分不足指定观察机制和空间预留方式，但正文没有实现示例或调整数值。
安全性发送数据、删除文件、执行命令等是否有说明: A良好操作针对加载实现，没有外部发送、删除或凭据操作指令。
安装难易度所需工具和 API 密钥是否少且有说明: A良好使用 Intersection Observer 或框架同类功能，无需外部服务或密钥。

总分按每项 A=25 分、B=15 分、C=5 分相加。由 AI（OpenAI Codex）于 2026年10月23日评估。仅供参考，安装前请同时查看原文。

如果您认为评估有误，请申请复核

包含的文件（2）

SKILL.md2.1 KB
references/rule.md3.6 KB

SKILL.md（原文）

安装前可以查看交给 AI 代理的指令内容。

Load non-critical code when content approaches the viewport

Many pages ship JavaScript for offscreen sections that a user may never reach. Import-on-visibility keeps the initial route lighter while still loading content early enough to feel ready when users scroll to it.

Quick Reference

Use Intersection Observer to start loading code before an offscreen section becomes visible
Reserve space with placeholders or skeletons so deferred sections do not cause layout shift
Tune rootMargin so heavy content loads early enough without competing with above-the-fold work
Use this for charts, reviews, related products, embeds, and offscreen dashboards

Check

Identify components, widgets, or modules that load on first render even though they only appear after the user scrolls. Flag which ones can switch to visibility-based loading.

Fix

Use Intersection Observer or an equivalent framework primitive to load the offscreen component or dependency when it approaches the viewport, while preserving layout stability and a clear placeholder.

Explain

Explain import-on-visibility, how it differs from import-on-interaction, and how viewport-based loading helps large pages stay fast.

Code Review

Inspect scroll-triggered sections, embeds, charts, recommendation modules, and long landing pages. Flag code that is bundled eagerly even though the corresponding UI stays offscreen until later, and verify the deferred version still loads before the user reaches it.

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/rules/performance/import-on-visibility

评价

还没有评价。欢迎分享你的使用感受。

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

同一仓库的技能