本技能是一套面向现代 Web 开发的“最佳实践”规范，内容基于 Lighthouse 最佳实践审计，覆盖安全、浏览器兼容性与代码质量模式。
用途 用于在开发或审计中应用现代 Web 标准，例如被要求“应用最佳实践”“安全审计”等场景。它强调以证据为导向的审计工作流，而非仅凭主观判断。
审计工作流 当存在可渲染页面时：运行实时 Lighthouse 最佳实践审计（若具备该能力；使用 Chrome DevTools MCP 时调用 lighthouse_audit）。普通页面加载使用 navigation 模式；需要保留当前状态时使用 snapshot 模式。检查列出的控制台与网络失败，仅在支持某项发现时获取单项详情。用依赖、响应头、配置与源码检查补充运行时证据；Lighthouse 并非完整的安全评估。修复相关代码后重跑同一审计，并将安全发现与风格偏好分开。若实时工具不可用，使用 Lighthouse CLI 加针对性的依赖与响应头检查。切勿将 Lighthouse 高分报告为应用安全的证明。
安全 当安全在范围内或实时审计暴露相关失败时，阅读安全参考。其覆盖 HTTPS/HSTS、CSP 与 Trusted Types、子资源完整性、响应头、依赖、净化与 Cookie。最低要求包括：使用 HTTPS 且无混合内容；仅在确认所有相关子域支持 HTTPS 后添加 HSTS；将严格 CSP 视为纵深防御，优先使用 nonce 或 hash，并在强制执行前用 report-only 测试；净化不可信 HTML 并保护 DOM XSS 汇聚点，不需要标记时优先使用文本 API；固定并审查第三方代码，在交付模型支持时使用 SRI，并保持依赖已修补；在运行时验证响应头，仅凭源码配置不能证明部署页面实际发送的内容。
浏览器兼容性 涵盖 doctype 声明（使用 HTML5 doctype）、字符编码（charset 作为 head 中第一个元素）、viewport meta 标签、特性检测（避免浏览器检测，使用 IntersectionObserver 检测或 CSS @supports）、polyfill（优先在构建时打包，如 Babel/SWC + core-js 或 @vitejs/plugin-legacy；运行时加载应追加 script 元素而非 document.write；切勿从不受控的第三方 CDN 加载 polyfill，polyfill.io 于 2024 年中期遭供应链攻击，应自托管或使用经审查的镜像并用 SRI 固定版本）、废弃 API（避免 document.write、同步 XHR、Application Cache，改用动态脚本加载、异步 fetch、Service Workers）、事件监听 passive 选项（touch/wheel 使用 passive: true 以允许平滑滚动，需要 preventDefault 时显式设为 false）。
控制台与错误 要求无控制台错误：生产环境移除调试日志，妥善捕获错误；React 使用错误边界；使用全局 error 与 unhandledrejection 处理器。Source map：生产环境避免暴露 source map，使用 hidden-source-map 或不生成；上传到错误跟踪器时剥离 sourcesContent；Vite 优先使用 sourcemap: 'hidden' 而非 true。
性能最佳实践 避免阻塞模式（脚本使用 defer，CSS 使用 link 标签并行加载而非 @import）；高效事件处理器（使用事件委托而非逐元素绑定）；内存管理（组件卸载时移除监听器，或使用 AbortController 清理）。
代码质量 有效 HTML（无重复 ID、合法子元素与嵌套）、语义化 HTML5 元素、图片宽高比（保持实际比例或使用 object-fit）。
权限与隐私 在用户操作上下文中请求权限并解释原因，而非页面加载时请求；使用 Permissions-Policy 限制强大功能或按来源允许。
审计清单 安全（关键）：HTTPS 且无混合内容、无漏洞依赖（npm audit）、CSP 响应头（含 frame-ancestors、base-uri、form-action）、强制执行 require-trusted-types-for 'script'（或推出期间 report-only）、第三方 script/link 用 SRI 哈希固定、安全响应头（HSTS、X-Content-Type-Options、Referrer-Policy）、无暴露的 source map（上传的已剥离 sourcesContent）。兼容性：有效 HTML5 doctype、charset 在 head 中首先声明、存在 viewport meta、无废弃 API、滚动/触摸使用 passive 监听器。代码质量：无控制台错误、有效 HTML（无重复 ID）、使用语义化元素、妥善错误处理、组件内存清理。UX：无侵入式插页、权限在上下文中请求、清晰错误消息、合适图片宽高比。
工具 npm audit（依赖漏洞）、SecurityHeaders.com（响应头分析）、W3C Validator（HTML 验证）、实时 Lighthouse 审计（Chrome DevTools MCP：lighthouse_audit，为智能体提供渲染后的最佳实践检查）、Lighthouse CLI（最佳实践审计回退）、Observatory（安全扫描）。
参考 MDN Web Security、OWASP Top 10、Web Quality Audit。