Thedaviddias Front End Checklist
合集@thedaviddias7.4万+开源协议: MIT
在审查与避免对表单字段使用 autofocus 相关的渲染 HTML、交互组件或设计系统模式时使用。先检查原生语义,再根据需要检查键盘行为、焦点流程、可访问名称…
redundant-entry
@thedaviddias
编程协作开源协议: MIT
/**
* 在审查任何跨越多个界面、步骤或模态阶段的流程时使用。跟随真实的用户操作路径,并跨步骤对比字段,而不是孤立审查各个界面。
*/referrer-policy
@thedaviddias
编程协作开源协议: MIT
/**
* 适用于审查任何处理身份验证、会话状态或敏感 URL 参数的网站上的 HTTP 响应头以加强隐私时使用。
*/render-blocking
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审计与 Eliminate render-blocking resources 相关的页面加载缓慢、资源过重或渲染延迟问题。在推荐改动前,请先在 DevTo…
*/reset-css
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审阅与“使用 CSS reset 或 normalize 样式表”相关的样式表、组件样式以及响应式表现。在提出修复方案前,检查渲染后的布局在各断点与交互状态…
*/resource-hints
@thedaviddias
编程协作开源协议: MIT
/**
* 用于排查与“使用资源提示(resource hints)以加快加载速度”相关的页面加载缓慢、资源过重或渲染延迟问题。在给出优化建议之前,请先在 DevTools…
*/responsive-images
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审查文章图片、卡片、画廊或任何在断点间以多种尺寸渲染的组件。同时检查标记和 CSS 布局,因为错误的 `sizes` 属性会抵消一个完美设置的 `srcse…
*/responsive-size
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审查与“以正确显示尺寸提供图片”相关的图片资源、标记以及 CDN 或构建转换。综合检查编码尺寸、渲染尺寸、加载策略以及对首屏的影响。
*/responsive-units
@thedaviddias
编程协作开源协议: MIT
/**
* 在审查样式表、组件样式以及与“为响应式布局使用相对单位”相关的响应式行为时使用。在提出修复方案之前,需跨断点和交互状态检查渲染后的布局。
*/retina-display
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审查与支持高 DPI 视网膜显示屏相关的图片资源、标记以及 CDN 或构建转换。综合检查编码尺寸、渲染尺寸、加载策略以及首屏影响。
*/review
@thedaviddias
编程协作开源协议: MIT
/**
* 适用于产品页面、本地商家页面、食谱、应用、图书以及任何聚合用户评价的页面。用于审计电商或评价站点的富结果资格。
*/right-to-erasure
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审计账户设置页面、隐私仪表板或 API 路由,以验证是否为用户提供完整的数据删除路径。
*/robots-meta
@thedaviddias
设计多媒体开源协议: MIT
/**
* 适用于所有 HTML 页面时使用。在审计已从搜索结果中消失的页面,或检查预发布环境与生产环境元标签一致性时使用。
*/robots-meta-conflict
@thedaviddias
编程协作开源协议: MIT
/**
* 适用于同时使用 robots.txt 的 disallow 规则和 meta robots noindex 标签的站点。适用于排查已被去索引的页面仍出现在搜索结…
*/robots-txt
@thedaviddias
编程协作开源协议: MIT
/**
* 适用于任何公开网站。用于审计技术性 SEO 基础或排查抓取覆盖缺口时使用。
*/runtime-validation
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审查调用 fetch()、从 localStorage 读取、访问 process.env 或处理表单提交时未对传入数据结构进行显式校验的代码。
*/scheduler-yield
@thedaviddias
编程协作开源协议: MIT
/**
* 在审查针对大型数据集执行同步循环、递归树遍历或批量 DOM 更新的 JavaScript 代码时使用,这些操作在中端设备上可能超过 50 毫秒。
*/schema-noindex-conflict
@thedaviddias
编程协作开源协议: MIT
/**
* 适用于任何使用结构化数据来获取富摘要的网站。用于排查有效的 schema 标记为何无法在 Google 搜索中产生富摘要。
*/screen-reader-testing
@thedaviddias
编程协作开源协议: MIT
/**
* 在执行网页、组件或完整用户流程的可访问性审计时使用。适用于通过辅助技术访问的所有 Web 内容。对自定义 JavaScript 部件、单页应用程序、动态更新的内…
*/scrolljacking
@thedaviddias
编程协作开源协议: MIT
/**
* 在审查与「避免滚动劫持与自定义滚动行为」相关的渲染 HTML、交互组件或设计系统模式时使用。优先检查原生语义,再视情况检视键盘行为、焦点流转、可访问名称以及屏幕…
*/search-input
@thedaviddias
编程协作开源协议: MIT
/**
* 在审阅与“使搜索输入可访问”相关的模板、渲染后的 HTML 或共享组件时使用。验证最终面向浏览器的标记,而非仅仅是源码中的框架抽象。
*/select-name
@thedaviddias
编程协作开源协议: MIT
/**
* 在审查与“为 select 元素提供可访问名称”相关的渲染 HTML、交互组件或设计系统模式时使用。优先检查原生语义,然后根据需要审查键盘行为、焦点流转、可访问…
*/semantic-lists
@thedaviddias
编程协作开源协议: MIT
/**
* Use when reviewing rendered HTML, interactive components, or design-system patte
*/sensory-instructions
@thedaviddias
编程协作开源协议: MIT
/**
* 在审阅与“避免仅依赖感官的指令”相关的已渲染 HTML、交互组件或设计系统模式时使用。首先检查原生语义,然后视情况检查键盘行为、焦点流转、可访问名称以及屏幕阅读…
*/service-area
@thedaviddias
编程协作开源协议: MIT
/**
* 适用于在多个地区提供服务的服务型企业(水管工、律师、顾问等)。适用于为没有线下门店的企业规划本地 SEO 策略。
*/