在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

thedaviddias/Front-End-Checklist

菜单

JavaScript

相关源文件

目的与范围

本文档详细介绍了前端清单中的 JavaScript 部分，重点关注 Web 项目中 JavaScript 实现的最佳实践和测试方法。它涵盖了代码组织、优化技术、加载策略、安全注意事项以及前端开发中 JavaScript 的质量保证方法。

有关 JavaScript 之外的整体性能优化信息，请参阅性能优化。有关具体安全措施，请参阅安全措施。

前端清单中的 JavaScript

JavaScript 部分确保 JavaScript 代码遵循性能、安全和可维护性的行业最佳实践。这有助于创建加载速度快、执行效率高、并在不同浏览器和设备上提供良好用户体验的 Web 应用程序。

来源：README.md508-556

JavaScript Checks中的优先级系统

JavaScript 部分遵循前端清单的优先级系统，按重要性对条目进行分类

优先级指示符含义JavaScript 示例
高High不可省略无内联 JavaScript、无合并、无压缩、无安全指南、无 ESLint 验证
中等Medium强烈推荐Noscript 标签、非阻塞加载、优化库
低Low推荐但可选Modernizr 用于功能检测

来源：README.md35-39 README.md508-556

JavaScript 最佳实践

代码组织和优化

禁止内联 JavaScript

优先级：高

JavaScript 代码永远不应与 HTML 代码混合。这种分离提高了可维护性、缓存能力和安全性。

连接

优先级：高

应将多个 JavaScript 文件合并为一个文件（除非使用 HTTP/2，此时多个较小的文件可能更有效）。这可以减少 HTTP 请求，提高加载性能。

代码压缩

优先级：高

JavaScript 文件应进行压缩以减小文件大小。这包括在不改变功能的情况下删除不必要的字符（如空格、注释等）。约定是在压缩后的文件名后添加 .min 后缀。

示例：script.js → script.min.js

来源：README.md512-517

加载策略

非阻塞 JavaScript

优先级：中

应使用 async 属性异步加载 JavaScript 文件，或使用 defer 属性推迟加载，以避免渲染阻塞。

  • async：脚本异步执行，一旦可用即执行，不会阻塞页面渲染。
  • defer：脚本执行被推迟，直到页面解析完成。

示例

Noscript 标签

优先级：中

当 JavaScript 不可用或被禁用时，应使用 <noscript> 标签提供替代内容。这对于 JavaScript 密集型应用程序尤其重要。

示例

来源：README.md523-536

库管理

优化和更新的库

优先级：中

JavaScript 库应

  • 项目必需（避免对简单功能使用库）
  • 更新至最新版本
  • 不要用不必要的方法给项目增加负担

对于简单功能，考虑使用原生 JavaScript，而不是导入整个库。

Modernizr 用于功能检测

优先级：低

为了定位特定功能，请使用自定义的 Modernizr 构建，将类添加到 HTML 标签。这有助于功能检测和提供适当的回退。

来源：README.md537-548

JavaScript 安全

优先级：高

JavaScript 代码应遵循安全最佳实践，以防止漏洞，特别是

  • 跨站脚本 (XSS) 防范
  • 适当的输入验证和清理
  • 安全的 DOM 操作

应遵循 OWASP 关于使用 JavaScript 开发安全应用程序的指南。

来源：README.md518-522

JavaScript 测试

ESLint

优先级：高

所有 JavaScript 代码都应使用 ESLint 进行检查，并且根据您选择的配置或标准规则不应报告任何错误。

ESLint 有助于识别和修复 JavaScript 代码中的问题，强制执行代码质量和项目一致性。

来源：README.md549-553

JavaScript 与其他前端组件的集成

JavaScript 与可访问性

JavaScript 应增强用户体验，同时不造成可访问性障碍。

  • 在可能的情况下，功能应在没有 JavaScript 的情况下工作（渐进增强）。
  • 当内容动态更改时，应正确管理 ARIA 属性。
  • 在 JavaScript 交互中应适当维护键盘焦点。

JavaScript 与性能

JavaScript 通过以下方式直接影响性能：

  • 文件大小和解析时间
  • 执行效率
  • 加载策略 (async/defer)
  • 代码分割和按需加载

有关全面的性能优化技术，请参阅性能优化部分。

来源：README.md508-556 README.md620-699 README.md701-756

摘要和最佳实践清单

类别检查优先级
代码组织无混合 HTML 的内联 JavaScript高
优化JavaScript 文件已合并高
优化JavaScript 文件已压缩（带 .min 后缀）高
安全JavaScript 符合 OWASP 安全指南高
加载已使用 <noscript> 标签提供回退内容中等
加载JavaScript 文件使用 async/defer 加载中等
库库是必需的、更新的且已优化中等
功能检测Modernizr 用于特定的功能检测低
测试ESLint 未标记任何错误高

此清单有助于确保 JavaScript 代码得到优化、安全，并遵循前端开发的最佳实践。

来源：README.md508-556