Thedaviddias Front End Checklist
合集@thedaviddias7.4万+开源协议: MIT
在审查与避免对表单字段使用 autofocus 相关的渲染 HTML、交互组件或设计系统模式时使用。先检查原生语义，再根据需要检查键盘行为、焦点流程、可访问名称…
html-size
@thedaviddias
编程协作开源协议: MIT
/**
* 在审计页面体积以提升抓取效率、调查为何某些页面内容未出现在 Google 索引中，或审查将大型 JSON 负载嵌入 HTML 的服务端渲染页面时使用。
*/html-xml-lang-mismatch
@thedaviddias
编程协作开源协议: MIT
/**
* 适用于必须同时作为 HTML5 和 XML 正确解析的 XHTML 文档和 polyglot HTML 文档。对于现代仅 HTML5 文档，只需要 `lang`…
*/html5-semantic-elements
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审查与“使用语义化 HTML 元素”相关的模板、渲染后的 HTML 或共享组件时启用。需校验最终面向浏览器的标记，而不仅仅是源码中的框架抽象层。
*/http-requests
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审计与「最小化 HTTP 请求」相关的页面加载缓慢、资源过重或渲染延迟问题。在提出改进建议之前，请先在 DevTools、Lighthouse 或线上数据中…
*/http-to-https
@thedaviddias
编程协作开源协议: MIT
/**
* 用于检查 Web 服务器是否配置为将所有 HTTP 流量重定向到 HTTPS。
*/http2
@thedaviddias
编程协作开源协议: MIT
/**
* 在排查与启用 HTTP/2 或 HTTP/3 相关的页面加载缓慢、资源体积过大或渲染延迟问题时使用。在给出优化建议之前，请先通过 DevTools、Lighth…
*/https
@thedaviddias
编程协作开源协议: MIT
/**
* 在审计网站或 Web 应用是否仅通过有效证书的 HTTPS 提供内容时使用。
*/https-downgrade
@thedaviddias
编程协作开源协议: MIT
/**
* 在审计站点的内部与外部链接以保证协议一致性、将站点从 HTTP 迁移到 HTTPS，或审查代码库中可能使用 `http://` 而非 `https://` 的硬…
*/hyphens
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审计 URL 结构中的单词分隔符格式、从标题生成 slug，或规划将 URL 从下划线或空格迁移到连字符并配置相应重定向时使用。
*/identical-links-same-purpose
@thedaviddias
编程协作开源协议: MIT
/**
* 在审查与「确保相同链接指向一致的目地」相关的渲染 HTML、交互组件或设计系统模式时使用。优先检查原生语义，然后根据需要审视键盘行为、焦点流转、可访问名称以及屏…
*/image-cdn
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审查与“通过 CDN 提供图像”相关的图像资源、标记以及 CDN 或构建转换。综合检查编码大小、渲染大小、加载策略以及对首屏内容的影响。
*/image-compression
@thedaviddias
流程自动化开源协议: MIT
/**
* 用于审查图片资源、标记以及与无损压缩图片相关的 CDN 或构建转换。需同时检查编码大小、渲染大小、加载策略以及对首屏的影响。
*/image-file-size
@thedaviddias
编程协作开源协议: MIT
/**
* 在审计图片处理流程、`public/` 中的静态资源、由 CMS 管理的媒体或图片 CDN 转码时使用。将文件体积问题与尺寸不匹配问题区分开来，以便判断是压缩问…
*/image-optimization
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审查与 Optimize all images for web 相关的图片资源、标记以及 CDN 或构建转换。同时检查编码后大小、渲染尺寸、加载策略以及首屏…
*/image-redundant-alt
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审查与“避免冗余的图片替代文本”相关的渲染 HTML、交互组件或设计系统模式时使用。首先检查原生语义，然后根据需要检查键盘行为、焦点流转、可访问名称以及屏幕…
*/immutable-patterns
@thedaviddias
编程协作开源协议: MIT
/**
* 在与「优先使用不可变数据模式」相关的脚本、客户端组件、打包产物或运行时行为审查时使用。同时检查源码与浏览器执行路径，以便修复能够定位到真正的瓶颈或缺陷。
*/import-on-interaction
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审查因可选功能导致的缓慢初次加载。优先处理那些下载或执行成本高昂、且首屏、首交互或核心任务完成所不需要的代码。
*/import-on-visibility
@thedaviddias
设计多媒体开源协议: MIT
/**
* 用于审查长页面、仪表板或包含昂贵离屏模块的内容信息流。在保证滚动顺畅所需的足够早加载与保持初始路由轻量之间取得平衡。
*/improve-rule
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审阅或改进 Front-End Checklist 的规则 MDX 文件,以提升其质量分数、修复存根提示、补充缺失字段或用真实代码示例丰富内容。
*/inclusive-language
@thedaviddias
编程协作开源协议: MIT
/**
* 在审查已渲染的 HTML、交互组件或与「使用包容性语言」相关的设计系统模式时使用。优先检查原生语义，再根据需要审视键盘行为、焦点流转、可访问名称以及屏幕阅读器的…
*/indexability
@thedaviddias
设计多媒体开源协议: MIT
/**
* 用于在审计站点时排查意外的 noindex 指令、调查重要页面未出现在 Google 搜索中的原因，或审查在页面或分类级别控制索引的 CMS 设置时使用。
*/indexability-conflicts
@thedaviddias
编程协作开源协议: MIT
/**
* 在对站点进行可索引性问题审计、排查为何本应被排除的页面却出现在 Google 索引中（或反之），或审查 robots.txt 与 meta robots 配置的…
*/input-image-alt
@thedaviddias
编程协作开源协议: MIT
/**
* 在审查渲染后的 HTML、交互组件或与“为图片按钮提供替代文本”相关的设计系统模式时使用。优先检查原生语义，然后根据需要检查键盘行为、焦点流转、可访问名称以及屏…
*/input-types
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审查模板、渲染后的 HTML 或与“使用语义化 input type 属性”相关的共享组件。校验最终面向浏览器的标记，而不仅仅是源码中的框架抽象层。
*/