47+AI
ZH

Thedaviddias Front End Checklist

合集
@thedaviddias7.4万+开源协议: MIT

在审查与避免对表单字段使用 autofocus 相关的渲染 HTML、交互组件或设计系统模式时使用。先检查原生语义,再根据需要检查键盘行为、焦点流程、可访问名称…

GitHub

modern-array-methods

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审查脚本、客户端组件、打包产物或与“使用现代数组与对象方法”相关的运行时行为时使用。需同时检查源代码和浏览器执行路径,以便让修复真正命中瓶颈或缺陷。
 */

modern-format

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审查图像资源、相关标记以及与使用现代图像格式(WebP、AVIF)相关的 CDN 或构建转换。综合检查编码体积、渲染尺寸、加载策略以及对首屏的影响。
 */

mutation-testing

@thedaviddias

编程协作开源协议: MIT
/**
 * 当在包含业务逻辑、计算工具函数或状态机的模块上评估测试质量时使用,用于判断这些测试是否真正具备缺陷检测能力。
 */

naming-conventions

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审查与“使用一致的 CSS 命名约定”相关的样式表、组件样式和响应式行为时使用。在提出修复方案之前,请先检查跨断点和交互状态的渲染布局。
 */

nap-consistency

@thedaviddias

编程协作开源协议: MIT
/**
 * 在对本地企业网站进行本地 SEO 审计时使用。适用于任何拥有实际地址并希望出现在本地搜索结果或 Google 地图中的企业。
 */

navigation-landmark

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审查模板、最终渲染的 HTML 或与「使用 navigation 地标区域」相关的共享组件。需要验证最终面向浏览器的标记,而不仅仅是源码中的框架抽象。
 */

new-tab

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审查 HTML 或 JSX 中的 target='_blank' 锚点元素,以验证其是否包含 rel='noopener noreferrer'。
 */

no-explicit-any

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审查 TypeScript 文件以排查类型安全回退、处理外部数据的函数代码评审时,或当代码库中出现 @typescript-eslint/no-explici…
 */

no-unchecked-indexed-access

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审查 tsconfig.json 中是否缺少安全标志、检查数据处理管道中使用数组下标访问的代码,或排查 TypeScript 未捕获的运行时 undefin…
 */

nofollow-internal

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审查内部链接结构或检查链接属性时使用。适用于对指向同一域名下页面的链接使用 rel=nofollow 的任何站点。
 */

noindex-in-sitemap

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审计 XML sitemap 或诊断索引问题时使用。适用于任何可能对同时列在 sitemap 中的 URL 应用 noindex meta 标签或 X-Rob…
 */

noscript-tag

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审查与“提供 noscript 回退内容”相关的模板、渲染后的 HTML 或共享组件。验证最终面向浏览器的标记,而不仅仅是源框架的抽象层。
 */

nosnippet

@thedaviddias

设计多媒体开源协议: MIT
/**
 * 在审计 robots meta 标签时使用。适用于任何应在搜索结果中带有描述信息展示的重要落地页、文章页或产品页。
 */

object-alt

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审查与“为对象提供替代文本”相关的渲染后 HTML、交互组件或设计系统模式。优先检查原生语义,然后根据需要检视键盘行为、焦点流转、可访问名称以及屏幕阅读器输…
 */

offline-fallback

@thedaviddias

编程协作开源协议: MIT
/**
 * 在为网站添加 PWA 能力、实现 Service Worker,或改善用户在网络连接不稳定情况下的体验时使用。
 */

offscreen-lazy

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审查与“离屏图片懒加载”相关的图片资源、标记以及 CDN 或构建转译配置。需综合考量编码体积、渲染尺寸、加载策略以及对首屏的影响。仅当能合理判断图片处于离屏…
 */

og-image-size

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审核 Open Graph 标签或生成 og:image 资源时使用。适用于任何可能通过社交网络或消息平台分享的页面。
 */

og-tags

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审查网页的社交分享元数据。适用于用户可能在社交网络或即时通讯应用中分享的任何页面。
 */

og-url-match

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审计 Open Graph 标签,或排查社交分享计数为何显示偏低。适用于任何同时包含 canonical-url 与 og:url 标签的页面。
 */

optimized

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审查与“优化图片以加快加载速度”相关的图片资源、标记以及 CDN 或构建转换时使用。同时检查编码后大小、渲染大小、加载策略以及对首屏的影响。
 */

organization

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审查商业或品牌网站首页上的结构化数据。适用于希望在其 Google 搜索中获得准确的 Knowledge Panel(知识面板)信息的组织、公司、非营利机构…
 */

orientation

@thedaviddias

设计多媒体开源协议: MIT
/**
 * 用于审查移动优先布局、平板电脑体验、全屏流程、表单、仪表板或媒体界面。检查页面在竖屏和横屏下的渲染行为,并区分真正的布局限制与不必要的方向假设。
 */

orphan-pages

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审计站点架构或调查特定页面在内容良好却有机流量较低的原因。适用于任何拥有超过约 20 个页面的站点。
 */

page-load-time

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审计页面加载缓慢、资源过重或与“页面加载时间保持在 3 秒以内”相关的渲染延迟。在建议任何改动之前,先在 DevTools、Lighthouse 或真实数据…
 */