优先级系统

相关源文件

• README.md
• data/images/priority/high.svg
• data/images/priority/low.svg
• data/images/priority/medium.svg

目的与范围

本文档详细介绍了“前端清单”中使用的优先级分类系统。它解释了清单项是如何按重要性分类的，代表每个优先级别的视觉指示器，以及这些指示器的技术实现。优先级系统帮助开发人员区分哪些是必需的，哪些是推荐的或可选的。

优先级级别概述

“前端清单”使用三级优先级系统来对每个清单项的重要性进行分类。该系统为哪些要求是不可协商的，哪些可以根据项目需求进行调整提供了指导。

来源： README.md31-39

优先级级别定义

每个优先级级别在清单中都有特定的含义和视觉表示。

优先级	视觉指示器	定义
高	![High][high_img] 红色方块	在任何情况下都不能省略的项。省略这些元素可能会导致页面功能故障，或引起可访问性和 SEO 问题。测试应优先考虑这些元素。
中等	![Medium][medium_img] 橙色三角形	强烈推荐的项目，但在非常具体的情况下可能可以省略。但是，省略这些项目可能会对性能或 SEO 产生负面影响。
低	![Low][low_img] 绿色圆圈	推荐的项目，但在某些情况下可以根据项目的具体情况或要求省略。

来源： README.md35-39

视觉实现

优先级系统使用 SVG 图标来提供项目重要性的视觉指示。这些图标出现在每个清单项的开头，以便立即识别优先级级别。

来源： data/images/priority/high.svg1-4 data/images/priority/medium.svg1-4 data/images/priority/low.svg1-4 README.md851-853

技术实现

优先级指示器以 Markdown 文档中的内联 SVG 图像形式实现。“README.md”文件使用引用式链接来显示这些图像，实际图像路径在文档底部定义。

图像引用实现

SVG 图标在“README.md”中使用以下 Markdown 语法引用：

![Low][low_img]
![Medium][medium_img] 
![High][high_img]

这些引用链接到文档底部的实际 SVG 文件。

[low_img]: https://raw.githubusercontent.com/thedaviddias/Front-End-Checklist/refs/heads/main/data/images/priority/low.svg
[medium_img]: https://raw.githubusercontent.com/thedaviddias/Front-End-Checklist/refs/heads/main/data/images/priority/medium.svg
[high_img]: https://raw.githubusercontent.com/thedaviddias/Front-End-Checklist/refs/heads/main/data/images/priority/high.svg

来源： README.md851-853

SVG 实现细节

每个优先级级别都由一个形状和颜色独特的 SVG 图标表示。

1. 高优先级（high.svg）

   • 形状：方块
   • 颜色：红色 (#d0021b)
   • SVG ViewBox：21.041 x 21.041

2. 中优先级（medium.svg）

   • 形状：三角形
   • 颜色：橙色 (#e08b00)
   • SVG ViewBox：60.02 x 60.02

3. 低优先级（low.svg）

   • 形状：圆圈
   • 颜色：绿色 (#417505)
   • SVG ViewBox：512 x 512

所有图标都包含适当的标题元素以增强可访问性。

来源： data/images/priority/high.svg1-4 data/images/priority/medium.svg1-4 data/images/priority/low.svg1-4 README.md851-853

清单中优先级的分布

“前端清单”根据每个项目对整体前端质量的重要性，将优先级级别分布在不同的类别中。这种分布有助于开发人员首先关注最关键的方面。

来源： README.md46-800

在清单中的应用

优先级系统在整个清单中得到一致应用。每个项目都带有适当的优先级指示符前缀，使开发人员能够快速评估哪些项目需要立即关注。

示例应用

- [ ] **Charset:** ![High][high_img] The charset (UTF-8) is declared correctly.

- [ ] **Viewport:** ![High][high_img] The viewport is declared correctly.

- [ ] **Title:** ![High][high_img] A title is used on all pages (SEO: Google calculates the pixel width of the characters used in the title, and it cuts off between 472 and 482 pixels. The average character limit would be around 55-characters).

- [ ] **Apple Web App Meta:** ![Low][low_img] Apple meta-tags are present.

- [ ] **Canonical:** ![Medium][medium_img] Use `rel="canonical"` to avoid duplicate content.

来源： README.md69-80 README.md132-147 README.md180-186

使用指南

在使用“前端清单”时，开发人员应：

1. 首先处理高优先级项目，因为它们对正常功能至关重要。
2. 根据特定项目需求评估中优先级项目。
3. 将低优先级项目视为可能提高整体质量的建议。

优先级系统并非旨在僵化，而是旨在基于最佳实践和行业标准提供指导。特定项目的要求有时可能需要不同的优先级方法。

有关特定清单部分及其单个项目要求的更多信息，请参阅 “前端清单”。

来源： README.md24-39